详解JavaScript的计时器和按钮效果设置


Posted in Javascript onFebruary 18, 2022

计时器效果: 

详解JavaScript的计时器和按钮效果设置

<div>
    <font id='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
    <img src='start.png'   class='imgBtn'  onclick="start(this)" >
    <img src='suspend.png' class='imgBtn'  onclick="suspend(this)">
    <img src='stop.png'    class='imgBtn'  onclick="stop(this)">
</div>
.imgBtn{ 
    cursor:pointer; 
    width:25px;
    height:25px;
}
var timerState=2;//0-start(正在计时)  1-suspend(暂停计时)  2-stop(停止计时)
var timerID;//计时器
//点击开始按钮,调用该函数
function start(obj){
	if(timerState==0) //如果当前状态为正在计时,本次点击不起作用
		return;
	else
	{
		timerState=0;//标识 正在计时
		changeImgBtnState(); //改变按钮的显示效果
		timerID=setInterval("f7()",500); //启动计时器
	}
}
function suspend(obj){
	if(timerState==1 || timerState==2)
		return; //如果当前状态为 暂停计时 或 停止计时,本次点击不起作用
	else
	{
		timerState=1; //标识 暂停计时
		changeImgBtnState(); //改变按钮的显示效果
		clearInterval(timerID); //清除计时器
	}
}
function stop(obj){
	if(timerState==2) //如果当前状态为 停止计时,本次点击不起作用
		return;
	if(timerState==0)  //如果当前状态为正在计时,清除计时器
		clearInterval(timerID); 
	document.getElementById('timeCount').innerHTML=0; //计时数值清零
	timerState=2; //标识 停止计时
	changeImgBtnState(); //改变按钮的显示效果
}
function f7()
{
	var i=document.getElementById('timeCount').innerHTML;
	document.getElementById('timeCount').innerHTML=parseInt(i)+1;
}
function changeImgBtnState(){
	var imgBtn=document.getElementsByClassName('imgBtn');
	for(var i=0;i<3;i++){
		imgBtnState(imgBtn[i],timerState!=i);
	}
}
function imgBtnState(obj,flag){
	if(flag==false) //按钮不可用
		obj.style.cssText="border:1px solid black;width:15px;height:15px;padding:5px;";
	else
		obj.style.cssText="border:0px solid black;width:25px;height:25px;padding:0px;";
}

总结

本篇文章就到这里了,希望能够给你带来帮助,也希望您能够多多关注三水点靠木的更多内容!

Javascript 相关文章推荐
javascript void(0)的妙用
Oct 21 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
jquery.cookie.js使用指南
Jan 05 Javascript
jQuery带时间的日期控件代码分享
Aug 26 Javascript
Javascript中this绑定的3种方法与比较
Oct 13 Javascript
JS 实现随机验证码功能
Feb 15 Javascript
从零学习node.js之详解异步控制工具async(八)
Feb 27 Javascript
jQuery插件echarts设置折线图中折线线条颜色和折线点颜色的方法
Mar 03 Javascript
vue+echarts实现动态绘制图表及异步加载数据的方法
Oct 17 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
微信小程序使用npm支持踩坑
Nov 07 Javascript
vue3.0 搭建项目总结(详细步骤)
May 20 Javascript
一篇文章告诉你如何实现Vue前端分页和后端分页
javascript的var与let,const之间的区别详解
Feb 18 #Javascript
交互式可视化js库gojs使用介绍及技巧
gojs实现蚂蚁线动画效果
uni-app 微信小程序授权登录的实现步骤
Feb 18 #Javascript
详解TypeScript的基础类型
Feb 18 #Javascript
详解jQuery的核心函数和事件处理
Feb 18 #jQuery
You might like
php开启安全模式后禁用的函数集合
2011/06/26 PHP
php提高网站效率的技巧
2015/09/29 PHP
php实现微信公众号无限群发
2015/10/11 PHP
对象无length属性时IE6/IE7中无法将其转换成伪数组(ArrayLike)
2011/07/31 Javascript
各浏览器对document.getElementById等方法的实现差异解析
2013/12/05 Javascript
jQuery点击按钮弹出遮罩层且内容居中特效
2015/12/14 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
2015/12/14 Javascript
使用堆实现Top K算法(JS实现)
2015/12/25 Javascript
JS设置cookie、读取cookie
2016/02/24 Javascript
微信端开发--登录小程序步骤
2017/01/11 Javascript
vuejs实现本地数据的筛选分页功能思路详解
2017/11/15 Javascript
微信小程序利用canvas 绘制幸运大转盘功能
2018/07/06 Javascript
cnpm加速Angular项目创建的方法
2018/09/07 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
angular4 获取wifi列表中文显示乱码问题的解决
2018/10/20 Javascript
layui-laydate时间日历控件使用方法详解
2018/11/15 Javascript
vue项目中锚点定位替代方式
2019/11/13 Javascript
Python中DJANGO简单测试实例
2015/05/11 Python
Python中如何获取类属性的列表
2016/12/26 Python
Python中elasticsearch插入和更新数据的实现方法
2018/04/01 Python
Python实现基于PIL和tesseract的验证码识别功能示例
2018/07/11 Python
在双python下设置python3为默认的方法
2018/10/31 Python
Python多线程原理与用法实例剖析
2019/01/22 Python
python编写猜数字小游戏
2019/10/06 Python
Python利用matplotlib绘制约数个数统计图示例
2019/11/26 Python
Python GUI编程学习笔记之tkinter界面布局显示详解
2020/03/30 Python
Python 存取npy格式数据实例
2020/07/01 Python
浏览器实现移动端高性能css3动画(开启gpu加速)
2013/12/23 HTML / CSS
HTML5输入框下拉菜单功能的示例代码
2020/09/08 HTML / CSS
椰子猫砂:CatSpot
2018/08/27 全球购物
高中数学教学反思
2014/01/30 职场文书
党的群众路线教育实践活动学习心得体会
2014/03/03 职场文书
2014学习全国两会精神心得体会2000字
2014/03/11 职场文书
爱之链教学反思
2014/04/30 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
导游词之张家界
2019/10/31 职场文书