JavaScript 的定时器及内置对象

最新推荐文章于 2022-09-02 21:45:00 发布
最新推荐文章于 2022-09-02 21:45:00 发布
阅读量285 收藏 3
点赞数 1
分类专栏： JavaScript 的定时器及内置对象 文章标签： JavaScript 的定时器及内置对象
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43551373/article/details/84977673
版权

定时器

（1）setInterval()；循环定时器：固定时间间隔指定一次，像闹钟 一样，不关闭继续执行。

（2）setTimeout()；炸弹定时器：只执行一次，不能执行下一次了。

1. SetInterval() 语法结构: setInterval(code,millisec,lang)

说明：code 必需。要调用的函数或要执行的代码串。 millisec 必须。周期性执行或调用 code 之间的时间 间隔，以毫秒计。

lang 可选。 JScript | VBScript | JavaScript

案例：显示当前时间，通过按钮实现时间的停止，开始


<!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();
				document.getElementById('demo').innerHTML=times;
			}
			//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>

2. SetTimeout() 语法结构: SetTimeout(code,millisec,lang)

案例：实现一个页面的简易版时钟



<!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);
				}				
				function checkeds(value){
					if(value<10){
						value='0'+value;
					}
					return value;
				}
			
		</script>
	</head>
	<body onload="myTime();">
		<div id="div1"></div>
	</body>
</html>

案例1：实现打字机的效果


<!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 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>
		<style type="text/css">
		    #box {
		        width: 350px;
		        height: 400px;
		        border: 1px solid pink;
		    }
		    #box1 {
		        width: 100%;
		        height: 400px;
		        overflow: hidden;
		        /*overflow: scroll;*/
		    }
		    #box a {
		        text-decoration: none;
		        color: black;
		    }
		    ul {
		    	list-style: none;
		    }
		    li {
		    	margin-top: 5%;
		    }
		</style>
		<script type="text/javascript">
			
			//使用setInterval()  实现无缝滚动
			function myGunDong(){   //实现滚动
				
				var box1=document.getElementById('box1');
				//克隆: con1到con2中
				var con1=document.getElementById('con1');
				var con2=document.getElementById('con2');
				con2.innerHTML=con1.innerHTML;
				// con1.offsetHeight 的高度
				// scrollTop 滚动条距离  父元素 顶部内侧之间的距离
				if(box1.scrollTop>con1.offsetHeight){
					
					box1.scrollTop=0;
				}else{
					
					box1.scrollTop++;
				}
				
			}
			setInterval('myGunDong()',50);
		</script>
	</head>
	<body>
		<div id="box">
			<div id="box1">
				<ul id="con1">
					<li>
						<a href="#">1.HTML基本语法</a>
					</li>
					<li>
						<a href="#">2.css样式书写</a>
					</li>
					<li>
						<a href="#">3.HTML+CSS实现网页布局</a>
					</li>
					<li>
						<a href="#">4.JavaScript基础语法</a>
					</li>
					<li>
						<a href="#">5.JavaScript数组</a>
					</li>
					<li>
						<a href="#">6.JavaScript中DOM基本操作</a>
					</li>
					<li>
						<a href="#">7.JavaScript的OOP思想实现贪吃蛇游戏</a>
					</li>
					<li>
						<a href="#">8.jQuery基础</a>
					</li>
					<li>
						<a href="#">9.jQuery动画制作</a>
					</li>
					<li>
						<a href="#">10.jQuery插件使用技巧讲解</a>
					</li>
					<li>
						<a href="#">11.jQuery特效的实现</a>
					</li>
				</ul>
				<ul id="con2">				
				</ul>
			</div>
		</div>
	</body>
</html>

案例3：做一个简易版的时钟


<!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(min,max){
					return parseInt(Math.random()*num);  //返回随机产生的索引
				}
				//实现停止的函数
				function ok(){
					clearInterval(timer);
					document.getElementById('showresult').value=document.getElementById('oknum').innerHTML;
					
				}
		</script>
	</head>
	<body>
	    <div id="oknum" name="oknum" >请单击开始抽奖</div>
	     <!--accesskey 属性规定激活（使元素获得焦点）元素的快捷键shift+alt+accesskey-->
	    <button onclick="start()" accesskey="s">开始</button>
	    <button onclick="ok()" accesskey="o">停止</button> 
        <br/>
	    您的选择是： 
	    <input type="text" id="showresult" value=""/>
	</body>
</html>

3. 内置对象(延展内置函数 eval()和 isNaN())

1、ECMAscript javascript 的语法（变量、函数、循环语句等语法）

2、BOM 浏览器对象模型 操作浏览器的一些

3、DOM 文档对象模型 操作 html 和 css 的方法

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

案例：

<script type="text/javascript">			
	//eval():js的内置函数用来计算表达式的值
	var mess=prompt('输入一个表示式','2*2');
	var value=eval(mess);
	//alert(value);	//返回结果为4		
	//isNaN():判断是一个非数字的值  true/false
	var mess1=prompt('请输入','0');
	var value=isNaN(mess);
	alert(value);//返回结果为false	
</script>

（1）Math 对象

abs(y) 返回 y 的绝对值

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

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

random 返回 0-1 的随机数

round (y) 四舍五入取整

sqrt (y) 返回 y 的平方根

案例：使用计时器以及Math对象实现页面2秒 显示不同的图片


<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			
//			Math.random(): 随机产生0-1之间的数字
//			Math.round(): 四舍五入取整
			
			function suiji(){
				var mathValue=Math.round(Math.random()*8+1);
//				document.write(mathValue+'<br />');
				document.getElementById('img1').src='img/'+mathValue+'.jpg';
			}
			setInterval('suiji()',2000);
		</script>
	</head>
	<body>
		<img src="img/1.jpg" id="img1" />
	</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 方法的分组：

setxxx ：这些方法用于设置时间和日期值

getxxx： 这些方法用于获取时间和日期值

Toxxx： 这些方法用于从 Date 对象返回字符串值

parsexxx & UTCxx： 这些方法用于解析字符串

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

3）：Get 方法:

案例：

<script type="text/javascript">
			
	//Date() 对象中的日期格式 如下;
//	var dateDay=new Date('2018/12/12');
//	var dateDay=new Date('wed dec 1 2019');
//	alert(dateDay);

//	var dateH=new Date().setHours(12,50,34,40);
//	alert(dateH);	
	var time=new Date();
//   alert(time.getDate());// 获取月份中的天数
//   alert(time.getFullYear()); //获取年份
//   alert(time.getDay()); //获取星期几
//   alert(time.getMilliseconds());//  获取毫秒数
//   alert(time.getMonth()+1);
//   alert(time.getTime());
</script>

 

（3）Window 对象

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

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

案例：


		<script type="text/javascript">
		function btn(){
				open('02实现打字机效果.html','',"width=200,height=200");
				open('02实现打字机效果.html','');
		}

案例：实现图片在页面中移动

<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			var left1=0;
			var top1=0;
			function load(){
				left1+=50;
				top1+=50;
				var div=document.getElementById('Layer1');
				div.style.left=left1+'px';
				div.style.top=top1+'px';
			}
			setInterval('load()',500);
		</script>
	</head>
	<body onload="load();">		
		 <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/1.jpg" width="150" height="100" border="0"></a>
	    </div>
	    <H2>随机漂浮的广告</H2>
	</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="summer.html">夏季</option>
				<option value="fall.html">秋季</option>
				<option value="winter.html">冬季</option>
			</select>
			<input type="submit" value="提交"/>
		</form>
	</body>
</html>

	<body>
		<h1>跳转到夏季的页面了.......</h1>
		<!--实现返回前一个页面   javascript:hitory.go(-1)-->
		<a href="spring.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>

 

森屿海岛
关注
  • 1
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
timer:一个 js 计时器对象，可在任何带有 api 的页面上使用，以便于集成
07-07
计时器 一个 js 计时器对象，可在任何带有 api 的页面上使用，以便于集成
javascript内置对象arguments详解
10-23
主要介绍了javascript内置对象arguments,实例讲解arguments是什么怎么用,需要的朋友可以参考下
JavaScript中的定时器及内置对象
qq_43552118的博客
12-16 551
一.js定时器 1.js 定时器有以下两个方法： setInterval() 循环定时器：按照指定的周期（以毫秒计）来调用函数或计算表达式。即固定时间间隔执行一次，像闹钟 一样，不关闭则会继续执行。该方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。 setTimeout() 炸弹定时器：在指定的毫秒数后调用函数或计算表达式。只执行一次，不会重复执行。 2.语法...
JavaScript中的内置对象-8--4.date对象中-获取,设置日期时间的方法; 获取,设置年月日时分秒及星期的方法;...
weixin_30784141的博客
10-06 472
学习目标 1.掌握创建日期对象的方法 2.掌握date对象中获取日期时间的方法 3.掌握date对象中设置日期时间的方法 如何创建一个日期对象 语法：new Date(); 功能：创建一个日期时间对象 返回值：比传参的情况下，返回当前的日期时间对象。 说明：如果想根据特定的日期和时间创建日期对象，必需传入表示该日期的： 毫秒数或者是一组用逗号隔开的表示年月日时分秒的参数。 &l...
JavaScript对象详解（定时器）
东方
12-04 781
一： js 1：概念： 基于对象的脚本语言， 浏览器直接解析： 基于对象： 模拟面向对象。， 基本语言： 不是高级语言， 解析的时候不需要编译。 浏览器： 2： 基本数据类型： 数值类型： number 字符串类（字符）： String undefined： 未定义 null boolean类型： 3：复合类型 数组： 函数： 对象： 4： 运算符： 算数： ++ – 关系： NaN 和 NaN...
js内置对象---计时器对象
赵佳敏的博客
09-21 328
一、计时器对象简介 计时器对象分类 计时器对象分为一次性计时器，循环计时器，帧计时器 二、一次性计时器 计时器的参数有string||function delay ms ms—延迟多少毫秒后执行 1. 一次性计时器的写法 写法1 window.setTimeout(function(){ console.log("常规代码"); },1000) 写法2 //可以不写前缀window setTimeout(function.
了解JavaScript中的内置对象
01-30
所有编程语言都具有内部（或内置的）对象来创建语言的基本功能。内部对象是您编写自定义代码所用语言的基础，该代码基于您的想象实现自定义功能。JavaScript有许多将其定义为语言的内部对象。本文介绍了一些最常用的...
JavaScript内置对象相关介绍及用法
04-27
JavaScript内置对象相关介绍及用法ppt JavaScript内置对象相关介绍及用法
javascript function、指针及内置对象
10-30
该文摘自于匿名教程总结，希望对初学js的同学有帮助，因为它解决了我学习js的众多迷惑。。。
JavaScript 的常用内置对象
01-08
目录JavaScript 常用内置对象1. 字符串2. 数组3. 日期4. 数学运算5. 全局函数 JavaScript 常用内置对象 1. 字符串 字符串 //1.构造字符串对象可以使用 双引号,单引号,反引号,new关键字 //双引号字符串 let s1...
JavaScript对象(窗口对象 定时器对象 )
weixin_30784501的博客
01-09 76
1：窗口时间 confirm(str)：确认对话框，确认返回trun，取消返回false，但是必须要有两个return；不然就算按下取消也会提交 第一个return：用于保证确认按钮运行 <script> function update(){ var r = confirm("go on updating?"); return r...
HTML页面显示时间——网页数字时钟、钟表
热门推荐
cnds123的专栏
09-02 4万+
一个HTML网页上动态显示系统时间——网页数字时钟、钟表，本文从简单到复杂给出一些例子。
js学习--浏览器对象计时器setInterval()与setTimeout()的使用与区别
weixin_30642305的博客
03-13 74
一.setInterval()与setTimeout()的定义： 二.setInterval()与setTimeout()的使用： 1.setInterval()与clearInterval() <button id="btn" onclick="stopTime()">按钮</button> <p id="ptime"></p&...
setInterval()函数使用
ld422586546的专栏
06-05 1891
调用无参方法：     var test = function() {         document.body.innerHTML = new Date();      }     1、setInterval("test()", 1000);     2、setInterval(test, 1000);     3、setInterval(function() { test()
[ Javascript ] JavaScript中的定时器(Timer) 是如何工作的!
杨有梦的博客
07-11 6534
作为入门者来说，了解JavaScript中timer的工作方式是很重要的。通常它们的表现行为并不是那么地直观，而这是因为它们都处在一个单一线程中。让我们先来看一看三个用来创建以及操作timer的函数。 var id = setTimeout(fn, delay); - 初始化一个单一的timer，这个timer将会在一定延时后去调用指定的函数。这个函数（setTimeout）将返回一个唯
Phaserjs基础教程第七节：Time和Timer对象
DaveLeeCN的博客
01-25 2599
Javascript — timer 事件案例
weixin_42436355的博客
08-07 458
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus®"> <meta name="Author" content=""> <meta name="K...
关于Windows 9x的vmm32问题解决方法
最新发布
06-15
关于Windows 9x的vmm32问题解决方法
Linux下用sdcc开发51单片机，该示例是中断处理程序.zip
06-15
该资源内项目源码是个人的课程设计、毕业设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。 该资源内项目源码是个人的课程设计，代码都测试ok，都是运行成功后才上传资源，答辩评审平均分达到96分，放心下载使用！ ## 项目备注 1、该资源内项目代码都经过测试运行成功，功能ok的情况下才上传的，请放心下载使用！ 2、本项目适合计算机相关专业(如计科、人工智能、通信工程、自动化、电子信息等)的在校学生、老师或者企业员工下载学习，也适合小白学习进阶，当然也可作为毕设项目、课程设计、作业、项目初期立项演示等。 3、如果基础还行，也可在此代码基础上进行修改，以实现其他功能，也可用于毕设、课设、作业等。 下载后请首先打开README.md文件（如有），仅供学习参考, 切勿用于商业用途。
javascript内置对象
10-07
JavaScript内置对象是指在JavaScript语言中自带的一些对象，这些对象提供了一些常用的或者是最基本而必要的功能，包括Math、Date、Array、String等。其中，Math对象提供了数学相关的方法和属性，Date对象用于处理...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值