zoukankan      html  css  js  c++  java
  • jquery倒计时定时器


    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <script src="../js/jquery.min.js"></script>
     
        <style>
     
            .active{font-size:16px;color:#ffffff;
                background: #000000;padding:10px;}
        </style>
     
    </head>
    <body>
     
     
    数字从1变化到10:<div id="box1">0</div>
     
    自动添加类:<div id="box2">0000000</div>
     
    3秒后自动添加类:<div id="box3">0000000</div>
     
    <script>
     
        $(function () {
     
            fn1("#box1");
            fn2("#box2");   //方法执行
     
            setTimeout("fn2('#box3')",3000)     //3秒后方法自动执行
        });
     
        function fn1(selector){
            var num=0;
            timer=setInterval(function(){
                num++;
               // alert(num)
               // var text="<span>"+num+",</span>"
               // $(selector).append(text);    //节点添加
                $(selector).text(num);
                if(num==10){
                    clearInterval(timer);   //定时器清除;
                }
            },1000);
        };
     
     
        function fn2(selector){
            $(selector).addClass("active");
        };
     
     
     
     
    </script>

  • 相关阅读:
    angular6 增加webpack配置 亲测可用
    Git 忽略提交 .gitignore
    pc 媒体查询
    angular vue通过node启动项目局域网内关闭防火墙无法访问的解决办法
    js判断isNumber(obj)
    hook
    javascript中this的四种用法
    JavaScript中闭包函数
    JavaScript(ES3)中的方法, 及bind apply call的使用
    ES6 箭头函数
  • 原文地址:https://www.cnblogs.com/0826sw/p/11915285.html
Copyright © 2011-2022 走看看