您正在使用IPV4(54.161.98.96)访问本站 您本次共访问本站 1 次
 用户名: 密 码: 验证码:     用QQ登录本站
首页 软件 编程 笑话 知识 公告 台风 日历 计算器 行情 简化版
文明驾车我带头,文明行路我带头,礼貌让座我带头      

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript实现简单计时器
    内容摘要: !DOCTYPEhtmlhtmllang='en'headmetacharset='UTF-8'title计时器/titlestyle.bigDiv{margin:50pxauto;width:200px;height:200px;background-color:lightskyblue;border-radius:10px;}#showNum{width......
    <!DOCTYPEhtml>

    <htmllang="en">

    <head>

    <metacharset="UTF-8">

    <title>计时器</title>

    <style>

    .bigDiv{

    margin:50pxauto;

    width:200px;

    height:200px;

    background-color:lightskyblue;

    border-radius:10px;

    }

    #showNum{

    width:200px;

    height:20px;

    background-color:orange;

    text-align-all:center;

    border-radius:5px;

    }

    </style>

    </head>

    <body>

    <divclass="bigDiv">

    <h2align="center">计时器</h2>

    <divid="showNum"align="center">

    0

    </div>

    <br>

    <br>

    <divclass="butDiv">&nbsp&nbsp&nbsp&nbsp

    <buttontype="button"id="start">开始</button>

    &nbsp

    <buttontype="button"id="stop">停止</button>

    &nbsp

    <buttontype="button"id="reset">复位</button>

    &nbsp

    </div>

    </div>

    <script>

    //定义显示的时间

    letint=null;

    /**

    *开始单击事件

    */

    document.getElementById("start").addEventListener('click',function(){

    if(int==null){

    //设置定时器

    //每隔参数二毫秒执行一次参数一

    int=setInterval(startNum,1000);

    }

    });

    /**

    *停止单击事件

    */

    document.getElementById("stop").addEventListener('click',function(){

    //清除定时器,

    clearInterval(int);

    int=null;

    });

    /**

    *复位单击事件

    */

    letnum=0;

    document.getElementById("reset").addEventListener('click',function(){

    if(int==null){

    num=0;

    //将时间变成0

    document.getElementById("showNum").innerHTML=num;

    }

    });

    functionstartNum(){

    num++;

    //持续改变时间

    document.getElementById("showNum").innerHTML=num;

    }

    </script>

    </body>

    </html>

    上一篇:JavaScript的计时器和按钮效果设置 下一篇:JavaScript按比例拖拉缩放
    发布日期:2022/1/1
    手机扫二维码直达本页
    发布时间:13:48:13
    点击:261
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022