js简易网页特效

最新推荐文章于 2024-08-03 22:21:30 发布

零度碳酸-

最新推荐文章于 2024-08-03 22:21:30 发布

阅读量625

点赞数

文章标签： js html css

本文链接：https://blog.csdn.net/weixin_41086056/article/details/106428569

版权

这里写目录标题

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

002 网页日历

在这里插入图片描述

<!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 += '<li></li>'
      }

      for(var i = 1; i <= days; i++) {
        if( i == cDay) {
          html += '<li class="active">'+i+'</li>'
        }
        html += '<li class="hover">'+i+'</li>'
      }
      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 简易版计算器

在这里插入图片描述

<!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>

零度碳酸-

关注

0
点赞
踩
7

收藏

觉得还不错? 一键收藏
0
评论
js简易网页特效

这里写目录标题002 网页日历001 简易版计算器002 网页日历<!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&gt
复制链接

扫一扫