60秒倒计时插件

最新推荐文章于 2021-05-18 19:06:09 发布

xiaoshunshi

最新推荐文章于 2021-05-18 19:06:09 发布

阅读量409

点赞数

文章标签：插件的写法

本文链接：https://blog.csdn.net/xiaoshunshi/article/details/78902673

版权

<!DOCTYPE html>
<html>

   <head>
       <meta charset="UTF-8">
       <title></title>
   </head>
   <body>
       <div id="timer">

       </div>
       <div id="timer2">

       </div>
   </body>
   <script type="text/javascript">
       (function(w, doc, undefined) {
           w.jishi = function(opt) {
               this.div = doc.querySelector(opt.id);
               this.init(opt.num);
           }
           jishi.prototype = {
               constructor: jishi,
               init: function(num) {
                   var $this = this;
                   var tempdiv = doc.createElement("div");
                   var span = doc.createElement("span");
                   span.innerHTML = num;
                   tempdiv.appendChild(span);
                   var spanafter = doc.createElement("span");
                   spanafter.innerHTML = "秒";
                   tempdiv.appendChild(spanafter);
                   $this.div.appendChild(tempdiv);
                   $this.timer = setInterval(function() {
                       $this.plus();
                   }, 1000);
               },
               plus: function() {
                   var $this = this;
                   var span = $this.div.getElementsByTagName("span")[0];
                   var num = span.innerText;
                   num--;
                   if(num == 0) {
                       clearInterval($this.timer);
                   };
                   num = num < 10 ? "0" + num : num;
                   span.innerText = num;
               }
           }
       }(window, document))
   </script>
   <script type="text/javascript">
       var timer = new jishi({
           id: "#timer",
           num: 12
       })
       var timer2 = new jishi({
           id: "#timer2",
           num: 60
       })
   </script>

</html>