html5 信息提示5秒倒计时

刑不刑

已于 2022-03-07 17:42:34 修改

阅读量842

点赞数

文章标签： html5 微信 html

于 2022-02-18 11:33:11 首次发布

本文链接：https://blog.csdn.net/qq_42915903/article/details/122999767

版权

这是一个使用HTML、CSS和JavaScript实现的简单倒计时闹钟。页面中有一个红色的小圆圈作为报警图标，圆圈内显示剩余秒数。JavaScript函数每秒更新剩余时间，当时间减到0时，倒计时停止，并在控制台输出'停止'。

摘要由CSDN通过智能技术生成

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           .alarm {
               position: relative;
               width: 60px;
               height: 60px;
               margin: 60px;
           }
           .alarm img {
               width: 60px;
               height: 60px;
           }
           .divright {
               position: absolute;
               color: white;
               font-size: 17px;
               background-color: red;
               width: 23px;
               height: 23px;
               line-height: 23px;
               left: 80%;
               top: -12px;
               text-align: center;
               -webkit-border-radius: 24px;
               border-radius: 24px;
           }
       </style>
   </head>
   <script>
   //使用匿名函数方法一秒调一次更改提示数值
   var myVar = setInterval(function(){ countDown() }, 1000);
   // 函数方法
   function countDown(){
   // 获取提示数值
   var time = document.getElementById("Time");
   //获取到id为time标签中的内容，现进行判断
   if(time.innerHTML == 0){
   //等于0时清除计时
   clearInterval(myVar);
   console.log('停止')
   }else{
   time.innerHTML = time.innerHTML-1;
   }
   }
   </script>
   <body>
       <div class="alarm">
           <img src="../img/1%20(1).jpg" />
           <div class="divright" id="Time">
               3
           </div>
       </div>
   </body>
</html>