javascript实现一款好看的秒表计时器

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

实现图片:

分+秒+跑秒

时+分+秒+跑秒

需求分析:

1、显示整个秒表页面;

2、在点击“开始”按钮之后,开始计时,并将按钮转为“暂停”按钮,在点击“暂停”按钮之后,将按钮转为“开始”按钮,并停止计时;

3、在点击“复位”按钮之后,将显示的计时清零,并将按钮变回“开始”按钮。

页面结构:

<div id="miaoBiao">
 <div id="dingShi">
 <p>
  <!-- <span id="houer">00</span> : -->
  <span id="minute">00</span> :
  <span id="second">00</span>&ensp;
  <span id="msecond">00</span>
 </p>
 <!-- 显示:时:分:秒 跑秒 ,“时”解除注释可使用 -->
 <button id="btn1">开始</button>
 <button id="reset">复位</button>
 </div>
</div>

页面的主体结构主要包括四个span,包含四个秒表上显示的时间;以及两个按钮:“开始/暂停”与“复位”按钮。

一些函数:

id节点调用函数

function jieDian(id){
      return document.getElementById(id);
    }

通过调用此函数可以简化页面代码

开始运行函数

function startBtn(){
  timer1=setInterval(function(){
  i++
  jieDian("msecond").innerHTML =doubleLing(i%100);
  jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
  jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
  jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
  },10)
 }
 //开始运行函数

暂停函数

function pasueBtn(){
  clearInterval(timer1)
 }

赋0函数

function doubleLing(i){
  if(i<10){
  return "0"+i
  }else{
  return i
  }
 }
//赋0函数,当时分秒显示为个位数时,在前面加上“0”

完整代码,复制可用:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
 <style>
 #miaoBiao{
  width: 550px;height: 450px;background-color: #1d262d;overflow: hidden;
  margin: 50px auto;border-radius: 150px;
 }
 #dingShi{
  width: 400px;height: 230px;background-color:#d0eaeb;text-align: center;
  padding-top: 0px;margin: 110px auto;border-radius: 40px;
 }
 #dingShi p{
  font-size: 40px;padding-top: 40px;
 }
 #minute,#second,#houer{
  font-size: 56px;
 }
 #dingShi button{
  width: 80px;height: 35px;background-color: orange;margin: 10px auto;
  line-height: 35px;font-weight: bold;margin: 0px 20px;
 }
 </style>
</head>
<body>
 <div id="miaoBiao">
 <div id="dingShi">
 <p>
  <span id="houer">00</span> :
  <span id="minute">00</span> :
  <span id="second">00</span>&ensp;
  <span id="msecond">00</span>
 </p>
 <!-- 显示:时:分:秒 跑秒 ,“时”解除注释可使用 -->
 <button id="btn1">开始</button>
 <button id="reset">复位</button>
 </div>
 </div>

 <script>
 var i = 0;
 var timer1=null;
 var isRunning =false;
 //isRunning用于判断当前是否正在运行
 function jieDian(id){
  return document.getElementById(id);
 }
 //id节点调用函数

 function startBtn(){
  timer1=setInterval(function(){
  i++
  jieDian("msecond").innerHTML =doubleLing(i%100);
  jieDian("second").innerHTML =doubleLing(parseInt(i/100)%60) ;
  jieDian("minute").innerHTML =doubleLing(parseInt(i/6000)%60) ;
  jieDian("houer").innerHTML =doubleLing(parseInt(i/360000)) ;
  },10)
 }
 //开始运行函数

 function pasueBtn(){
  clearInterval(timer1)
 }
 //暂停函数

 jieDian("btn1").onclick = function(){
  if(!isRunning){
  jieDian("btn1").innerHTML = "暂停";
  isRunning = true;
  startBtn();
  }else{
  jieDian("btn1").innerHTML="开始";
  isRunning = false;
  pasueBtn();
  }
 }
 //“开始”与“暂停”点击按钮:
 //当按钮显示为“开始”,点击之后,将按钮转为“暂停”按钮,并触发相应条件;
 //当按钮显示为“暂停”,点击之后,将按钮转为“开始”按钮,并触发相应条件。

 jieDian("reset").onclick =function(){
  clearInterval(timer1)
  i = 0;
  isRunning = false;
  jieDian("btn1").innerHTML="开始";
  jieDian("msecond").innerHTML ="00";
  jieDian("second").innerHTML ="00";
  jieDian("minute").innerHTML ="00";
  jieDian("houer").innerHTML ="00";
 }
 //复位按钮,点击之后将秒表各值复位,并“暂停”秒表

 function doubleLing(i){
  if(i<10){
  return "0"+i
  }else{
  return i
  }
 }
 //赋0函数,当时分秒显示为个位数时,在前面加上“0”
 </script>
</body>
</html>

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

(0)

相关推荐

  • 原生js实现秒表计时器功能

    本文实例为大家分享了带有开始.暂停.清除功能的js计时器,供大家参考,具体内容如下 效果图: 下面贴代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时器</title> <script> var hour,minute,second;//时 分 秒 hour=minute=secon

  • js实现秒表计时器

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

  • javascript设计简单的秒表计时器

    本文实例讲述了javascript设计简单的秒表计时器的实现代码.分享给大家供大家参考.具体如下: 运行效果截图如下: 具体代码如下: <html> <head> <title> New Document </title> </head> <body> <form action="somepage.asp"> <input type="text" value="0&q

  • js实现计时器秒表功能

    本文实例为大家分享了js实现计时器秒表功能的具体代码,供大家参考,具体内容如下 HTML <input type="text" id="timetext" value="00:00:00" readonly> <button type="button" onclick="start()">开始</button> <button type="button&q

  • javascript 秒表计时器实现代码

    javascript 秒表计时器 实例代码: <html lang="en"> <head> <meta charset="UTF-8"> <title>js计时器</title> </head> <body> <input type="text" value="00:00"> <input type="button

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

    本文实例为大家分享了js秒表计时器的制作代码,供大家参考,具体内容如下 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="gb2312"> <title>Document</title> <style> div{margin-top:40px;margin-left:25px;margin-bottom:10px

  • javascript实现一款好看的秒表计时器

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

  • Android实现的秒表计时器示例

    本文实例讲述了Android实现的秒表计时器.分享给大家供大家参考,具体如下: package com.liu.time; import java.util.Timer; import java.util.TimerTask; import android.app.Activity; import android.app.AlertDialog; import android.content.Context; import android.content.DialogInterface; imp

  • 秒表计时器以及STOPWATCH(实例讲解)

    Stopwatch:秒表计时器,用来记录程序的运行时间,通常用来测试代码在时间上的执行效率.(需要引用:System.Diagnostics.) Stopwatch sw=new Stopwatch();//实例化一个对象. sw.Start():开启计时器. sw.Stop():关闭计时器. sw.Elapsed:[属性]获取计时器开始到结束之间的时长. 下面的代码就可以测出某段执行代码的运行时间: using UnityEngine; using System.Diagnostics; pu

  • JS实现一个秒表计时器

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

  • 基于JavaScript写一款EJS模板引擎

    目录 1. 起因 2. 基本语法实现 3. Function函数 4 with 5. ejs语句 6. 标签转义 1. 起因 部门最近的一次分享中,有人提出来要实现一个ejs模板引擎,突然发现之前似乎从来都没有考虑过这个问题,一直都是直接拿过来用的.那就动手实现一下吧.本文主要介绍ejs的简单使用,并非全部实现,其中涉及到options配置的部分直接省略了.如有不对请指出,最后欢迎点赞 + 收藏. 2. 基本语法实现 定义render函数,接收html字符串,和data参数. const ren

  • 基于JavaScript打造一款桌面级便签系统

    先看下效果: 载体就是一个网页,用html,css和JavaScript实现一个简单的便签系统. 动画效果用的是animation.css库,缓存用的localStorage. 除非手动清空便签,否则便签会一直保留,非常方便. 鼠标右键可以点开菜单. 代码: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset

随机推荐