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

2025-08-18 22:34:16

计时器效果：

<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;";
}

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!

vue.js实现简单计时器功能

本文实例为大家分享了vue.js实现简单计时器功能的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <title>抬腿计数器</title> <script src="/static/vue/vue.js"></script> <script src="/static/vue/index.js&quo
javascript实现一款好看的秒表计时器

本文实例为大家分享了javascript实现秒表计时的具体代码,供大家参考,具体内容如下实现图片: 分+秒+跑秒时+分+秒+跑秒需求分析: 1.显示整个秒表页面: 2.在点击"开始"按钮之后,开始计时,并将按钮转为"暂停"按钮,在点击"暂停"按钮之后,将按钮转为"开始"按钮,并停止计时: 3.在点击"复位"按钮之后,将显示的计时清零,并将按钮变回"开始"按钮. 页面结构: <
JavaScript实现简单计时器

本文实例为大家分享了JavaScript实现简单计时器的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <style> .bigDiv { margin: 50px auto; width: 200px; height: 200px;
JS使用setInterval计时器实现挑战10秒

JS实现挑战10秒,主要用到setInterval计时器,供大家参考,具体内容如下效果图 ## 完整代码 <html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <p style="font-size: 2em;color: blue;font-style:
js实现内置计时器

计时器对于图片轮播和倒计时之类的与时间相关的项目有着很大的联系,它是实现这些的核心语法,如何一次深刻理解js计时器?往下看你就知道,有惊喜哦! js计时器有两种,一种为延时后单次的执行,另一种为延时多次执行.通过函数的递归,前者也可以打破壁垒,拥有循环执行的功能. setTimeout( javascript语句 , 毫秒); (其中第一个值可以是一个函数需要加" ",也可以是代码) //延迟一段时间执行执行一次 setInterval("javascript语
JS实现一个秒表计时器

本文实例为大家分享了JS实现秒表计时器的具体代码,供大家参考,具体内容如下秒表计时器的实现: 效果图如下: 附代码,已调试运行 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=
JavaScript setInterval()与setTimeout()计时器

JavaScript是单线程语言,但是它可以通过设置超时值和间歇时间值来指定代码在特定的时刻执行.超时值是指在指定时间之后执行代码,间歇时间值是指每隔指定的时间就执行一次代码. 超时调用超时调用使用window对象的setTimeout()方法,它接受两个参数:要执行的代码和以毫秒表示的时间(代码执行前的等待时间).其中,第一个参数可以是一个字符串(和eval()中使用的字符串一样),也可以是一个函数. 第二个参数是一个表示等待多长时间的毫秒数,但是在该时间过去后代码并不一定执行.JavaSc
详解JavaScript的计时器和按钮效果设置

计时器效果: <div> <font id='timeCount' style='display:inline-block; font-size:72px;width:100px;text-align:right;'>0</font> //需要固定时间值的宽度,避免时间值从9变到10(以及从99变到100)时后面三张图片的位置发生变化 //但是font是行内元素,无法设置宽度,所以把font变为行内块元素display:inline-block <img
详解JavaScript 异步编程

异步的概念异步(Asynchronous, async)是与同步(Synchronous, sync)相对的概念. 在我们学习的传统单线程编程中,程序的运行是同步的(同步不意味着所有步骤同时运行,而是指步骤在一个控制流序列中按顺序执行).而异步的概念则是不保证同步的概念,也就是说,一个异步过程的执行将不再与原有的序列有顺序关系. 简单来理解就是:同步按你的代码顺序执行,异步不按照代码顺序执行,异步的执行效果更高: 以上是关于异步的概念的解释,接下来我们通俗地解释一下异步:异步就是从主线程发射一
一文详解JavaScript闭包典型应用

目录 1.应用 1.1 模拟私有变量 1.2 柯里化 1.3 偏函数 1.4 防抖 1.5 节流 2.性能问题 2.1 内存泄漏 2.2 常见的内存泄漏 3.闭包与循环体 3.1 这段代码输出啥 3.2 改造方法 4.总结 1.应用以下这几个方面是我们开发中最为常用到的,同时也是面试中回答比较稳的几个方面. 1.1 模拟私有变量我们都知道JS是基于对象的语言,JS强调的是对象,而非类的概念,在ES6中,可以通过class关键字模拟类,生成对象实例. 通过class模拟出来的类,仍然无法实现传
详解Javascript中prototype属性(推荐)

在典型的面向对象的语言中,如java,都存在类(class)的概念,类就是对象的模板,对象就是类的实例.但是在Javascript语言体系中,是不存在类(Class)的概念的,javascript中不是基于'类的',而是通过构造函数(constructor)和原型链(prototype chains)实现的.但是在ES6中提供了更接近传统语言的写法,引入了Class(类)这个概念,作为对象的模板.通过class关键字,可以定义类.基本上,ES6的class可以看作只是一个语法糖,它的绝大部分功能
详解Javascript中new()到底做了些什么？

前言和其他高级语言一样 javascript 中也有 new 运算符,我们知道 new 运算符是用来实例化一个类,从而在内存中分配一个实例对象. 但在 javascript 中,万物皆对象,为什么还要通过 new 来产生对象? 本文将带你一起来探索 javascript 中 new 的奥秘... 要创建 Person 的新实例,必须使用 new 操作符. 以这种方式调用构造函数实际上会经历以下 4个步骤: (1) 创建一个新对象: (2) 将构造函数的作用域赋给新对象(因此 this 就指向了
详解微信小程序胶囊按钮返回|首页自定义导航栏功能

项目代码:https://github.com/Shay0921/header-navbar.git 在小程序中,从转发出来的小程序消息卡片进入,因为页面栈中只有一个,所以不会出现返回按钮,对于一些电商平台来说,当商品被转发后会很影响客户查看其它产品和首页,这时候就需要使用自定义导航栏自己写一个"胶囊按钮".如下图所示: 从别的页面点到商品页时会有返回和首页按钮: 当从分享页进入到商品页时,因为页面栈只有一个,所以只有首页按钮: 首先我们需要如何开启自定义导航栏,查看手册后会发现一个页
详解JavaScript匿名函数和闭包

概述在JavaScript前端开发中,函数与对其状态即词法环境(lexical environment)的引用共同构成闭包(closure).也就是说,闭包可以让你从内部函数访问外部函数作用域.在JavaScript,函数在每次创建时生成闭包.匿名函数和闭包可以放在一起学习,可以加深理解.本文主要通过一些简单的小例子,简述匿名函数和闭包的常见用法,仅供学习分享使用,如有不足之处,还请指正. 普通函数普通函数由fucntion关键字,函数名,() 和一对{} 组成,如下所示: function
详解javascript void(0)

void关键字介绍首先,void关键字是javascript当中非常重要的关键字,该操作符指定要计算或运行一个表达式,但是不返回值. 语法格式: void func() void(func()) 实例1 当点击超级链接时,什么都不发生  <a href="javascript:void(0);" rel="external nofollow" rel="
详解JavaScript 高阶函数

高阶函数简介高阶函数的英文名叫 Higher-Order Function ,是函数式编程中的一种.他的表现形式往往是通过把函数作为参数传入另一个函数,或者将函数作为另一个函数的返回值返回.在实际开发业务中, 高阶函数往往可以抽象我们的代码 ,将我们的命令式编程转换为复用性更高级的函数式编程,从而提升我们的代码质量 . 下面拿3个面试中常问的高阶函数举例子,希望看完以后能够提升大家对JS的理解,提高我们的代码质量. chat is cheap,show you my code~ Arr
详解JavaScript 事件流

事件 HTML中与javascript交互是通过事件驱动来实现的,例如鼠标点击事件.页面的滚动事件onscroll等等,可以向文档或者文档中的元素添加事件侦听器来预订事件.想要知道这些事件是在什么时候进行调用的,就需要了解一下"事件流"的概念. 事件流事件流描述的就是从页面中接收事件的顺序.而早期的IE和Netscape提出了完全相反的事件流概念,IE事件流是事件冒泡,而Netscape的事件流就是事件捕获. 事件流类别事件冒泡即从下至上,从目标触发的元素逐级向上传播,直到win

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

总结

相关推荐

随机推荐