原文链接：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. windows7下安装Office2010提示需要安装MSXML6.10.1129

    平台:Windows 7 问题:刚刚下载的ghost Win 7,安装过程一切顺利,进入系统后把集成的软件全部卸载,清理完垃圾,安装了VC库,在安装Office2010时提示需要安装MSXML6.10 ...

  2. Android Studio使用Mob来获取手机验证码的源码

    本文来自:CSDN 感谢作者:qq_35812301(其实就是我的号!) 查看原文:http://blog.csdn.net/qq_35812301/article/details/79150775 ...

  3. 【2017 Multi-University Training Contest - Team 6】Kirinriki

    [链接]http://acm.hdu.edu.cn/showproblem.php?pid=6103 [题意] 给出一串字符串,从中选出两个不重叠的字符串,使得两个字符串的距离和 <= m 的最 ...

  4. 洛谷 P2677 超级书架 2

    P2677 超级书架 2 题目描述 Farmer John最近为奶牛们的图书馆添置了一个巨大的书架,尽管它是如此的大,但它还是几乎瞬间就被各种各样的书塞满了.现在,只有书架的顶上还留有一点空间. 所有 ...

  5. mysql新加入用户与删除用户详细操作命令

    方法1 :使用mysql root(root权限)用户登陆直接赋权也能够创建用户 /usr/bin/mysqladmin -u root password 123456 mysql -uroot -p ...

  6. Moodle 中文 API 之 文件管理API

    File API  文件管理 文件夹 1. 概述 2. 文件域 2.1 命名文件域 3. 提供文件给用户 4. 从用户那获取文件 5. 样例 5.1 浏览文件 5.2 移动文件 5.3 文件列表 5. ...

  7. [React] Render Elements Outside the Current React Tree using Portals in React 16

    By default the React Component Tree directly maps to the DOM Tree. In some cases when you have UI el ...

  8. [1,2,3].forEach(alert);这样的写法有什么利和弊吗？

    以下这个问题遇到了之后.问了太阳神,以下是太阳神的解答: [1,2,3].forEach(alert);这样的写法有什么利和弊吗? 首先forEach使用方法非常easy降低代码量, 可是也有非常多地 ...

  9. Windows 7 下快速挂载和分离VHD文件的小脚本

    1.保存以下代码为VDM.vbs,放在Windows\system32下 Dim ArgsSet Args = WScript.ArgumentsTranArgs = " "For ...

  10. 【Codeforces Round #301 (Div. 2) E】Infinite Inversions

    [链接] 我是链接,点我呀:) [题意] 给你一个无限长的序列1,2,3,4... 然后给你n个操作. 每个操作ai,bi; 表示调换位置为ai和位置为bi的数的位置. (ai,bi<=10^9 ...