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

【腾讯云】云产品限时秒杀,爆款1核2G云服务器,首年74元      
[公益] 节省一分零钱 献出一份爱心 温暖世间真情      
2022年 情人节 18
2022年 元宵节 19
2023年 元 旦 339
2022年 春 节 5
 
  • 本类新增
    本类热门文章
    您现在的位置:首页 >> JS/CSS >> 内容
    JavaScript的计时器和按钮效果设置
    内容摘要: divfontid='timeCount'style='display:inline-block;font-size:72px;width:100px;text-align:right;'0/fontnbsp;nbsp;nbsp;//需要固定时间值的宽度,避免时间值从9变到10(以及从99变到100)时后面三张图片的位置发生变化//但是font是行内元素,无......
    <div>

    <fontid='timeCount'style='display:inline-block;font-size:72px;width:100px;text-align:right;'>0</font>&nbsp;&nbsp;&nbsp;

    //需要固定时间值的宽度,避免时间值从9变到10(以及从99变到100)时后面三张图片的位置发生变化

    //但是font是行内元素,无法设置宽度,所以把font变为行内块元素display:inline-block

    <imgsrc='start.png'class='imgBtn'onclick="start(this)">

    <imgsrc='suspend.png'class='imgBtn'onclick="suspend(this)">

    <imgsrc='stop.png'class='imgBtn'onclick="stop(this)">

    </div>

    .imgBtn{

    cursor:pointer;

    width:25px;

    height:25px;

    }

    vartimerState=2;//0-start(正在计时)1-suspend(暂停计时)2-stop(停止计时)

    vartimerID;//计时器

    //点击开始按钮,调用该函数

    functionstart(obj){

    if(timerState==0)//如果当前状态为正在计时,本次点击不起作用

    return;

    else

    {

    timerState=0;//标识正在计时

    changeImgBtnState();//改变按钮的显示效果

    timerID=setInterval("f7()",500);//启动计时器

    }

    }

    functionsuspend(obj){

    if(timerState==1||timerState==2)

    return;//如果当前状态为暂停计时或停止计时,本次点击不起作用

    else

    {

    timerState=1;//标识暂停计时

    changeImgBtnState();//改变按钮的显示效果

    clearInterval(timerID);//清除计时器

    }

    }

    functionstop(obj){

    if(timerState==2)//如果当前状态为停止计时,本次点击不起作用

    return;

    if(timerState==0)//如果当前状态为正在计时,清除计时器

    clearInterval(timerID);

    document.getElementById('timeCount').innerHTML=0;//计时数值清零

    timerState=2;//标识停止计时

    changeImgBtnState();//改变按钮的显示效果

    }

    functionf7()

    {

    vari=document.getElementById('timeCount').innerHTML;

    document.getElementById('timeCount').innerHTML=parseInt(i)+1;

    }

    functionchangeImgBtnState(){

    varimgBtn=document.getElementsByClassName('imgBtn');

    for(vari=0;i<3;i++){

    imgBtnState(imgBtn[i],timerState!=i);

    }

    }

    functionimgBtnState(obj,flag){

    if(flag==false)//按钮不可用

    obj.style.cssText="border:1pxsolidblack;width:15px;height:15px;padding:5px;";

    else

    obj.style.cssText="border:0pxsolidblack;width:25px;height:25px;padding:0px;";

    }

    上一篇:js实现数字滚动特效 下一篇:JavaScript实现简单计时器
    发布日期:2022/1/1
    手机扫二维码直达本页
    发布时间:13:43:15
    点击:261
    录入:齐天大圣
    相关文章
    Baidu
    YiJiaCMS 6.1.0.10988 Build 21.12.28(MSSQL) 闽ICP备05000814号-1
    本空间由腾讯云(轻量应用服务器)提供,百度云加速提供加速防护

    Copyright©2000-2022