JavaScript学习记录(4)
来源:互联网 发布:股票医生软件下载 编辑:程序博客网 时间:2024/05/21 17:49
JavaScript中有两种计时器,一种是setTimeout();还有一种是setInterval();
两种计时器的区别是timeout是在你指定的时间之后执行一次你的代码,但是interval是每隔固定的时间后都会执行你的代码,一个是单词操作,一个是重复操作。
利用setTimeout的嵌套一样可以实现setinterval的功能。
如果在网页实现一个计时器,需要一个开始按钮可一个结束按钮,结束计时器的函数是把set换成clear,清除计时器即可。clearTimeout(),clearInterval()。
用法如下:
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>计时器</title>
<script type="text/javascript">
var num=0;
var i;
function startCount(){
document.getElementById('count').value=num;
num=num+1;
i=setTimeout("startCount()",1000);
}
function stopCount(){
clearTimeout(i);
}
</script>
</head>
<body>
<form>
<input type="text" id="count" />
<input type="button" value="Start" onclick="startCount()" />
<input type="button" value="Stop" onclick="stopCount()" />
</form>
</body>
</html>
有一个综合练习为跳转页面。就好像淘宝里面支付成功后等待5秒跳回原网页一样,但是跳回原网页需要你已经有进行了原网页的访问,网页的history里面有之前网页的记录才可以,没有的话可以利用window.open(),打开一个新的网页测试功能性,其中定义的变量是用来结束计时器的,注意:setTimeout()里面的函数一定要加引号!。直接上代码:
<!DOCTYPE HTML><html><head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>计时器</title> <script type="text/javascript"> var num=5; var i; function Count(){ document.getElementById("txt").value=num;//这里设置文本框的值 num=num-1; if(num==0){ //判断是否到时间进行跳转,此处利用打开新窗口测试功能 window.open("https://www.baidu.com","_self");//理论上应该是window.history.back() } i=setTimeout("Count()",1000);//利用计时器进行时间倒计时输出 } function back_to(){ //设置返回链接 window.open("https://www.baidu.com","_self"); } </script></head><!--在这里加入这条语句的作用是打开网页后制动运行Count()函数--><body onload="Count();"><!--下面是完成网页的布局,并设置点击后的功能,理论上style应该在css中设置,这里只是演示--><h2>操作成功!</h2><p><input type="text" id="txt" style="width: 10px;border: 0px" > 秒后返回主页! <a href="#" onclick="back_to()">返回</a></p></body></html>
- JavaScript学习记录(4)
- JavaScript学习记录(一)
- JavaScript学习记录(二)
- JavaScript学习记录(1)
- JavaScript学习记录(2)
- JavaScript学习记录(3)
- JavaScript 的学习记录。
- JavaScript 学习点滴记录
- javascript 学习记录
- javascript学习记录
- JavaScript学习记录
- Javascript 常见学习记录
- javascript学习记录
- javascript学习记录
- 学习记录--javascript多态
- JavaScript学习记录
- JavaScript学习记录(一)
- JavaScript学习记录(二)
- Linux常用命令介绍(搜索命令)
- Java反射概念
- 傲娇与偏见
- jQuery笔记
- 两数组的交
- JavaScript学习记录(4)
- spark报错:ERROR SparkUI: Failed to bind SparkUI,解决办法
- 图片无缝滚动
- 今天做到一道面试题:Android中进程的通信方式
- Java反射获取构造方法
- [学习笔记]用户界面优化之Android Fragment
- function自定义函数99乘法表
- 2017暑期实习招聘-产品经理-广联达(2轮面试)
- 再悟HTML+CSS+JS