下课倒计时【原生 JS 实现可直接复制粘贴运行】

卡卡西最近怎么样

已于 2022-04-27 23:56:29 修改

阅读量784

点赞数 23

分类专栏： JavaScript 零基础入门文章标签： jquery javascript html 前端开发语言

于 2022-04-20 11:36:51 首次发布

本文链接：https://blog.csdn.net/weixin_52212950/article/details/124293649

版权

JavaScript 零基础入门专栏收录该内容

80 篇文章 41 订阅

订阅专栏

案例效果：

代码实现：

<!DOCTYPE html>
<html lang="en">
<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>
    <style>
       .bigbox{
           box-sizing: border-box;
           width: 800px;
           height: 500px;
           background-color: rgb(255, 197, 197);
           margin: 120px auto;
       }
       .topbox{
           border: 1.4px solid black;
           border-bottom: none;
           box-sizing: border-box;
           width: 800px;
           height: 200px;
           background-color: rgb(146, 146, 146);
           padding-left: 40px;
           line-height: 230px;
           font-size: 50px;
           font-weight: bold;
           text-shadow: 2px 2px 2px rgb(255, 255, 255);
           letter-spacing: 5px;
       }
       .bottombox{
           position: relative;
           box-sizing: border-box;
           width: 800px;
           height: 300px;
           background-color: rgb(212, 212, 212);
           border: 1.4px solid black;
       }
       ul{
           position: absolute;
           top: 70px;
           right: -25px;
           width: 700px;
           height: 30px;
           box-sizing: border-box;
           list-style: none;
       }
       ul li{
           float: left;
           width: 130px;
           height: 130px;
           background-color: #fff;
           font-size: 60px;
           font-weight: bold;
           line-height: 130px;
           text-align: center;
           text-shadow: 2px 2px 2px rgb(92, 92, 92);
           border: 1.4px solid black;
       }
       ul li:nth-child(even){
           position: relative;
           top: 30px;
           margin: 10px;
           float: left;
           width: 60px;
           height: 60px;
           background-color: #fff;
           font-size: 40px;
           font-weight: bold;
           line-height: 60px;
           text-align: center;
           color: rgb(134, 0, 0);
           background-color: rgb(212, 212, 212);
           text-shadow: 2px 2px 2px #fff;
           border: none;
       }
       
       ul li:last-child{
           margin-right: 0;
       }
    </style>
    <script src="./jquery.js"></script>
</head>
<body>
   <div class="bigbox">
       <div class="topbox">距离下课还剩下:</div>
       <div class="bottombox">
           <ul>
               <li class="timeli1"></li>
               <li>时</li>
               <li class="timeli2"></li>
               <li>分</li>
               <li class="timeli3"></li>
               <li>秒</li>
           </ul>
       </div>
   </div>
   <script>
       document.addEventListener('DOMContentLoaded',function(){
           var timeli1=document.querySelector('.timeli1');
           var timeli2=document.querySelector('.timeli2');
           var timeli3=document.querySelector('.timeli3')
           time1();
           var timer=window.setInterval(function(){
                if(date==aim){
                    window.clearInterval(timer)
                }
                time1();
           },1000);
           function time1(){
               date=+new Date();
               aim=+new Date('2022-4-20 11:40:00');
               time2=(aim-date)/1000;
               var hours=parseInt(time2/60/60%24)
               hours=hours<10?'0'+hours:hours;
               timeli1.innerHTML=hours;
               var minutes=parseInt(time2/60%60)
               minutes=minutes<10?'0'+minutes:minutes;
               timeli2.innerHTML=minutes;
               var seconds=parseInt(time2%60)
               seconds=seconds<10?'0'+seconds:seconds;
               timeli3.innerHTML=seconds;
           }
       })
   </script>
</body>
</html>

卡卡西最近怎么样

关注

23
点赞
踩
18

收藏

觉得还不错? 一键收藏
打赏
28
评论
下课倒计时【原生 JS 实现可直接复制粘贴运行】

案例效果：代码实现：<!DOCTYPE html><html lang="en"><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"> .
复制链接

扫一扫