倒计时（开始、暂停、重置）

最新推荐文章于 2024-07-14 03:33:38 发布
最新推荐文章于 2024-07-14 03:33:38 发布
阅读量1.7k 收藏 7
点赞数
文章标签： webview html css js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/xx661660/article/details/122190904
版权

<!DOCTYPE html>

<html>

<head lang="en">

  <meta charset="UTF-8" />

  <title>倒计时工具</title>

  <style>

    body {

      background-image: url("img/background.jpg");

      margin-top: 20px;

      color: #f0f0f0;

      font-family: 微软雅黑;

    }

    .top {

      border: solid 1px #ff3300;

      border-radius: 10px;

      width: 900px;

      height: 150px;

      margin: 0 auto;

      padding-top: 20px;

    }

    .top .logo {

      float: left;

      width: 300px;

      text-align: center;

    }

    .top .text {

      float: left;

      width: 580px;

      text-align: center;

      font-size: 28px;

    }

    .main {

      border: solid 1px #f0f0f0;

      border-radius: 10px;

      width: 900px;

      height: 390px;

      margin: 0 auto;

      padding-top: 20px;

    }

    #total {

      width: 150px;

      height: 45px;

      border: solid 1px #f0f0f0;

      border-radius: 8px;

      font-size: 32px;

      text-align: center;

    }

    .timer-box {

      border: solid 0px #f30;

      width: 620px;

      margin: 0 auto;

      height: 170px;

      text-align: center;

      margin-top: 20px;

    }

    .main .count-box {

      width: 550px;

      margin: 0 auto;

      height: 70px;

      text-align: center;

      padding-top: 10px;

    }

    .main .count {

      float: left;

      width: 200px;

      line-height: 60px;

      padding-top: 10px;

    }

    .main .unit {

      float: left;

      width: 120px;

      font-size: 30px;

      line-height: 70px;

    }

    .timer-box .dash {

      width: 80px;

      font-size: 100px;

      float: left;

      text-align: center;

      font-weight: bold;

    }

    .timer-box .timer {

      width: 150px;

      font-size: 120px;

      float: left;

      text-align: center;

    }

    .button-box {

      border: solid 0px #f30;

      width: 550px;

      margin: 0 auto;

      height: 150px;

      text-align: center;

    }

    .icon {

      float: left;

      width: 100px;

    }

    .icon img:hover {

      opacity: 0.7;

      cursor: pointer;

    }

    .bottom {

      border: solid 1px #f0f0f0;

      border-radius: 10px;

      width: 900px;

      height: 55px;

      margin: 0 auto;

      padding-top: 10px;

      text-align: center;

      font-size: 20px;

    }

  </style>

</head>

<body>

  <div class="top">

    <div class="logo">

      <img src="img/logo.jpg" style="width: 130px" />

    </div>

    <div class="text">

      蜗牛学院-学员活动专用倒计时工具

      <br />

      祝各位参赛选手取得优秀成绩！

    </div>

  </div>

  <br />

  <div class="main">

    <div class="count-box">

      <div class="icon">

        <img src="img/minus.png" width="70" οnclick="minus();" />

      </div>

      <div class="count">

        <input type="text" id="total" value="10" />

      </div>

      <div class="unit">分钟</div>

      <div class="icon" style="float: left; width: 100px">

        <img src="img/plus.png" width="70" οnclick="add()" />

      </div>

    </div>

    <div class="timer-box">

      <div class="timer" id="hour">00</div>

      <div class="dash">-</div>

      <div class="timer" id="minute">00</div>

      <div class="dash">-</div>

      <div class="timer" id="second">00</div>

    </div>

    <div class="button-box">

      <div class="icon" style="float: left; width: 200px; padding-top: 20px;text-align:center;">

        <img src="img/pause.png" width="60" οnclick="pause();" />

      </div>

      <div class="icon" style="float: left; width: 100px;text-align:center;">

        <img src="img/start.png" width="90" οnclick="start();" />

      </div>

      <div class="icon" style="float: left; width: 200px; padding-top: 20px;text-align:center;">

        <img src="img/refresh.png" width="60" οnclick="reset()" />

      </div>

    </div>

  </div>

  <br />

  <div class="bottom">

    技术支持：成都蜗牛创想科技有限公司（蜗牛学院），

    <span style="font-size: 28px">http://www.woniuxy.com</span>

  </div>

  <audio src="闹钟.wav" id="music"></audio>

  <script>

    /*

    实现倒计时：

    */

    function add() {

      var input = document.querySelector("#total");

      input.value++;

    }

    function minus() {

      var input = document.querySelector("#total");

      if (input.value > 0) {

        input.value--;

      }

    }


 

    var timer;//保存定时器标识符

    var totalSecond = 0; //保存剩余总秒数

    function start() {//-----------------------开始

      if (totalSecond <= 0) {

        //倒计时重新开始

        var input = document.querySelector("#total");//获取input

        totalSecond = input.value * 60;//获取总秒数

        console.log("aaa");

      }

      interval();//调用定时器函数

    }

    function pause() {//-----------------------暂停

      clearInterval(timer);//停止间隔定时器

      timer = undefined;

    }

    function reset(){//-----------------------重置

      // 方式一：

      // 定时器关闭

      pause();

      // 页面中的信息清零

      document.querySelector("#hour").innerText="00";

      document.querySelector("#minute").innerText="00";

      document.querySelector("#second").innerText="00";

      // 将总秒数清零

      totalSecond = 0;

      // 方式二：刷新页面

      // location.reload();

    }

    // 定时器

    function interval() {

      if (timer == undefined) {

        timer = setInterval(function () {

          // 控制倒计时不能为负

          if(totalSecond>0){

            totalSecond--;

          }else{

            pause();

            document.querySelector("#music").play()

          }

         

          console.log(totalSecond);

          // 根据剩余的秒数来计算剩余的小时数、分钟数、秒数  

          // 小时数

          var hour = parseInt(totalSecond / 60 / 60);

          // 不足一小时的分钟数

          var minute = parseInt(totalSecond / 60 % 60);

          // 不足一分钟的秒数

          var second = totalSecond % 60;

          console.log(hour, minute, second);

          document.querySelector("#hour").innerText = hour;

          document.querySelector("#minute").innerText = minute;

          document.querySelector("#second").innerText = second

        }, 1000)

      }

    }

  </script>

</body>

</html>

前端小萝莉
关注
  • 0
    点赞
  • 踩
  • 7
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何使用html实现在线秒表,使用JavaScript实现网页秒表功能（含开始、暂停、继续、重置功能）...
weixin_42514521的博客
05-30 936
效果图展示，感觉不错可以参考实例代码。具体代码如下所示：Document00:00:00:00开始暂停继续重置//定义一个变量，根据定时器每秒执行一次，每次执行++自增操作，变量存储的数值，就会每秒+1。现在需要的记录效果是每0.01秒，也就是10毫秒执行一次。根据累计的数值执行进位。如果毫秒达到100就是1秒，如果秒达到60就是1分钟，如果分钟达到60就是1小时var ms = 0; // 毫秒...
html可暂停倒计时代码,js实现倒计时器自定义时间和暂停
weixin_39588252的博客
06-07 1227
js倒计时器可自定义时间和暂停，效果如下，点击start 开始计时，end结束计时分别复制 H5 css js 代码即可实现，具体的算法在js控制函数中(都写了注释)csshtml,body{width:100%;height:100%;}.content{height:100%;width:100%;}.row-center{display:flex;flex-direction:row;jus...
页面后台暂停倒计时
海天鹰
02-03 533
页面后台暂停倒计时
jquery倒计时重置
最新发布
weixin_41215592的博客
07-14 30
jQuery倒计时重置 在网页开发中，倒计时功能是一个常见的需求，比如用于限时抢购、活动倒计时等场景。而在实际应用中，我们可能会遇到需要重置倒计时的情况，这时候就需要使用jQuery来实现倒计时的重置功能。 倒计时原理 倒计时的实现原理是通过JavaScript不断更新显示倒计时的元素的内容，来达到倒计时的效果。当需要重置...
网页活大屏展示的倒计时器，可设置倒计时时间、暂停、继续、重置、带音效
05-12
1、可展示在网页和大屏。 2、可设置倒计时时间、暂停、继续、重置、带音效
html计时器重置,Javascript重置倒计时
weixin_32133403的博客
05-31 528
你好我有一个javascript倒计时的问题,我写了一个脚本,并没有坏.我需要在几分钟之后通过ajax(json)重新加载倒计时但是在加载新数据脚本后无法正常工作.在获得新的计时时间后倾倒或不显示！帮我请求谢谢 ：)var d = today();function today(){now = new Date().getTime();return Math.round(now/1000);}fun...
countdownTimer:countdownTimer 倒计时插件 可以自定义开始 暂停 重置操作
05-22
- `reset()`：重置倒计时回初始状态。 ### 四、自定义扩展 `countdownTimer`的灵活性在于它的可定制性。你可以根据项目需求调整样式，或者添加新的功能。例如，你可以： 1. **自定义格式化**：通过修改插件内部...
多个计时器 可以单个暂停 开始 重置
11-10
本文将详细探讨多个计时器的实现、功能以及如何进行单个暂停、开始和重置操作。 首先，让我们理解什么是计时器。计时器是一个能够跟踪时间流逝的组件，它可以用于执行特定任务、测量代码执行时间或实现定时触发的...
安卓天气日历时间选择倒计时相关-TimerHandler实现倒计时实现了暂停重置开始功能非常基础！需要的同学可以根据需求扩展.rar
07-29
- **重置倒计时**：创建新的`CountdownTask`实例并重新启动倒计时。 - **开始倒计时**：如果已暂停，再次调用`schedule()`方法即可。 这个基础实现提供了倒计时器的基本框架，你可以根据自己的需求进行扩展，比如...
Unity实现倒计时功能
08-19
Unity实现倒计时功能 Unity 是一个功能强大的游戏引擎，提供了许多实用的功能来帮助开发者快速构建游戏。其中，倒计时功能是游戏中非常常见的一种功能，例如倒计时游戏、限时挑战、游戏 loading 等等。那么，如何在...
做一个九宫格诗词答题小程序 （二）倒计时功能实现
gaoshanpingyuan的博客
02-06 950
为了增加答题的趣味，设置了答题时间。采用倒计时，时间设置为9秒。时间一到0，结束答题。点击核对答案原文按钮可以判别答案是否正确，并显示判别结果、正确答案和原文。如回答正确，答对题数增加1个。 为了适用不同的情况，写了两个关于倒计时函数，一个是倒计时开始函数，另一个是倒计时停止函数。两个函数便于不同位置调用。 打开答题页面，调用倒计时开始函数，从9s开始倒计时，计时时间一到0，计时终止，九宫格中的字（按钮）禁用。页面显示时间为零，不能继续答题。 如果答题完成，计时未到，点击核对答案原文按钮，调用
html5倒计时停止,IOS微信后台运行时候倒计时暂停问题
weixin_30827435的博客
06-26 350
链接：https://pan.baidu.com/s/1i7cSkqL 密码：g80i最近给央视做了个H5答题游戏，但在倒计时上遇到一个终端问题：手机端按Home键将微信收入后台之后，IOS11 会继续跑JS五秒钟，注意是5秒，也就是倒计时9的时候收到后台，等1分钟再打开，JS会从4开始倒计时。 听说IOS6的时候能跑10分钟，IOS7有3分钟，IOS11只有5秒....但TM就是个BUG，得改啊...
自定义可以暂停的倒计时
EleganceKing的博客
10-28 359
前言 原生的倒计时功能比较简单，没有暂停和重新开始计时功能，所以仿照原生的CountDownTimer做一个更好用的倒计时功能。 自定义类 public class LCountDownTimer { /** * 时间，即开始的时间，通俗来说就是倒计时总时间 */ private long mMillisInFuture; /** * 布尔值，表示计时器是否被取消 * 只有调用cancel时才被设置为true */ priv
简单的倒计时 开始/暂停/重置/进度条
weixin_41580949的博客
07-08 764
一个简单的倒计时页面,展示如下.可以直接下载使用 下载地址: https://download.csdn.net/download/weixin_41580949/12588196 源码如下: 可以复制到txt文本后改后缀名为html即可 <html> <head> <meta charset="UTF-8"> <title>倒计时</title> </head> <bo
JavaScrpit+Html实现日期时间启动、停止操作(应用场景:计时器、秒表)
zhx__的博客
02-12 1298
JavaScrpit+Html实现日期时间启动、停止操作(应用场景:计时器、秒表) 文章目录JavaScrpit+Html实现日期时间启动、停止操作(应用场景:计时器、秒表)前言一、什么是JavaScrpit？二、什么是Css？三、什么是Html？四、JavaScrpit前端代码实现1.创建一个文本然后打开2.效果实现总结 前言 对于时间的操作。 提示：以下是本篇文章正文内容，下面案例可供参考 一、什么是JavaScrpit？ JavaScript（简称“JS”） 是一种具有函数优先的轻量级，解释型
web-简易计时器
m0_58813405的博客
01-02 1920
实验
原生js实现自定义倒计时（包含暂停、继续）
youzigrowing的博客
10-09 2490
最近在学习js,想用js做一些简单的小案例，说干就干！ 这一篇就是用js实现自定义倒计时。用到的html和css不多，所以界面很简单，主要看功能。 主要用到js的timing,就是setInterval(),clearInterval()，也涉及读取用户输入的数据等。 界面图： 首先是html：` JavaScript 语言之倒计时工具训练 JavaScript实例--倒计时 时 分
html倒计时自动关闭,JavaScript实现页面无操作倒计时退出
weixin_39843698的博客
06-01 758
项目前端页面需要实现，页面没人操作进入倒计时，以下为前端代码实现。//设置(倒计时功能)开关var _mouseActiveListener_flag = true;beforecount：触发倒计时间隔(单位：毫秒)count：倒计时总数(单位：秒)var mouseActiveListener = function (beforecount, count, callback) {//confi...
浏览器网页小工具----计时器
一学就会小小王的博客
09-20 2257
一个小小的计时器，按秒计时，点击开始开始计时，点击停止，则停止计时，点击复位，则重置计时器并停止计时。
winform 如何设置form2 中的倒计时 开始、停止、重置
06-09
要在WinForm中的Form2中实现倒计时功能，可以使用Timer组件来实现。以下是实现倒计时功能的代码： ``` public partial class Form2 : Form { private int countDownSeconds = 0; // 倒计时总秒数 private int remainingSeconds = 0; // 倒计时剩余秒数 private bool isCountingDown = false; // 是否正在倒计时 public Form2() { InitializeComponent(); } private void Form2_Load(object sender, EventArgs e) { // 初始化倒计时总秒数 countDownSeconds = 60; remainingSeconds = countDownSeconds; // 显示倒计时总秒数 lblCountDown.Text = countDownSeconds.ToString(); } private void btnStart_Click(object sender, EventArgs e) { if (!isCountingDown) { // 启动计时器 timer1.Start(); isCountingDown = true; } } private void btnStop_Click(object sender, EventArgs e) { if (isCountingDown) { // 停止计时器 timer1.Stop(); isCountingDown = false; // 更新倒计时剩余秒数 remainingSeconds = countDownSeconds - (int)timer1.Tag; // 显示倒计时剩余秒数 lblCountDown.Text = remainingSeconds.ToString(); } } private void btnReset_Click(object sender, EventArgs e) { // 重置倒计时 timer1.Stop(); isCountingDown = false; remainingSeconds = countDownSeconds; lblCountDown.Text = countDownSeconds.ToString(); } private void timer1_Tick(object sender, EventArgs e) { // 更新倒计时剩余秒数 remainingSeconds--; // 显示倒计时剩余秒数 lblCountDown.Text = remainingSeconds.ToString(); // 判断是否倒计时结束 if (remainingSeconds == 0) { // 停止计时器 timer1.Stop(); isCountingDown = false; MessageBox.Show("倒计时结束！"); } // 记录倒计时经过的秒数（用于暂停后继续倒计时） timer1.Tag = countDownSeconds - remainingSeconds; } } ``` 以上代码实现了倒计时的开始、停止、重置功能。在Form2中添加一个Timer组件，并设置Interval属性为1000（即1秒），然后将Timer组件的Tick事件绑定到timer1_Tick方法中即可。 在timer1_Tick方法中，每秒更新倒计时剩余秒数，并判断是否倒计时结束。在btnStart_Click方法中启动计时器，并在btnStop_Click方法中停止计时器并记录倒计时经过的秒数，在btnReset_Click方法中重置倒计时。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值