详解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和jQuery随意改变div属性style的名称和值
Oct 22 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
Apr 01 Javascript
seajs中模块依赖的加载处理实例分析
Oct 10 Javascript
浅谈React的最大亮点之虚拟DOM
May 29 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
详解npm 配置项registry修改为淘宝镜像
Sep 07 Javascript
对angular4子路由&amp;辅助路由详解
Oct 09 Javascript
ES6顶层对象、global对象实例分析
Jun 14 Javascript
解决layui使用layui-icon出现默认图标的问题
Sep 11 Javascript
js回调函数仿360开机
Dec 26 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安全编程之加密功能
2006/10/09 PHP
IIS6+PHP5+MySQL5+Zend Optimizer+phpMyAdmin安装配置图文教程 2009年
2009/06/08 PHP
PHP设计模式 注册表模式
2012/02/05 PHP
PHP判断文件是否被引入的方法get_included_files用法示例
2016/11/29 PHP
使用YII2框架实现微信公众号中表单提交功能
2017/09/04 PHP
PHP使用HTML5 FileApi实现Ajax上传文件功能示例
2019/07/01 PHP
在laravel中实现将查询的对象转换为多维数组的函数
2019/10/21 PHP
Javascript监视变量变化的方法
2015/06/09 Javascript
javascript+HTML5的canvas实现七夕情人节3D玫瑰花效果代码
2015/08/04 Javascript
jQuery解决input超多的表单提交
2015/08/10 Javascript
学做Bootstrap的第一个页面
2016/05/15 HTML / CSS
详解javascript事件绑定使用方法
2016/10/20 Javascript
js手机号批量滚动抽奖实现代码
2020/04/17 Javascript
json数据处理及数据绑定
2017/01/25 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
2017/01/30 Javascript
Angular指令之restict匹配模式的详解
2017/07/27 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
vue项目中使用scss的方法步骤
2019/05/16 Javascript
vue配置文件实现代理v2版本的方法
2019/06/21 Javascript
24个ES6方法解决JS实际开发问题(小结)
2020/05/31 Javascript
Python的Flask框架的简介和安装方法
2015/11/13 Python
python实现一个简单的并查集的示例代码
2018/03/19 Python
Python实现处理逆波兰表达式示例
2018/07/30 Python
Python关键字及可变参数*args,**kw原理解析
2020/04/04 Python
pandas DataFrame 数据选取,修改,切片的实现
2020/04/24 Python
记录模型训练时loss值的变化情况
2020/06/16 Python
德国游戏机商店:Konsolenkost
2019/12/08 全球购物
大专应届生个人简历的自我评价
2013/10/15 职场文书
数据员岗位职责
2013/11/19 职场文书
市场营销专科应届生求职信
2013/11/24 职场文书
关于爱国的标语
2014/06/24 职场文书
印刷技术专业自荐信
2014/09/18 职场文书
八项规定个人对照检查材料思想汇报
2014/09/25 职场文书
2015小学教育教学工作总结
2015/07/21 职场文书
参加招聘会后的感想
2015/08/10 职场文书
描述鲁迅的名言整理,一生受用
2019/08/08 职场文书