作业16 项目实训：毕业倒计时（v2）

2年前更新

390

主要内容

实现毕业倒计时页面，使用Date对象获得当前时间。将当前时间的数字值与毕业时间进行运算，计算出具体的值。本项目实现较复杂，所以可用定义函数的方式来解决。

代码

<html>
    <head>
  <title>毕业倒计时</title>
  <meta charset="UTF-8">
              <style>
        * {
            margin: 0;
            padding: 0;
            list-style-type: none;
        }
        #namewindow {
            background: linear-gradient(rgba(229, 255, 8, 0.841), rgba(0, 225, 255, 0.404));
            width: 250px;
            height: 200px;
            position: fixed;
            left: 100px;
            top: 80px;
            font: 20px/180% "Microsoft YaHei", "微软雅黑", "宋体";
            text-align: center;
        }
        
            body {
        background: url(bj.jpeg); background-size:cover;
        background-repeat: no-repeat; background-attachment: fixed;
    }
    #p {
        text-align: center; font-size: 30px;
    }
    ul {
        width: 400px;
        margin: 0 auto;
        list-style: none; color: □ white;
    }
    li {
        float: left;
        width: 80px;
        height: 80px;
        background-color: U#6312E7;
        margin-left: 10px;
        font-weight: bold;
        font-size: 30px;
        text-align: center;
    }
    .title {
        font-size: 18px;
    }
    
    </style>

</head>

<body>
<p id="p">距离2025年毕业还有</p>
<ul>
  <li>
    <span id="day"></span>
    <br>
    <span class="title">天</span>
  </li>
  <li>
    <span id="hour"></span>
    <br>
    <span class="title">时</span>
  </li>
  <li>
    <span id="min"></span>
    <br>
    <span class="title">分</span>
  </li>
  <li>
    <span id="sec"></span>
    <br>
    <span class="title">秒</span>
  </li>
</ul>

    <script>
function calculate() {
  var now = new Date();
  var sports = new Date("2025,6,30");
  var leftSeconds = (sports.getTime() - now.getTime()) / 1000;
  var daysLeft = Math.floor(leftSeconds / 3600 / 24);
  var hoursLeft = Math.floor(leftSeconds / 3600 % 24);
  var minutesLeft = Math.floor(leftSeconds / 60 % 60);
  var secondsLeft = Math.floor(leftSeconds % 60);
  document.querySelector("#day").innerHTML = daysLeft;
  document.querySelector("#hour").innerHTML = hoursLeft;
  document.querySelector("#min").innerHTML = minutesLeft;
  document.querySelector("#sec").innerHTML = secondsLeft;
}
calculate();
setInterval(calculate, 1000);
</script>



        <div id="namewindow">
        <p>姓名:罗xx</p>
        <br>
        <p>专业: 计算机应用技术x班</p>
        <br>
        <p>学号: 226501XXXXX</p>
    </div>
    
</body>


</html>

懒得截图了

HTML文件

16.html

下载

html文件

2.4K

评分

欢迎为Ta评分

赞赏

作业16 项目实训：毕业倒计时（v2）

主要内容

代码

HTML文件

JavaScript