原文链接：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. ubuntu14.04.32 vmware11开发环境搭建

    win7 64  vmware11 ubuntu14.04.32 在vmaware上安装ubuntu,自定义安装,选择区域为上海,这样数据源就会自动设置为中国,获取网络数据会较快,也可以安装完之后改变 ...

  2. （转）Tomcat调优

    问题定位 对于Tomcat的处理耗时较长的问题主要有当时的并发量.session数.内存及内存的回收等几个方面造成的.出现问题之后就要进行分析了. 1.关于Tomcat的session数目 这个可以直 ...

  3. Python数据类型中的字符串类型

    1.换行字符:\n print ('I love python.\nAnd you?') 2.转义字符(\):\\ print ('\\\n\\') 3.制表字符(对齐表格的各列):\t print ...

  4. C# 反射基础运用

    反射是.NET中的重要机制,通过反射,可以在运行时获得程序或程序集中每一个类型 (包括类.结构.委托.接口和枚举等)的成员和成员的信息. 其实有些人会问, 像我们平常引用DLL可以直接用, 为什么要用 ...

  5. 玩转Bootstrap（基础） -- （6.导航条基础）

    1.导航条样例 <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" ...

  6. 基于zookeeper实现的分布式锁

    基于zookeeper实现的分布式锁 2011-01-27 • 技术 • 7 条评论 • jiacheo •14,941 阅读 A distributed lock base on zookeeper ...

  7. 洛谷—— P2234 [HNOI2002]营业额统计

    https://www.luogu.org/problem/show?pid=2234 题目描述 Tiger最近被公司升任为营业部经理,他上任后接受公司交给的第一项任务便是统计并分析公司成立以来的营业 ...

  8. android--显式跳转和隐式跳转的差别使用方法

    #创建第二个activity * 新创建的activity.必须在清单文件里做配置,否则系统找不到,在显示时会直接报错 <activity android:name="com.ithe ...

  9. 策略模式 VS 桥梁模式

    这对冤家终于碰头了,策略模式与桥梁模式是如此相似,简直就是孪生兄弟,要把它们两个分开需要花费大量智力,我们来看看两者的通用类图,如图33-1所示. 图33-1 策略模式(左)和桥梁模式(右)通用类图 ...

  10. JS学习笔记 - 普通选项卡（面向过程）

    疑问: 1. getElementsByTagName 和 getElementsByClassName  的区别? 分别在什么应用场景?    <!DOCTYPE html> <h ...