js简易网页特效

这里写目录标题

  • 002 网页日历
  • 001 简易版计算器

002 网页日历

js简易网页特效_第1张图片

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    #data {
      width: 300px;
      border: 1px solid #000;
      margin: 20px auto;
    }
    #data > p {
      display: flex;
    }
    #data > p span{
      padding: 0 10px;
    }
    #data > h5 {
      text-align: center;
    }
    #prev,#next {
      cursor: pointer;
    }
    #nian {
      flex: 1;
      text-align: center;
    }
    #title {
      overflow: hidden;
      list-style: none;
      background-color: #ccc;
    }
    #title li {
      float: left;
      width: 40px;
      height: 26px;
      line-height: 26px;
      text-align: center;
    }
    #date {
      overflow: hidden;
      list-style: none;
    }
    #date li {
      float: left;
      width: 34px;
      height: 34px;
      margin: 1px 1px;
      border: 2px solid #000;
      line-height: 34px;
      text-align: center;
      cursor: pointer;
      list-style: none;
    }
    #date > .hover:hover {
      border:2px solid red;
    }
    .active{
      color:red
    }
  </style>
</head>
<body>
  <div id="data">
    <p>
      <span id="prev">上一月</span>
      <span id="nian">2022</span>
      <span id="next">下一月</span>
    </p>
    <h5 id="yue">一月</h5>
    <ul id="title">
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>
    </ul>
    <ul id="date"></ul>
  </div>

  <script>
    let date = new Date(); //获取默认时间对象
    add() // 当页面第一次进入时触发一下

    function add() {
      let cYear = date.getFullYear(); //获取当前年份
      let cMonth = date.getMonth(); //获取当前月份
      let cDay = date.getDate() // 当前的天
      console.log(cDay,'1');

      // 每个月的第一天是周几
      let week = new Date(cYear,cMonth,1).getDay()
      // 获取每个月的天数
      let days = new Date(cYear,cMonth+1,-1).getDate()+1;

      let arr = ['一月','二月','三月','四月','五月','六月','七月','八月','九月','十月','十一月','十二月',]

      document.getElementById('nian').innerHTML = cYear
      document.getElementById('yue').innerHTML = arr[cMonth]

      let html = '';

      for(var i = 0; i < week; i++) {
        html += '
  • '
    } for(var i = 1; i <= days; i++) { if( i == cDay) { html += '
  • '+i+'
  • '
    } html += '
  • '+i+'
  • '
    } document.getElementById('date').innerHTML = html } document.getElementById('prev').onclick = function(){ date.setMonth(date.getMonth()-1); add() } document.getElementById('next').onclick = function(){ date.setMonth(date.getMonth()+1); add() } </script> </body> </html>

    001 简易版计算器

    js简易网页特效_第2张图片

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
    </head>
    <body>
      <div>
        <input type="text" size="5" id="num1" value="">
        <select id="ysf">
          <option value="+">+</option>
          <option value="-">-</option>
          <option value="*">*</option>
          <option value="/">/</option>
          <option value="%">%</option>
        </select>
        <input type="text" size="5" id="num2" value="">
        <input type="button" id="btn" value="计算">
      </div>
      <p id="res">请输入运算的数</p>
    
      <script>
        // 获取按钮注册事件
        document.getElementById('btn').onclick = function() {
          var num1 = document.getElementById('num1').value
          var num2 = document.getElementById('num2').value
          var ysf = document.getElementById('ysf').value
    
          var result = "ERROR:"
          var flag = true //做一个标记
          if(num1 == ""){
            result += "第一个运算符为空#"
            flag = false
          }else {
            num1 = parseFloat(num1)
            if(isNaN(num1)){
              result += "第一个元不是有效的数字#"
              flag = false
            }
          }
          if(num2 == ""){
            result += "第二个运算符为空#"
            flag = false
          }else {
            num2 = parseFloat(num2)
            if(isNaN(num2)){
              result += "第二个元不是有效的数字#"
              flag = false
            }
          }
    
          if(flag){
            switch(ysf) {
              case '+' :result = "运算结果"+num1+ "+" +num2+"="+(num1+num2);break;
              case '-' :result = "运算结果"+num1+ "-" +num2+"="+(num1-num2);break;
              case '*' :result = "运算结果"+num1+ "*" +num2+"="+(num1*num2);break;
              case '/' :
                if(num2 == 0) {
                  result = '除数不能为0'
                }else {
                  result = "运算结果"+num1+ "/" +num2+"="+(num1/num2);
                }break;
              case '%' :
                if(num2 == 0) {
                  result = '除数不能为0'
                }else {
                  result = "运算结果"+num1+ "%" +num2+"="+(num1%num2);
                }break;
            }
          }
    
          document.getElementById('res').innerHTML = result;
        }
      </script>
    </body>
    </html>
    

    你可能感兴趣的:(js简易网页特效)