倒计时——从10倒数到0,点击按钮会还原倒计时
<body>
<!-- 将textvalue值设为10,从10倒数 -->
<input type="text" value="10" id="txt">
<input type="button" value="重新开始" id="btn">
</body>
<script>
var oT = document.getElementById("txt");
var oB = document.getElementById("btn");
var timer;
//封装一个开始倒数的函数
function start(){
//开启计时器,每秒text框中的数值自减1
timer = setInterval(function(){
oT.value--;
//当text框中的数值为0时,停止计时器
if(oT.value<=0){
clearInterval(timer);
}
},1000)
}
//封装一个清楚延时器的函数
function stop(){
clearTimeout(timer);
}
//当网页加载完毕时的行为如下
window.onload = function(){
//只要text里面的数值还未到0,则不停地以每秒减一的速度进行着
if(oT.value>0){
start();
//一旦清零,就停止
}else{
stop();
}
}
//当点击按钮时的行为
oB.onclick = function(){
//此处要设清除计时器,否则中断text倒数后的重新倒数将会加速,甚至会递减到负值
clearInterval(timer);
//点击按钮后,无论text中的数值时多少,都变为10
oT.value = 10;
//重复上面函数的行为
if(oT.value>0){
start(); }else{
stop();
}
}
</script>

用JavaScript写一个简单的倒计时,可以应用在发送短信验证码的“59秒后重新发送验证短信”的更多相关文章

  1. 用JavaScript写一个简单的计算器

    本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...

  2. 利用windows.h头文件写一个简单的C语言倒计时

    今天写一个简单的倒计时函数 代码如下: #include<stdio.h> #include<windows.h> int main() { int i; printf(&qu ...

  3. 分享:计算机图形学期末作业!!利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”

    这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...

  4. 怎么用JavaScript写一个区块链?

    几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...

  5. 使用JavaScript实现一个简单的编译器

    在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...

  6. 大前端工程化之写一个简单的webpack插件

    今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...

  7. 用Python写一个简单的Web框架

    一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...

  8. 如何写一个简单的http服务器

    最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...

  9. 如何写一个简单的shell

    如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...

随机推荐

  1. python编写弹球游戏的实现代码

    #coding:utf- from tkinter import * import random import time class Ball: #创建一个球类 def __init__(self, ...

  2. HDU 1069 Monkey and Banana ——(DP)

    简单DP. 题意:给出若干种长方体,如果摆放时一个长方体的长和宽小于另一个的长宽,那么它可以放在另一个的上面,问最高能放多少高度.每种长方体的个数都是无限的. 做法:因为每种个数都是无限,那么每种按照 ...

  3. Atcoder ABC 139C

    Atcoder ABC 139C 题意: 有 $ n $ 个正方形,选择一个起始位置,使得从这个位置向右的小于等于这个正方形的高度的数量最多. 解法: 简单递推. CODE: #include< ...

  4. BZOJ3907网格

    这东西是拿Cat思想搞得组合数学. 首先做这个需要会用网格法或折线法分析Cat的$C_{2n}^n-C_{2n}^{n-1}$是怎么来的. 网格法:假如没有限制,从(0,0)到(n,n)的方案数为$C ...

  5. Flutter移动电商实战 --(31)列表页_列表切换交互制作

    点击左侧的大类右边的小类也跟着变化 新建provide 要改变哪里就建哪里的provide,我们现在要改变的是右边的商品列表的数组. category_goods_list.dart 这样我们的pro ...

  6. 重学C语言

    重学C语言 #include <stdio.h> int main() { ; ; printf("I am %d year old.\n",age); printf( ...

  7. 路由传值及获取参数,路由跳转,路由检测,this.$route.query和this.$route.params接收参数,HttpGet请求拼接url参数

    配置动态路由参数id: routes: [ // 动态路径参数 以冒号开头 { path: '/user/:id', component: User } ] html路由跳转: <router- ...

  8. Windows10 64位 安装 Docker

    本文主要介绍Docker在Windows下的安装.关于Docker的介绍和文档在其官网中可以找到:http://www.docker.com .安装环境:Windows10 64位. Docker引擎 ...

  9. HBase管理与监控——Dead Region Servers

    [问题描述] 在持续批量写入HBase的情况下,出现了Dead Region Servers的情况.集群会把dead掉节点上的region自动分发到另外2个节点上,集群还能继续运行,只是少了1个节点. ...

  10. [!] The version of CocoaPods used to generate the lockfile (1.4.0.beta.1) is higher than the version of the current executable (1.3.0.beta.1). Incompatibility issues may arise.

    今天在看一个开源Demo代码的时候,需要执行pod install命令,直接报错如下: 解决方法: 执行:pod update 命令更新资源库即可.