• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >JavaScript > javascript实现秒表计时器的制作方法

javascript实现秒表计时器的制作方法

作者:lusizhifei 字体:[增加 减小] 来源:互联网 时间:2017-05-11

lusizhifei通过本文主要向大家介绍了javascript秒表,javascript实现计时器,javascript实现倒计时,javascript倒计时代码,javascript倒计时等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com

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

具体代码:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="gb2312">
<title>Document</title>
<style>
div{margin-top:40px;margin-left:25px;margin-bottom:10px;width:20px;height:20px;}
input{width:30px;height:30px;margin-left:20px;font-size:20px;color:#fff;background: #000;border:none;outline: none;}
</style>
</head>
<body>
<div></div>
<input type="button" value="开始" />
<input type="button" value="停止" />
</body>
<script type="text/javascript">
//2.实现秒表功能,实现时 分 秒 毫秒 点击1开始计时,2结束计时;
var oDiv=document.getElementsByTagName('div')[0];
var Btn1=document.getElementsByTagName('input')[0];
var Btn2=document.getElementsByTagName('input')[1];
var ms=0;
var sec=0;
var min=0;
var hour=0;
Btn1.onclick=function(){
timer=setInterval(function(){
var str_hour=hour;
var str_min=min;
var str_sec=sec;
if(hour<10){
str_hour="0"+hour;
}
if(min<10){
str_min="0"+min;
}
if(sec<10){
str_sec="0"+sec;
}
var time=str_hour+':'+str_min+':'+str_sec+':'+ms;
oDiv.innerHTML=time;
ms=ms+50;
if(ms>999){
ms=0;
sec++;
}
if(sec>59){
sec=0;
min++;
}
if(min>59){
min=0;
hour++;
}


},50)
}
Btn2.onclick=function(){
clearInterval(timer);
}
</script>
</html>
</div>

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

</div>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • javascript实现秒表计时器的制作方法

相关文章

  • 2017-05-11Bootstrap中glyphicons-halflings-regular.woff字体报404错notfound的解决方法
  • 2017-05-11详解在Vue中通过自定义指令获取dom元素
  • 2017-05-11原生js获取浏览器窗口及元素宽高常用方法集合
  • 2017-05-11input获取焦点时底部菜单被顶上来问题的解决办法
  • 2017-05-11jQuery模拟淘宝购物车功能
  • 2017-05-11Angular实现跨域(搜索框的下拉列表)
  • 2017-05-11微信小程序教程系列之新建页面(4)
  • 2017-05-11微信小程序 设置启动页面的两种方法
  • 2017-05-11Bootstrap实现提示框和弹出框效果
  • 2017-05-11微信小程序-拍照或选择图片并上传文件

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • 三种方式实现瀑布流布局
    • js实现带三角符的手风琴效果
    • 原生js获取浏览器窗口及元素宽高常用方法集合
    • js事件冒泡与事件捕获详解
    • 简单实现jQuery级联菜单
    • 100行代码理解和分析vue2.0响应式架构
    • 非常实用的vue导航钩子
    • Angular多选、全选、批量选择操作实例代码
    • javascript监听页面刷新和页面关闭事件方法详解
    • JavaScript与JQUERY获取元素的宽、高和位置

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有