原文链接：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. 基于jQuery的一组图片的滚动

    css: .displayB{display:block;}.fl{float:left;}.fr{float: right;}.posAb{position: absolute;}.posRe{po ...

  2. CentOS 6 IPv6 关闭方法

    http://www.linuxidc.com/Linux/2012-06/63642.htm http://blog.csdn.net/ccscu/article/details/7814028

  3. shell实例浅谈之三产生随机数七种方法

    一.问题 Shell下有时须要使用随机数,在此总结产生随机数的方法.计算机产生的的仅仅是"伪随机数".不会产生绝对的随机数(是一种理想随机数).伪随机数在大量重现时也并不一定保持唯 ...

  4. Eclipse导入Maven项目出现错误：Unsupported IClasspathEntry kind=4

    使用Eclipse导入Maven项目失败,提示: An internal error occurred during: "Importing Maven projects". Un ...

  5. HDU 3131 One…Two…Five! （暴力搜索）

    题目链接:pid=3131">HDU 3131 One-Two-Five! (暴力搜索) 题意:给出一串数字,要求用加,减,乘,除(5/2=2)连接(计算无优先级:5+3*6=8*6= ...

  6. SQL server 2012 安装SQL2012出现报错: 启用 Windows 功能 NetFx3 时出错

    在window server 2012服务器上,安装 SQL Server 2012的过程中,报了一个错误,一个安装失败, 在安装SQL 2012的过程中.出现下面错误:启用 Windows 功能 N ...

  7. 06 Jenkins自动化构建

    • 在之前的freestyle任务基础上,实现构建功能• 检查maven环境• 构建命令:mvn clean compile• 归档构建产物• 演练参数的使用• 通过配置Trigger进行自动构建• ...

  8. css实现水波纹效果

    1. HTML 代码: <div class="example"> <div class="dot"></div> < ...

  9. subline Text3 安装及汉化

    因为自己的subline 有问题  所以决心重新改一下了. 三步: http://www.sublimetext.com/3      官网下载subline3 https://www.imjeff. ...

  10. 原生js大总结十一

    101.请简述prototype.__proto__ constructor三者的关系   1.prototype:     每一个函数都有一个prototype这个属性,而这个属性指向一个对象,这个 ...