js 可以记录的秒表，图片秒表的制作

于 2021-11-02 15:53:04 发布
阅读量2.3k 收藏 1
点赞数
分类专栏： js 前端 文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_56211720/article/details/121101796
版权
前端 同时被 2 个专栏收录
4 篇文章 0 订阅
订阅专栏
js
2 篇文章 0 订阅
订阅专栏

  今天做了一个可以记录的秒表，大家可以一起来看看。

我的这个有一部分的用带有0到9的图片替换了数字0到9，有兴趣的小伙伴可以到网上找相关的图片，0到9命名方法是 0到9.jpg 。

 

6.html

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

    <script src="6.js"></script>

    <link rel="stylesheet" type="text/css" href="6.css">

    <body>

    <div style="display: flex; flex-direction: row;"> 

        <h1 id="s">00</h1>

        <h1>:</h1>

        <h1 id="f">00</h1>

        <h1>:</h1>

        <h1 id="m">00</h1>

    </div>

        <div class="a">

            <img id="4" src="image/0.png"/>

            <img id="5" src="image/0.png"/>

            <h2>:</h2>

            <img id="2" src="image/0.png"/>

            <img id="3" src="image/0.png"/>

            <h2>:</h2>

        

            <img id="0" src="image/0.png"/>

            <img id="1" src="image/0.png"/>

        </div>

        <button οnclick="a()">暂停秒表</button>

        <button οnclick="qq()">开始秒表</button>

        <button οnclick="cz()">重置</button>

        <button οnclick="lj()">记录</button>

        <h1 id="20" class="da"> 

        </h1>

    </body>

</html>

6.js

var ay=[];

var t="";

function qq(){

var s=0;

var f=0;

var m=0;

// 开始

timer = setInterval(function () {

   s++;

   if(s==60){

       f++;

       s=0;

   }

   if(f==60){

       f=0;

       m++;

   }

   var st=s < 10 ? '0'+s : s+'';

   var ft=f < 10 ? '0'+f : f+'';

   var mt=m < 10 ? '0'+m : m+'';

   document.getElementById("m").innerHTML=s < 10 ? '0'+s : s+'';

   document.getElementById("f").innerHTML=f < 10 ? '0'+f : f+'';

   document.getElementById("s").innerHTML=m < 10 ? '0'+m : m+'';

   document.getElementById("0").src="image/"+st.substr(0,1)+''+".png";

   document.getElementById("1").src="image/"+st.substr(1,1)+''+".png";

   document.getElementById("2").src="image/"+ft.substr(0,1)+''+".png";

   document.getElementById("3").src="image/"+ft.substr(1,1)+''+".png";

   document.getElementById("4").src="image/"+mt.substr(0,1)+''+".png";

   document.getElementById("5").src="image/"+mt.substr(1,1)+''+".png";

}, 1000);}

//停止

function a(){clearInterval(timer);}

//记录

function lj(){

   t="";

   var m2=document.getElementById("m").innerHTML;

   var f2=document.getElementById("f").innerHTML;

   var s2=document.getElementById("s").innerHTML

   ay.push(m2+f2+s2);

   for(var i=0;i<ay.length;i++){

       t=t+"<h1>"+ay[i].substr(0,2)+"</h1>"+"<h1>:</h1>"+"<h1>"+ay[i].substr(2,2)+"</h1>"+"<h1>"+"<h1>:</h1>"+ay[i].substr(4,2)+"</h1>";

   }

   document.getElementById("20").innerHTML=t;

}

//重置

function cz(){

   clearInterval(timer)

   document.getElementById("0").src="image/0.png";

   document.getElementById("1").src="image/0.png";

   document.getElementById("2").src="image/0.png";

   document.getElementById("3").src="image/0.png";

   document.getElementById("4").src="image/0.png";

   document.getElementById("5").src="image/0.png";

   document.getElementById("m").innerHTML="00";

   document.getElementById("f").innerHTML="00";

   document.getElementById("s").innerHTML="00";

document.getElementById("20").innerHTML="";

s=0;

 f=0;

 m=0;   

}

6.css

.xiao{

    display: flex;

    flex-direction: row;

    margin-top: 0px; 

    background-color: red;

    }

.da{

         

    display: flex; flex-direction: row;

    }

.a{

    display: flex;

    flex-direction: row;

    }

这是文件里面的图片

 

 

一只肥瘫瘫
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js实现简单的秒表
10-15
主要为大家详细介绍了js实现简单的秒表，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现秒表
Hedia Pan的博客
08-25 467
<!DOCTYPE html> <html lang="zn"> <head> 　　<meta charset="UTF-8"> 　　<title>秒表</title> 　　<style> .contain{ width: 200px; height: 50px; background: #000; b.
js 秒表
02-29 593
var se,m=0,h=0,s=0,ss=1; function second(){ if((ss%100)==0){s+=1;ss=1;} if(s>0 && (s%60)==0){m+=1;s=0;} if(m>0 && (m%60)==0){h+=1;m=0;} t=h+"时"+m+"分"+s+"秒"+ss+"毫秒"; document.getElementById("sh
js做秒表
xiaowu_1997的博客
04-15 578
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>定时器</title> </head> <body> <input type="text" id="hours" value="00"/> <input ty...
JS秒表（代码实现）
qq_44024359的博客
09-19 1015
JS代码实现 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <head> <script> function timedText(){ var x=document.getEleme...
JavaScript实现秒表
最新发布
10-12
在本文中，我们将深入探讨如何使用JavaScript实现一个功能完备的秒表，包括开始、记录、暂停和重置等核心功能。 首先，我们需要创建一个HTML页面作为我们的秒表界面。`秒表.html`文件将会包含一个用于显示时间的...
javascript实现秒表计时器的制作方法
10-20
在JavaScript中，制作一个秒表计时器是常见的任务，通常用于游戏、测试或任何需要实时计时的场景。下面我们将详细讨论如何使用JavaScript实现秒表计时器，以及在给定的代码示例中涉及的关键知识点。 首先，秒表计时...
miaobiao.rar_制作秒表
09-24
在电子技术领域，我们可以利用单片机（Microcontroller）来实现秒表功能。本项目"miaobiao.rar_制作秒表"就是这样一个实例，它通过中断按键控制，实现了数码管显示的秒表功能。下面我们将详细探讨这个项目的知识点。...
单片机秒表设计小制作
08-11
在单片机秒表设计小制作中，我们可以学习到以下几个重要的知识点： 1. 单片机系统的设计：单片机系统是整个秒表设计的核心组件，它负责处理和控制整个系统的逻辑。单片机系统由微控制器、时钟电路、显示模块、键盘...
JS中秒表实现
qq_41039734的博客
06-10 415
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title></title> <script> setInterval(function () { time = new Date(); year = time.getFullY...
js实现秒表计时器
10-15
主要为大家详细介绍了js实现秒表计时器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
秒表JS
03-04
秒表JS
用JS制作一个简单的秒表
qq_44211323的博客
06-09 1133
时间与我们生活息息相关，在日常生活中人们总以时间作为参考点对一些事情进行评比，例如各种运动就是通过选手们完成时间的多少进行排名的。而这些时间的计算往往就是依靠比较精准的秒表。现在我就为大家介绍一下如何用JS代码编写一个简单的秒表。 页面代码很简单，通过两按钮和一个装时间的div组成，代码和页面就在这下面，可以参考一下。 在编写功能之前要先定义几个必须要使用到的变量，一共...
js秒表计时器
ninjya_luck的专栏
07-29 4417
var c=0 var t function timedCount() { var temptextmin=document.getElementById('txt'); hour = parseInt(c / 3600);// 小时数 min = parseInt(c / 60);// 分钟数 if(min>=60){ min=min%60 } la
用JS实现一个秒表功能
wang_swa99er的博客
08-20 708
用JS实现一个秒表功能 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <styl
JS简易秒表计时器
u012732371的专栏
04-11 528
原文超链接点击打开链接 html lang="en"> head> meta charset="UTF-8"> title>js计时器title> head> body> input type="text" value="00:00"> input type="button" value="开始"> input type="button" value="结束"> input type="butt
JS实现简易秒表
路漫漫其修远兮，吾将上下而求索
08-17 308
<!DOCTYPE html> <html> <head> <title>简易秒表</title> <style> body { text-align: center; } </style> </head> <body> <h1>JS实现简易秒表</h1> <h...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值