JavaScript中的定时器及内置对象

最新推荐文章于 2024-05-14 18:48:43 发布
最新推荐文章于 2024-05-14 18:48:43 发布
阅读量557 收藏 3
点赞数
分类专栏： js 文章标签： js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43552118/article/details/85004067
版权

一.js定时器

1.js 定时器有以下两个方法：

  • setInterval() 循环定时器：按照指定的周期（以毫秒计）来调用函数或计算表达式。即固定时间间隔执行一次，像闹钟 一样，不关闭则会继续执行。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。
  • setTimeout() 炸弹定时器：在指定的毫秒数后调用函数或计算表达式。只执行一次，不会重复执行。

2.语法格式：setInterval(code,millisec,lang)   

code----表示调用的函数名称(必须具备)      millisec------表示执行时间(必须具备)       lang-----JScript | VBScript | JavaScript(可省略),

案例1:循环定时器实现倒计时

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var mytimer;
			function startTimer(){
				//var mytimer=setInterval(myDate(),1000);  //错误 信息:在每次点击按钮时才会调用
				//解决方式:
				mytimer=setInterval('myDate()',1000); 
				//mytimer=setInterval(function(){myDate()},1000);
//				alert(mytimer);
			}
			//创建一个函数用来获取本地的时间
			function myDate(){
				//获取当前时间
				var timeDate=new Date();
				//将日期时间 转为字符串
				var times=timeDate.toLocaleTimeString();
				//alert(times);
//				var dem01= document.getElementById('demo');
				document.getElementById('demo').innerHTML=times;
//				alert(dem01);
			}
			//myDate();
			function stopTimer(){
				//清除计时器
				clearInterval(mytimer);
			}
		</script>
	</head>
	<body>
		<h4 id="demo">setInterval()计时器函数</h4>
		<input type="button" onclick="startTimer()" value="开始"/>
		<input type="button" onclick="stopTimer()" value="停止" />
	</body>
</html>

实现简易抽奖活动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var alldata="a,b,c,d,e,f,g,h,i,j,k,l,m,n,o,p,q,r,s,t,u,v,w,x,y,z";
			var arr=alldata.split(',');
			var num=arr.length-1;
			var timer;
			function start(){
				timer=setInterval('change()',50);
			}
			function change(){
				document.getElementById('oknum').innerHTML=arr[value(0,num)]
			}
			function value(){
				return parseInt(Math.random()*num);  //返回随机产生的索引
			}
			//停止函数
			function stop(){
				clearInterval(timer);
				document.getElementById('showresult').value=document.getElementById('oknum').innerHTML;
			}
		</script>
	</head>
	<body>
		<div id="oknum" name="oknum" >请单击开始抽奖</div>
	    <button onclick="start()" accesskey="s">开始</button>
	    <button onclick="stop()" accesskey="o">停止</button> 
	    您的选择是： 
	    <input type="text" id="showresult" value=""/>
	</body>
</html>

实现打印机效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var n=0;
			function load(){
				var arr=['曾','经','小','小','少','年','现','如','今','风','度','翩','翩'];
				var div=document.getElementById('div1');
				div.innerHTML+=arr[n];
				n++;
				var timer=setTimeout('load()',500);
				if(n>=arr.length){
					clearTimeout(timer);
					var timer1=setInterval('span()',500);
				}
			}
			function span(){
				var span1=document.getElementById('span1');
				if(span1.style.display=='block'){
					span1.style.display='none';
			}else{
				span1.style.display='block';
			}
		}
		</script>
	</head>
	<body>
		<body onload='load();'>
		  <div id="div1" style="float: left; font-family: 阿美简体;"></div>
        	<span id="span1">
        		<label style="color: red; font-size: 15px; font-family: 阿美简体;">|		</label>
        	</span>
	</body>
</html>

 

 

案例2  炸弹定时器实现简易版时钟

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
				function myTime(){
					var DateDay=new Date();
					var hours=DateDay.getHours(); //获取时间的小时
					var minutes=DateDay.getMinutes();//获取时间的分钟
					var second=DateDay.getSeconds(); //获取时间的秒数
					minutes=checkeds(minutes);
					second=checkeds(second);
					document.getElementById('div1').innerHTML='当前时间为:'+hours+'时'+minutes+'分'+second+'秒';
//					setTimeout(myTime,1000);
					setTimeout('myTime()',1000);
				}
//				setTimeout(myTime(),1000); //只调用一次,并没有实现时钟效果
				
				function checkeds(value){
					if(value<10){
						value='0'+value;
					}
					return value;
				}
			
		</script>
	</head>
	<body onload="myTime();">
		<div id="div1"></div>
	</body>
</html>

二.JS内置对象

 JavaScript常见的内置对象有Object,Math,String,Array,Number,Function,Boolean,JSON等,其中Object是所有对象的基类

Eval() : 用于计算字符串表达式的值; IsNaN() : 用户验证参数是否是 NaN(非数字);

案例1.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			//eval():js的内置函数用来计算表达式的值
//			var a=120,b=80;
//          var sum=eval(a+b);
          alert(sum);
//          var mess=prompt('请输入一个表达式','1122*1314');
//          var value=eval(mess);
//          alert(value);
            //isNaN():判断是一个非数字的值  true/false
            var mess1=prompt('请输入一个数字','0');
            if(isNaN(mess1)==false){
            	alert('这是一个非数字的值');
            }
		</script>
	</head>
	<body>
	</body>
</html>

（1）Math 对象

abs(y) 返回 y 的绝对值

min (x,y） 返回 x 和 y 两个数中较小的数

max (x, y）返回 x 和 y 两个数中较大的数

random 返回 0-1 的随机数

round (y) 四舍五入取整

sqrt (y) 返回 y 的平方根

案例:注意:因为math.round获取随机数获取的是数字,命名图片名称尽量使用数字开头,这样才能保证图片路径的正确性,以便获取到图片

以下案例图片没有以数字开头(而是以p1.jpg命名),所以路径名也应加上p   (document.getElementById('images').src='../img/p'+mathvalue+'.jpg';),否则会出现路径错误问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//Math.random(): 随机产生0-1之间的数字
			//Math.round(): 四舍五入取整
			//案例:使用计时器以及Math对象实现页面2秒显示不同的图片
			function suiji(){
				var mathvalue=Math.round(Math.random()*3+1);
//				document.write(mathvalue);
				document.getElementById('images').src='../img/p'+mathvalue+'.jpg';
			}
			setInterval('suiji()',2000);
		</script>
	</head>
	<body>
		<img src="../img/p1.jpg" id="images" width="400px",height="200px">
	</body>
</html>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//问题: 使用计时器以及Math对象实现页面2秒 显示不同的图片
			function suiji(){
				var mathValue=Math.round(Math.random()*3+1);
//				document.write(mathValue+'<br />');
				document.getElementById('img1').src='img/'+mathValue+'.jpg';
			}
			setInterval('suiji()',2000);
		</script>
	</head>
	<body>
		<img src="img/3.jpg" id="img1" width="200px"height="200px"/>
	</body>
</html>

 

（2）Date 对象

Date 对象存储的日期为自 1970 年 1 月 1 日 00:00:00 以来的毫 秒数 var 日期对象 = new Date (年、月、日等参数)

例： var mydate=new Date( “July 29, 1998,10:30:00 ”)

如果没有参数，表示当前日期和时间例： var today = new Date();

1）Date 方法的分组：

2）用作 Date 方法的参数的整数：

 

3）Get 方法:

案例:实现距离元旦倒计时 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script>
function time(){
    //目标时间
    var targetDate=new Date("2019/1/1")
    //获取当前时间
    var now = new Date()
    //目标时间和当前时间相差的毫秒
    var millon =targetDate.getTime() - now.getTime()
    var seconds =millon/1000
    //一天的毫秒数=24*60*60*1000
    var days = parseInt(seconds/(24*60*60))
    //剩余的小时=(millon - days *24*60*60*1000)/(60*60*1000)
    var hours =parseInt(seconds%(24*60*60)/3600)
    var minutes = parseInt(seconds%3600/60)
    var ss =parseInt(seconds%60)
    var pobj =document.getElementById("pobj")
    pobj.innerHTML="离2019年元旦还剩"+days+"天"+hours+"小时"+minutes+"分钟"+ss+"秒"
}
    setInterval("time()",1000)
</script>
	</head>
	<body>
	<div id="pobj"></div>
	</body>
</html>

（3）Window 对象

open（”打开窗口的 url”，”窗口名”，”窗口特征”） 窗口的特征如下，可以任意组合：

height： 窗口高度； width： 窗口宽度； top： 窗口距离屏幕上方的象素值； left：窗口距离屏幕左侧的像素值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var left1=0;
			var top1=0;
			function adv(){
			
				left1+=50;
				top1+=50;
				var div=document.getElementById('Layer1');
				div.style.left=left1+'px';
				div.style.top=top1+'px';
			}
			setInterval('adv()',500);
		</script>
	</head>
	<body onload="adv()">
		<div id="Layer1" style="position:absolute; left:14px; top:44px; width:150px; height:102px; z-index:1">
	    <a href="http://www.mycom.cn"><img src="../img/p2.jpg" width="200" height="150" border="0"></a>
	    </div>
	</body>
</html>

 

（4）Document 对象

属性：

bgColor： 设置或检索 Document 对象的背景色

body ：指定文档正文的开始和结束

location ：包含关于当前 URL 的信息

title： 包含文档的标题 url 设置或检索当前文档的 URL

方法：

clear ( )： 清除当前文档

close ( )： 关闭输出流并强制显示发送的数据

write ("text") ：将文本写入文档

案例：
 

<html>
<head>
	<script type="text/javascript">
		function createNewDoc()
		  {
			  var newDoc=document.open("new_file.html","replace");
			  var txt="<html><body>Learning about the DOM is FUN!</body></html>";
			  newDoc.write(txt);
			  newDoc.close();
		  }
	</script>
</head>
<body>
		<input type="button" value="Write to a new document"
		onclick="createNewDoc()">
</body>
</html>

（5）History 对象

方法：

 back()：加载 History 列表中的上一个 URL。

forward() ：加载 History 列表中的下一个 URL。

 go("url" or number)： 加载 History 列表中的一个 URL，或要求浏览器移动指定的页面数。

注：back ( ) 方法相当于后退按钮 forward ( ) 方法相当于前进按钮 go (1)代表前进 1 页，等价于 forward( )方法； go(-1) 代表后退 1 页，等价于 back( )方法；

（6）Loaction 对象

属性：

host： 设置或检索位置或 URL 的主机名和端口号

hostname： 设置检索位置或 URL 的主机名部分

href ：设置或检索完整的 URL 字符串

方法：

assign("url")：加载 URL 指定的新的 HTML 文档。

reload()：重新加载当前页

replace("url") ：通过加载 URL 指定的文档来替换当前文档

案例：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			//alert(location.host);//获取或是设置主机的端口号和主机名称  127.0.0.1:8020
			//alert(location.hostname);
			//alert(location.href); //设置或是检索url信息
			
			//location.assign('http://www.yltedu.com');  //加载一个新的url地址
			//location.reload(true);  //重新加载当前页面
			//location.replace('new_file.html');  //使用一个新的url替换当前的url
			
			function change_01(){
				
				//获取选中的节点的value值  赋值给location对象的属性href
				location.href=document.for1.select1.value;
				
			}
		</script>
	</head>
	<body>
		
		<form action="" method="post" name="for1">
			<select name="select1" onchange="change_01();">
				<option>--请选择季节--</option>
				<option value="spring.html">春季</option>
				<option value="spring.html">夏季</option>
				<option value="spring.html">秋季</option>
				<option value="spring.html">冬季</option>
			</select>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>


另外创建一个的跳转页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>跳转到春季的页面了.......</h1>
		<!--实现返回前一个页面   javascript:hitory.go(-1)-->
		<a href="summer.html">夏季</a>
		<a href="fall.html">秋季</a>
		<a href="winter.html">冬季</a>
		<a href="javascript:history.go(-1)">前一个页面</a>
		<a href="javascript:history.go(1)">后一个页面</a>
	</body>
</html>

 

qq_43552118zx
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
JavaScript学习笔记之内置对象
11-30
在这个学习笔记中，我们将探讨JavaScript的内置对象，主要包括Window、Screen、Location、History等，它们都是JavaScript环境中非常重要的组成部分。 首先，Window对象是JavaScript的核心，它代表了浏览器的窗口。...
浅谈JavaScript的内置对象和浏览器对象
10-22
在JavaScript中，对象可以分为两类：内置对象和浏览器对象。本文将深入探讨这两种对象类型及其相关知识点。 首先，我们来看内置对象。JavaScript的内置对象是语言本身提供的一些预定义对象，它们提供了基本的数据...
js定时器的开启和关闭
weixin_44674299的博客
07-03 5592
/给一个bollen类型的值，初始位false/ var bollean=false; /定时器功能，根据bollen来判断是否执行/ function dingshiqi() { var setIntervalvalue=setInterval(function(){ if (bollean) { /定时器功能不执行并返回/ clearInterval(setIntervalvalue); re...
input的type属性所有参数(含css3.0)
JieChen0712的博客
05-13 6575
input的type属性所有参数(含css3.0) 这是我的第一篇博文，不知道要来写什么，刚好最近看了下css3中input的type属性，发现有很多简单实用的东西，于是就决定写这篇博文。（仅供参考，准确性有待检测！） 1. type=”button” button相信大家都不陌生的了！ <input type="button" value="这是一个类型为button" />
如何在for循环中添加定时器？js的事件循环机制解析
最新发布
yawang_的博客
05-14 634
原因：当js代码运行到有定时器的地方的时候，会把定时器操作放在任务队列的尾部，然后跟它说：“你先排队吧，还没有轮到你，因为同步代码还没有执行完。开发过程中，碰到了一个批量下载需求，众所周知，一般碰到批量下载都是下载一个压缩包，但因为此次设计原因，要做成分批次下载多张图片，数据结构是一个List，于是我想到了创建a标签，模拟用户点击行为去逐次下载，但在这个过程中遇到了一些问题，在此分析一下。2、另外还有一个异步任务队列，异步任务有了结果后，在异步任务队列放一个事件，等待执行。
JavaScript对象详解（定时器）
东方
12-04 791
一： js 1：概念： 基于对象的脚本语言， 浏览器直接解析： 基于对象： 模拟面向对象。， 基本语言： 不是高级语言， 解析的时候不需要编译。 浏览器： 2： 基本数据类型： 数值类型： number 字符串类（字符）： String undefined： 未定义 null boolean类型： 3：复合类型 数组： 函数： 对象： 4： 运算符： 算数： ++ – 关系： NaN 和 NaN...
JavaScript 的定时器及内置对象
qq_43551373的博客
12-13 292
定时器 （1）setInterval()；循环定时器：固定时间间隔指定一次，像闹钟 一样，不关闭继续执行。 （2）setTimeout()；炸弹定时器：只执行一次，不能执行下一次了。 1. SetInterval() 语法结构: setInterval(code,millisec,lang) 说明：code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 c...
js 定时任务
明耀的博客
09-03 678
setInterval(() => { this.getDeviceList(); }, 1000);
JS前端知识点总结之内置对象，日期对象和定时器相关操作
12-01
了解这些基本的JavaScript内置对象和日期对象的使用，以及定时器的控制，对于进行前端开发是非常基础且重要的。在实际开发中，还需要考虑跨浏览器兼容性、性能优化以及代码的可维护性等问题。通过熟练掌握这些知识，...
Javascript中文API
01-30
12. **内置对象和全局对象**：JavaScript有许多内置对象，如Array、Date、Math等，它们提供了许多实用的方法。全局对象window包含了所有全局变量和函数。 "JavaScript 语言参考.chm"这个文件很可能包含了JavaScript...
JavaScript 浏览器对象模型BOM使用介绍
12-01
JavaScript 浏览器对象模型（BOM）是Web开发中不可或缺的一部分，它允许开发者与用户的浏览器进行交互，访问和操作浏览器的各种特性。由于BOM没有统一的规范，不同浏览器提供商可能会有不同的实现，但一些核心的对象...
简单的随机点名程序
Little_treasure的博客
03-05 2788
Src: &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt; &amp
js中内置Date()对象总结
Amazing刘许许的博客
08-15 438
      今天看了date对象，然后总结了一下date对象常用的API。        //设置时间           var dt = new Date("2000/06/06");         var dt1 = new Date("2000-08-06");         console.log(dt,dt1);         //两个时间相减会得到它们之间的相差的毫秒数。  ...
JS内置对象
ice-bear
08-20 338
DAY18——js内置对象 时间对象，数学对象，日期对象 顶级：window 分支：history document location 还有 Date Math String Array
javascript实现倒计时效果
start_XUEBA的博客
08-10 460
分析： 1、要实现倒计时，所以需要用到 setInterval 定时器。 2、需要用到Date函数，计算出倒计时的小时数、分钟数、秒数；再用 innerHTML 把倒计时的 小时数、分钟数、秒数放入三个盒子里显示出来。 3、用定时器第一次执行时间隔1秒，页面在此期间有空白，所以采用封装函数的方式，先调用一次此函数。 4、时间到了清除定时器 clearInterval() ，加上忽大忽小的动...
setInterval设置停止的次数和时间
热门推荐
陈万洲的专栏
12-26 1万+
需要知道已经经过了多少次或者说过多久就会停止 var timesRun = 0; var interval = setInterval(function(){ timesRun += 1; if(timesRun === 60){ clearInterval(interval); } //do whatever here.. }, 2000); var startTime = new Date
javascript中的window对象的setTimeout使用
weixin_33882443的博客
04-08 75
2019独角兽企业重金招聘Python工程师标准>>> ...
Javascript中的定时调用函数setInterval()和setTimeout()
weixin_30547797的博客
04-16 133
首先介绍这两个函数 一、setInterval() 按照指定的周期来调用函数或表达式，执行多次。（时间单位：ms） timer = setInterval("content =document.getElementById("input_content").value;", 800) // 0.8s执行一次js语句 timer = setInterval(showHint, 800) ...
document.getElementById("baidu") .innerHTML 详解剖析
zk818的专栏
04-26 4195
document：Javascript 中就是整个页面（Javascript内置对象）  get：获取  Element:  元素  By：通过、以...方式  Id：标识 getElementById是Javascript内置方法 合在一起就是：通过页面中的标识来获取元素 百度document.getElementById("baidu")　获得 a 这个元素 document.
JavaScript学习笔记：从基础到内置对象详解
本资源是一份关于JavaScript的学习笔记，由王春梅老师主讲，旨在系统地介绍JavaScript的基本概念、语法以及常用的内置对象和浏览器对象。以下是主要内容概览： 1. **JavaScript概述**： - 详细解释了JavaScript的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值