用JavaScript写一个简单的倒计时，可以应用在发送短信验证码的“59秒后重新发送验证短信”
<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秒后重新发送验证短信”的更多相关文章
- 用JavaScript写一个简单的计算器
本文使用js实现了一个简单的加.减.乘.除计算器. 以下是css部分代码: *{ padding:0; margin:0; color: #424242; } .outer{ width:300px; ...
- 利用windows.h头文件写一个简单的C语言倒计时
今天写一个简单的倒计时函数 代码如下: #include<stdio.h> #include<windows.h> int main() { int i; printf(&qu ...
- 分享：计算机图形学期末作业！！利用WebGL的第三方库three.js写一个简单的网页版“我的世界小游戏”
这几天一直在忙着期末考试,所以一直没有更新我的博客,今天刚把我的期末作业完成了,心情澎湃,所以晚上不管怎么样,我也要写一篇博客纪念一下我上课都没有听,还是通过强大的度娘完成了我的作业的经历.(当然作业 ...
- 怎么用JavaScript写一个区块链？
几乎所有语言都可以编写区块链开发程序.那么如何用JavaScript写一个区块链?以下我将要用JavaScript来创建1个简单的区块链来演示它们的内部到底是怎样工作的.我将会称作SavjeeCoin ...
- 使用JavaScript实现一个简单的编译器
在前端开发中也会或多或少接触到一些与编译相关的内容,常见的有 将ES6.7代码编译成ES5的代码 将SCSS.LESS代码转换成浏览器支持的CSS代码 通过uglifyjs.uglifycss等工具压 ...
- 大前端工程化之写一个简单的webpack插件
今天写一个简单的webpack插件,来学习一下webpack插件 webpack插件机制可以使开发者在webpack构建过程中加入自己的行为,来针对自己项目中的一些需求做一些定制化 首先我们得知道一个 ...
- 用Python写一个简单的Web框架
一.概述 二.从demo_app开始 三.WSGI中的application 四.区分URL 五.重构 1.正则匹配URL 2.DRY 3.抽象出框架 六.参考 一.概述 在Python中,WSGI( ...
- 如何写一个简单的http服务器
最近几天用C++写了一个简单的HTTP服务器,作为学习网络编程和Linux环境编程的练手项目,这篇文章记录我在写一个HTTP服务器过程中遇到的问题和学习到的知识. 服务器的源代码放在Github. H ...
- 如何写一个简单的shell
如何写一个简单的shell 看完<UNIX环境高级编程>后我就一直想写一个简单的shell来作为练习,因为有事断断续续的写了好几个月,如今写了差不多来总结一下. 源代码放在了Github: ...
随机推荐
- PostMan的详细介绍
无论是接口调试还是接口测试,postman都算的上很优秀的工具,好多接口测试平台.接口测试工具框架的设计也都能看到postman的影子,我们真正了解了这款工具,才可以在这个基础上进行自己的设计和改造. ...
- Ubuntu14.04 支持 exFat 格式操作
推荐u盘使用exfat格式,为什么呢?两个原因: 1.三大主流操作系统(Linux.Mac.Windows)都支持exfat格式.2.exfat支持大于4G的文件. 在ubuntu下,由于版权的原因( ...
- codeforces#101194H. Great Cells（数学）
题目链接: https://codeforces.com/gym/101194 题意: 在$n×m$的各自中填上$1$到$k$的数 定义Greate cell为严格大于同行和同列的格子 定义$A_g$ ...
- Java中的集合Collection
集合是什么? Java集合类存放于 java.util 包中,是一个用来存放对象的容器. 注意:①.集合只能存放对象.比如你存一个 int 型数据 1放入集合中,其实它是自动转换成 Integer 类 ...
- Python动态展示遗传算法求解TSP旅行商问题(转载)
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明.本文链接:https://blog.csdn.net/jiang425776024/articl ...
- THREE.js（一）
//创建场景 var scene = new THREE.Scene(); //透视摄像机(视野角度,长宽比,远剪切面,进剪切面,) var camera = new THREE.Perspectiv ...
- mysql端口3306无法访问
mysql主备复制,show slave status显示IO一直connecting 一.查看了防火墙,已经处于关闭状态 二.查看使用的复制用户的权限,也已经开放 三.telnet访问另外一台机器端 ...
- SQL-W3School-高级：SQL ALIAS（别名）
ylbtech-SQL-W3School-高级:SQL ALIAS(别名) 1.返回顶部 1. 通过使用 SQL,可以为列名称和表名称指定别名(Alias). SQL Alias 表的 SQL Ali ...
- RotateDrawable
用来对Drawable进行旋转,也是通过setLevel来控制旋转的,最大值也是:10000 相关属性如下: fromDegrees:起始的角度,,对应最低的level值,默认为0 toDegrees ...
- 前端 - 轮询, 长轮训, websocket
轮询 概念 ajax 轮询的原理很简单,让浏览器间隔几秒就发送一次请求,询问服务器是否有新信息 代码 function showUnreadNews() { $(document).ready(fun ...