原文链接：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. BZOJ3510首都（LCT）

    Description 在X星球上有N个国家,每个国家占据着X星球的一座城市.由于国家之间是敌对关系,所以不同国家的两个城市是不会有公路相连的. X星球上战乱频发,如果A国打败了B国,那么B国将永远从 ...

  2. js进阶 14-9 ajax事件有哪些

    js进阶 14-9 ajax事件有哪些 一.总结 一句话总结:ajax开始时事件.发送时事件,请求完成时事件,请求成功时事件,请求结束时事件,请求错误时事件事件. 1.ajax事件的监听对象是谁? 都 ...

  3. Linux在应用层读写寄存器的方法

    可以通过操作/dev/mem设备文件,以及mmap函数,将寄存器的地址映射到用户空间,直接在应用层对寄存器进行操作,示例如下: #include <stdio.h> #include &l ...

  4. 我在世界最热创业孵化器YC学到的58件事

    Amir Elaguizy是网络扑克游戏平台MarketZero创始人,2011年,他创立的这家公司被Zynga收购,后在Zynga担任HTML5扑克游戏的CTO.目前他同时是社会化点评网站lark. ...

  5. Maven在dos窗口中的命令

    转自:https://www.cnblogs.com/zyjava/p/4310957.html 1.配置环境变量 MAVEN_HOME : D:\apache-maven-3.0.2 MAVEN : ...

  6. 2.JPA学习总结

    转自:https://shmilyaw-hotmail-com.iteye.com/blog/1969190 前言 最近在做一个项目的时候因为牵涉到要对数据库的操作,在最开始实现的时候采用了直接的JD ...

  7. UVA 11646 - Athletics Track || UVA 11817 - Tunnelling the Earth 几何

    题目大意: 两题几何水题. 1.UVA 11646 - Athletics Track 如图,体育场的跑道一圈400米,其中弯道是两段半径相同的圆弧,已知矩形的长宽比例为a:b,求长和宽的具体数值. ...

  8. js课程 5-13 js事件绑定和鼠标事件注意事项有哪些

    js课程 5-13  js事件绑定和鼠标事件注意事项有哪些 一.总结 一句话总结:js代码的灵魂就是改变标签的属性和样式,就这两种. 1.js触发改的东西是哪两样? 属性和样式 2.js如何让页面用标 ...

  9. windows SID

    显示SID whoami /user 修改SID C:\windows\system32\sysprep\sysprep.exe /generalize /oobe /reboot

  10. Java 接口中定义抽象方法有什么意义

    接口方法声明只能是public abstract的,所以不管你在声明的时候加不加abstract,都是可以的.Java 8开始,接口还引入了默认方法,也就是可以给接口的方法提供默认的实现,默认方法应当 ...