详解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 Select操作大集合
May 26 Javascript
google 搜索框添加关键字实现代码
Apr 24 Javascript
JavaScript.The.Good.Parts阅读笔记(一)假值与===运算符
Nov 16 Javascript
尝试在让script的type属性等于text/html
Jan 15 Javascript
js跨浏览器的事件侦听器和事件对象的使用方法
Dec 17 Javascript
Jquery跨浏览器文本复制插件Zero Clipboard的使用方法
Feb 28 Javascript
JavaScript Promise 用法
Jun 14 Javascript
使用cropper.js裁剪头像的实例代码
Sep 29 Javascript
jQuery实现打开网页自动弹出遮罩层或点击弹出遮罩层功能示例
Oct 19 jQuery
详解React 在服务端渲染的实现
Nov 16 Javascript
Vue环境搭建+VSCode+Win10的详细教程
Aug 19 Javascript
在HTML5 localStorage中存储对象的示例代码
Apr 21 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/12/13 PHP
从MySQL数据库表中取出随机数据的代码
2007/09/05 PHP
php列出mysql表所有行和列的方法
2015/03/13 PHP
php将字符串转换为数组实例讲解
2020/05/05 PHP
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
JS 实现计算器详解及实例代码(一)
2017/01/08 Javascript
基于jQuery Ajax实现下拉框无刷新联动
2017/12/06 jQuery
JS基于对象的链表实现与使用方法示例
2019/01/31 Javascript
浅谈Webpack多页应用HMR卡住问题
2019/04/24 Javascript
JQuery animate动画应用示例
2019/05/14 jQuery
使用Vue开发自己的Chrome扩展程序过程详解
2019/06/21 Javascript
bootstrap-treeview实现多级树形菜单 后台JSON格式如何组织?
2019/07/26 Javascript
vue iview的菜单组件Mune 点击不高亮的解决方案
2019/11/01 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
[54:17]DOTA2-DPC中国联赛定级赛 RNG vs iG BO3第二场 1月10日
2021/03/11 DOTA
Python实现将HTML转换成doc格式文件的方法示例
2017/11/20 Python
Python绘制3d螺旋曲线图实例代码
2017/12/20 Python
使用python读取txt文件的内容,并删除重复的行数方法
2018/04/18 Python
python爬取个性签名的方法
2018/06/17 Python
Sanic框架路由用法实例分析
2018/07/16 Python
详解Django中间件的5种自定义方法
2018/07/26 Python
基于python生成器封装的协程类
2019/03/20 Python
在TensorFlow中实现矩阵维度扩展
2020/05/22 Python
Python创建简单的神经网络实例讲解
2021/01/04 Python
html5教你做炫酷的碎片式图片切换 (canvas)
2017/07/28 HTML / CSS
华为慧通面试题
2012/09/11 面试题
化工专业推荐信范文
2013/11/28 职场文书
中班教师个人总结
2015/02/05 职场文书
幼儿园园务工作总结2015
2015/05/18 职场文书
运动会加油稿
2015/07/22 职场文书
给学校的建议书400字
2015/09/14 职场文书
英语导游欢迎词
2015/09/30 职场文书
Python一行代码实现自动发邮件功能
2021/05/30 Python
anaconda python3.8安装后降级
2021/06/11 Python
如何正确理解python装饰器
2021/06/15 Python