美文网首页
JS-万年历

JS-万年历

作者: 你怀中的猫 | 来源:发表于2022-03-27 18:03 被阅读0次

    要求:一个输入框,一个生成万年历的按钮,输入一个年份,生成该年份的万年历,判断输入的年份,如果是空的、不是数字、开头不是字母,则弹出输入的年份有误,重新输入。输入正确,渲染出正确的万年历。

    html代码

    <!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
        <link rel="stylesheet" href="./3-index.css">
    </head>
    <body>
        <div class="head">
            <input type="text" placeholder="请输入年份" id="int">
            <button id="btn">生成万年历</button>
        </div>
       
        <!-- 1900年1月1日是星期一,起始位置 -->
        <div class="wrap">
            <!-- 年份 -->
            <div id="years"></div>
            <div class="data"></div>
        </div>
    </body>
    <script src="./3-calendar.js"></script>
    </html>
    

    css代码

    * {
      margin: 0px;
      padding: 0px;
    }
    a {
      text-decoration: none;
      color: #000;
    }
    ul,
    ol {
      list-style-type: none;
    }
    table {
      border-collapse: collapse;
    }
    form {
      margin: 0px;
      padding: 0px;
    }
    input {
      outline: none;
      margin: 0px;
      padding: 0px;
      border-width: 1px;
    }
    select {
      margin: 0px;
      padding: 0px;
    }
    textarea {
      margin: 0px;
      padding: 0px;
      outline: none;
      resize: none;
      overflow: auto;
    }
    .clear {
      clear: both;
    }
    .clear::after {
      content: '';
      clear: both;
    }
    body {
      background-color: #333;
    }
    .head {
      margin-top: 20px;
      margin-bottom: 50px;
      text-align: center;
    }
    .head input {
      width: 300px;
      height: 50px;
      font-size: 25px;
      box-sizing: border-box;
      padding-left: 10px;
    }
    .head #btn {
      width: 130px;
      height: 50px;
      padding: 10px;
      font-size: 20px;
    }
    .wrap {
      background-color: #fff;
      width: 1260px;
      margin: 0 auto;
      text-align: center;
    }
    .wrap .year {
      font-size: 30px;
      font-weight: bold;
      border: 1px solid #333;
      height: 50px;
      line-height: 50px;
      background-color: rgba(250, 213, 165, 0.609);
    }
    .wrap .year::after {
      content: "年";
    }
    .wrap .data {
      font-size: 0;
    }
    .wrap .data .item {
      width: 210px;
      display: inline-block;
      vertical-align: top;
    }
    .wrap .data .item .month {
      font-size: 20px;
      line-height: 40px;
      border: 1px solid #333;
      background-color: #affdaf;
      color: #413e3e;
    }
    .wrap .data .item ul {
      text-align: left;
      border: 1px solid #333;
      box-sizing: border-box;
    }
    .wrap .data .item ul li {
      text-align: center;
      display: inline-block;
      font-size: 15px;
      width: 29.72px;
      background-color: #fff;
      height: 29.72px;
      line-height: 29.72px;
      border: 1px solid #333;
      box-sizing: border-box;
      vertical-align: top;
      transition: 0.7s;
      z-index: 10;
      cursor: pointer;
    }
    .wrap .data .item ul li:hover {
      transform: scale(1.5);
      border-radius: 100%;
    }
    .wrap .data .item ul .on {
      background-color: #15e6d4;
      color: #f8f5f5;
    }
    
    

    js代码

    //获取data盒子
    var data = document.getElementsByClassName("data")[0];
    
    //获取年份栏
    var years = document.getElementById('years');
    //获取输入框中的内容
    var int = document.getElementById('int');
    
    //当前年份
    // year = year.innerText * 1;
    
    btn.onclick = function () {
        //获取输入框中的内容
        var year = parseInt(int.value);
        if(isNaN(year) || year < 1900){
            return alert("请输入正确的年份");
        }
        // console.log(year)
    
        //生成年份栏
        years.innerHTML = ` <div class="year">${year}</div>`;
        //判断闰年、平年
        //能被4整除但不能对100整除,或者能被400整除
        //用三目运算符
        var p = (year % 100 == 0) ? ((year % 400 == 0) ? 1 : 0) : ((year % 4 == 0) ? 1 : 0);
    
        //声明一个数组用来保存所有的天数
        var arr = [31, 28 + p, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
    
        //使用for循环,将item盒子添加至data中
        var sCon = '';
        for (var i = 0; i < arr.length; i++) {
            sCon += `<div class="item">
                    <div class="month">${i + 1}月</div>
                    <ul>`;
    
            //计算每一个月的1号 到1900年一月一号中间有多少天
            //先算当前年份距1900年有多少天
            var days = 0; //声明一个变量,保存总天数
            for (var j = 1900; j < year; j++) {
                //计算当前年份有多少天  平年365天,闰年366天
                days += (j % 100 == 0) ? ((j % 400 == 0) ? 366 : 365) : ((j % 4 == 0) ? 366 : 355);
            }
            //再算当前年当前月的1号 到当前年的一月一号 有多少天
            for (var k = i - 1; k >= 0; k--) {
                days += arr[k];
            }
            console.log(days)
    
            for(var l = 0 ; l < 7; l++){
                sCon += `<li>周${l + 1}</li>`;
            }
            //根据总天数,计算当前月1号前面需要补充多少空格
            //声明一个变量
            var boxs = days % 7;
            //生成每月1号前面的空格
             // 定义一个变量
            var oDay;
            if(i==0){
                oDay=31-boxs+1;
            }else{
                oDay=arr[i-1]-boxs+1;
            }
            for(var k = 0; k < boxs; k++){
                sCon += `<li class='on'>${oDay}</li>`;
                oDay++;
            }
            for (var j = 0; j < arr[i]; j++) {
                sCon += `<li>${j + 1}</li>`
            }   
            //生成每个月最后一天后面的空格
            //每个月最后一天后面的空格数 = 42 - 前面的空格数 - 当月天数
            for(var k = 0 ; k < 42 - boxs - arr[i]; k++){
                sCon += `<li class='on'>${k + 1}</li>`;
            }
            sCon += `</ul>
                </div>`;
        }
        data.innerHTML = sCon;
    }
    
    

    相关文章

      网友评论

          本文标题:JS-万年历

          本文链接:https://www.haomeiwen.com/subject/trnpjrtx.html