原文链接：https://blog.csdn.net/qq_37936542/article/details/78912786

一：计时器功能

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="UTF-8">
  5. <title></title>
  6. <style>
  7. *{margin:0;padding:0;}
  8. #box{width:400px;height:400px;margin:40px auto;}
  9. #box div{width:200px;height:40px;border:1px #F3C solid;text-align:center;float:left;font-size:26px;}
  10. #box button{float:left;margin-top:10px;margin-left:20px;}
  11. #box span{float:left;width:200px;height:100px;overflow-y:auto;display:block;border:1px #C9C solid;margin-top:10px;}
  12. </style>
  13. </head>
  14. <body>
  15. <div id="box">
  16. <div id="timer"></div>
  17. <button onClick="btTime()">开始服务</button>
  18. <!--<button onClick="count()">count</button>-->
  19. </div>
  20. <script type="text/javascript">
  21. var timer=document.getElementById("timer");
  22. var butt=document.getElementsByTagName("button");
  23. var hour='00';  //时
  24. var minus='00';//分
  25. var seconds='00';//秒
  26. timer.innerHTML=hour+":"+minus+":"+seconds;
  27. var x=0,y=0,f=0,a=0,b=0,t1,t2;
  28. var flag=0;
  29. function  btTime(){
  30. /*ajax:*/
  31. switch (flag){
  32. case 0 :
  33. flag=1;
  34. w=1;
  35. t1=setInterval(beginS,1000);
  36. butt[0].innerHTML='结束服务';break;
  37. case 1 :
  38. flag=2;
  39. clearInterval(t1);
  40. butt[0].innerHTML='服务已结束';break;
  41. }
  42. }
  43. function beginS(){//计算秒
  44. x ++;
  45. if(x<10){
  46. seconds = '0' + x;
  47. }else if(x>=10&&x<=59){
  48. seconds = x;
  49. }else if(x>59){
  50. seconds = '00';
  51. x = 0;
  52. a++;
  53. }
  54. if(a<10){
  55. minus = '0' + a;
  56. }else if(a>=10&&a<=59){
  57. minus = a;
  58. }else if(a>59){
  59. minus = '00';
  60. a = 0;
  61. b++;
  62. }
  63. if(b<10){
  64. hour = '0' + b;
  65. }else if(b>=10&&b<=59){
  66. hour = b;
  67. }
  68. timer.innerHTML=hour+":"+minus+":"+seconds;
  69. }
  70. </script>
  71. </body>
  72. </html><strong>
  73. </strong>

二：弹框倒数计时消失功能

  1. <!DOCTYPE html >
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <meta name="viewport" content="width=device-width, initial-scale=0.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0" />
  6. <style>
  7. .container {
  8. width: 100%;
  9. overflow: hidden;
  10. }
  11. .photo_left {
  12. float: left;
  13. width: 40%;
  14. text-align: center;
  15. }
  16. .photo_left img {
  17. width: 5rem;
  18. height: 5rem;
  19. margin-top: 1.2rem;
  20. }
  21. .tips_right {
  22. float: left;
  23. width: 60%;
  24. }
  25. .tips_right p:first-child {
  26. color: #25812a;
  27. font-size: 1.5rem;
  28. }
  29. </style>
  30. <title>注册成功页面</title>
  31. </head>
  32. <body>
  33. <div class="container">
  34. <div class="photo_left">
  35. <img src="img/smile.png" />
  36. </div>
  37. <div class="tips_right">
  38. <p> 注册成功</p>
  39. <p>将在 <span id="mes">3</span> 秒钟后返回首页！</p>
  40. </div>
  41. </div>
  42. </body>
  43. <script language="javascript" type="text/javascript">
  44. var i = 3;
  45. var intervalid;
  46. intervalid = setInterval("fun()", 1000);
  47. function fun() {
  48. if(i == 0) {
  49. window.location.href = "index.html";
  50. clearInterval(intervalid);
  51. }
  52. document.getElementById("mes").innerHTML = i;
  53. i--;
  54. }
  55. </script>
  56. </html>

文末福利：

福利一：前端，Java，产品经理，微信小程序，Python等10G资源合集大放送：https://www.jianshu.com/p/e8197d4d9880

福利二：微信小程序入门与实战全套详细视频教程

【领取方法】

关注 【编程微刊】微信公众号：

回复【小程序demo】一键领取130个微信小程序源码demo资源。

回复【领取资源】一键领取前端，Java，产品经理，微信小程序，Python等资源合集10G资源大放送。



原文作者：祈澈姑娘
原文链接：https://www.jianshu.com/u/05f416aefbe1
创作不易，转载请告知

90后前端妹子，爱编程，爱运营，爱折腾。
坚持总结工作中遇到的技术问题，坚持记录工作中所所思所见，欢迎大家一起探讨交流。

js实现计时功能的更多相关文章

  1. JS实现注销功能

    JS实现注销功能,代码如下: <script> window.history.forward(1); </script> 这个代码的用法就是: 比如,我们此时有两个页面:Log ...

  2. Unity3D 游戏计时功能实现

    最近工作实在是太忙了,没办法认真写博客,但是还是要好好记录下日常的学习. 需求 各类游戏中都大量运用到计时功能,不管是直接显示的在前端UI,还是后台运行. 思路 Unity中提供了Time类可以方便的 ...

  3. JS全选功能代码优化

    原文:JS全选功能代码优化 JS全选功能代码优化 最近在看javascript MVC那本书,也感觉到自己写的代码也并不优雅,所以一直在想 用另一种模式来编写JS代码,所以针对之前的简单的JS全选功能 ...

  4. CI 结合 vue.js 的搜索功能模块

    CI 结合 vue.js 的搜索功能模块 最近在有优化公司后台的某个模块的搜索功能优化 原先的是这个样子的,很是单调: 老大给我找个图希望我能弄成这样子: 经过不断修改,最后成了这样子 是不是比以前好 ...

  5. 网站开发进阶(十二)JS实现打印功能(包括打印预览、打印设置等)

    JS实现打印功能(包括打印预览.打印设置等) 绪 最近在进行项目开发时,需要实现后台管理端打印功能,遂在网上一阵搜索,搜到了很多相关的文章.其中绝大部分文章都是使用的Lodop5.0(Web打印和套打 ...

  6. C/C++/Java 程序计时功能函数

    编写程序肯定要使用计时功能,来判断程序的执行时间.今天Google了一下,自己就梳理总结一下: (1)C/C++程序计时 C/C++中使用的计时函数是clock(). C语言中的头文件对应是#incl ...

  7. 【cocos2d-x制作别踩白块儿】第九期：游戏计时功能(附源代码)

    游戏没有计时,不是坑爹吗? 这一期,我们将来加入游戏计时功能. 1. 定义变量和函数 我们先在HelloWorldScene.h中定义几个变量和函数 long startTime; bool time ...

  8. js经常使用功能代码

    js经常使用功能代码(持续更新): 1---折叠与展开 <input id="btnDisplay" type="button" class=" ...

  9. unity3d 计时功能舒爽解决方案

    上次也写了一篇计时功能的博客 今天这篇文章和上次的文章实现思路不一样,结果一样 上篇文章地址:http://www.cnblogs.com/shenggege/p/4251123.html 思路决定一 ...

随机推荐

  1. 又一次认识java（一） ---- 万物皆对象

    假设你现实中没有对象.至少你在java世界里会有茫茫多的对象,听起来是不是非常激动呢? 对象,引用,类与现实世界 现实世界里有许很多多的生物,非生物,跑的跳的飞的,过去的如今的未来的,令人眼花缭乱.我 ...

  2. cx_Oracle

    cx_Oracle 安装 pip install cx_Oracle 只是我没用那个安装成功过.我找了rpm 包. http://nchc.dl.sourceforge.net/project/cx- ...

  3. python相关系数

    皮尔逊相关系数: 用于度量两个变量X和Y之间的相关(线性相关),其值介于-1与1之间. 几组的点集,以及各个点集中和之间的相关系数.我们可以发现相关系数反映的是变量之间的线性关系和相关性的方向(第一排 ...

  4. 每日技术总结：encodeURI,encodeURIComponent,toFixed

    1. encodeURI(URIstring) encodeURI()函数可把字符串作为URI进行编码 encodeURI("http://www.w3school.com.cn" ...

  5. Python编写Appium测试用例(2)

    #coding=utf-8import os,sysimport unittestfrom appium import webdriverimport timefrom selenium.webdri ...

  6. 基于cropper.js的图片上传和裁剪

    项目中要求图片上传并裁剪的功能,之前也有接触过很多图片裁剪插件,效果体验不是很好,今天推荐一款好用的插件-cropper,超级好用,裁剪功能丰富,满足了各种需求. 功能: 1:点击选择图片,弹出文件夹 ...

  7. 【例题 7-3 UVA - 10976】Fractions Again?!

    [链接] 我是链接,点我呀:) [题意] 在这里输入题意 [题解] x>=y => \(\frac{1}{x}<=\frac{1}{y}\) => \(\frac{1}{x}= ...

  8. COGS——C66. [HAOI2004模拟] 数列问题

    http://www.cogs.pro/cogs/problem/problem.php?pid=66 ★☆   输入文件:dfs3.in   输出文件:dfs3.out   简单对比 时间限制:1 ...

  9. HTML中select的option设置selected=&quot;selected&quot;无效的解决方式

    今天遇到了一个奇葩问题,写HTML时有个select控件.通过设置option的selected="selected"竟然无效,可是在其它浏览器是能够的.问了一下Google大神, ...

  10. js进阶 13-2 jquery动画滑动效果哪些注意事项

    js进阶 13-2 jquery动画滑动效果哪些注意事项 一.总结 一句话总结:滑动里面这里up是隐藏,down是显示. 1.jquery动画默认的两个切换效果是什么(swing默认和linear的区 ...