秒针计时器 html,js实现秒表计时器

本文实例为大家分享了js实现秒表计时器的具体代码，供大家参考，具体内容如下

秒表计时器的实现：

效果图如下：

附代码，已调试运行

Document

#div1 {

width: 300px;

height: 400px;

background: skyblue;

margin: 100px auto;

text-align: center;

}

#count {

width: 200px;

height: 150px;

line-height: 150px;

margin: auto;

font-size: 40px;

}

#div1 input {

width: 150px;

height: 40px;

background: orange;

font-size: 25px;

margin-top: 20px

}

//可以将查找标签节点的操作进行简化 var btn = getElementById('btn')

function $(id) {

return document.getElementById(id)

}

window.onload = function() {

//点击开始建开始计数

var count = 0

var timer = null //timer变量记录定时器setInterval的返回值

$("start").onclick = function() {

timer = setInterval(function() {

count++;

console.log(count)

// 需要改变页面上时分秒的值

console.log($("id_S"))

$("id_S").innerHTML = showNum(count % 60)

$("id_M").innerHTML = showNum(parseInt(count / 60) % 60)

$("id_H").innerHTML = showNum(parseInt(count / 60 / 60))

}, 1000)

}

$("pause").onclick = function() {

//取消定时器

clearInterval(timer)

}

//停止记数数据清零页面展示数据清零

$("stop").onclick = function() {

//取消定时器

$("pause").onclick()

// clearInterval(timer)

//数据清零总秒数清零

count = 0

//页面展示数据清零

$("id_S").innerHTML = "00"

$("id_M").innerHTML = "00"

$("id_H").innerHTML = "00"

}

//封装一个处理单位数字的函数

function showNum(num) {

if (num < 10) {

return '0' + num

}

return num

}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。

秒针计时器 html,js实现秒表计时器相关推荐

js制作秒表计时器代码怎么写
js制作秒表计时器教程,js制作秒表计时器代码怎么写教程如下: js实现代码: var t=[0, 0, 0, 0, 0, 0, 0, 1]; var firstsplitflag = 0; var ...
Html秒表计时代码,js实现秒表计时器功能代码示例
本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下计时器 var hour,minute,second;//时分秒 hour=minute=second=0;// ...
php考试系统计时器插件,js考试时间计时器倒计时代码
请大家注意,下面代码的功能,实现的是考试倒及时效果.倒计时的提示文字,显示在一个名为TestTime的Div里面. 在使用的时候,并非是页面载入就自动进入倒计时,而是需要触发StartTimerObj ...
秒针计时器 html,JS实现一个秒表计时器
本文实例为大家分享了JS实现秒表计时器的具体代码,供大家参考,具体内容如下秒表计时器的实现: 效果图如下: 附代码,已调试运行 Document #div1 { width: 300px; heig ...
php秒表计时器,JS实现可暂停秒表计时器的效果（图文详解）
JavaScript是前端开发中必不可少的一部分,很多效果的实现离不开JS,正在学习JavaScript的小伙伴,你会用JS制作秒表计时器吗?这篇文章就和大家如何用JS实现秒表计时器的效果,并且点击按 ...
html计时器可暂停,JS实现可暂停秒表计时器的效果（图文详解）
JavaScript是前端开发中必不可少的一部分,很多效果的实现离不开JS,正在学习JavaScript的小伙伴,你会用JS制作秒表计时器吗?这篇文章就和大家如何用JS实现秒表计时器的效果,并且点击按 ...
单片机秒表c语言,单片机制作秒表计时器(c语言)
利用计数器中断,外部中断(按钮)编写的机遇c语言的秒表计时器利用单片机制作秒表计时器 (c语言) #include//包含单片机对应的头文件 int MM=0,SS=0,MS=0; int time ...
[js] 请使用js实现一个秒表计时器的程序
[js] 请使用js实现一个秒表计时器的程序 <!DOCTYPE html> <html lang="en"><head><meta ch ...
html暂停计时器,JS实现可暂停秒表计时器效果的方法
JS实现可暂停秒表计时器效果的方法发布时间:2020-10-22 14:35:00 来源:亿速云阅读:122 作者:小新这篇文章给大家分享的是有关JS实现可暂停秒表计时器效果的方法的内容.小编觉 ...

秒针计时器 html,js实现秒表计时器

秒针计时器 html,js实现秒表计时器相关推荐

最新文章

热门文章