详解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 相关文章推荐
js 获取中文拼音,Select自动匹配字母获取值的代码
Sep 23 Javascript
手机平板等移动端适配跳转URL的js代码
Jan 25 Javascript
JavaScript框架是什么?怎样才能叫做框架?
Jul 01 Javascript
IE8下jQuery改变png图片透明度时出现的黑边
Aug 30 Javascript
jquery验证邮箱格式是否正确实例讲解
Nov 16 Javascript
基于jquery实现即时检查格式是否正确的表单
May 06 Javascript
jqueryMobile 动态添加元素,展示刷新视图的实现方法
May 28 Javascript
JavaScript运动框架 解决防抖动问题、悬浮对联(二)
May 17 Javascript
javascript 玩转Date对象(实例讲解)
Jul 11 Javascript
Bootstrap滚动监听组件scrollspy.js使用方法详解
Jul 20 Javascript
vue动画打包后失效问题的解决方法
Sep 18 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 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类与对象中的private访问控制的疑问
2012/11/01 PHP
Drupal简体中文语言包安装教程
2014/09/27 PHP
PHP使用Pthread实现的多线程操作实例
2015/11/14 PHP
php提交表单时保留多个空格及换行的文本样式的方法
2017/06/20 PHP
thinkPHP通用控制器实现方法示例
2017/11/23 PHP
laravel 解决多库下的DB::transaction()事务失效问题
2019/10/21 PHP
不错的一个日期输入 动态
2006/11/06 Javascript
JavaScript打印网页指定区域的例子
2014/05/03 Javascript
浅析四种常见的Javascript声明循环变量的书写方式
2015/10/14 Javascript
jquery实现全选功能效果的实现代码
2016/05/05 Javascript
vue动态组件实现选项卡切换效果
2017/03/08 Javascript
nodejs个人博客开发第二步 入口文件
2017/04/12 NodeJs
Angular.JS中的this指向详解
2017/05/17 Javascript
js实现下拉框二级联动
2018/12/04 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
2019/04/10 Javascript
uni-app 支持多端第三方地图定位的方法
2020/01/03 Javascript
js实现九宫格布局效果
2020/05/28 Javascript
[59:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第二局
2016/03/04 DOTA
[47:04]EG vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python字符遍历的艺术
2008/09/06 Python
使用python开发vim插件及心得分享
2014/11/04 Python
使用Python保存网页上的图片或者保存页面为截图
2016/03/05 Python
PyQt5每天必学之拖放事件
2020/08/27 Python
PyQt5实现无边框窗口的标题拖动和窗口缩放
2018/04/19 Python
Django bulk_create()、update()与数据库事务的效率对比分析
2020/05/15 Python
keras 如何保存最佳的训练模型
2020/05/25 Python
html5 touch事件实现触屏页面上下滑动(二)
2016/03/10 HTML / CSS
德国珠宝和配件商店:Styleserver
2021/02/23 全球购物
工业设计毕业生自荐信
2014/04/13 职场文书
语文教研活动总结
2014/07/02 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
党员民主评议自我评价
2014/10/20 职场文书
乡镇党建工作总结2015
2015/05/19 职场文书
如何在Python项目中引入日志
2021/05/31 Python
python神经网络学习 使用Keras进行简单分类
2022/05/04 Python