目录
一、定时器
1.基本使用
只执行一次的定时器：setTimeout clearTimeout(引用)
反复执行定时器时器：setInterval clearINterval(引用)
2.实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function fnMyalert(){
alert('Hello world!');
}
var oTime = setTimeout(fnMyalert,2000);//只执行一次的定时器setTimeout(函数名称,t时间)时间单位ms.运行效果网页打开经过tms后执行函数
clearTimeout(oTime)//关闭一次性计时器。效果在函数执行之前就把他他停止了。
</script>
</head>
<body>
</body>
</html>
<!--
定时器作用
1.制作动画
2.异步操作
3.函数缓冲与节流
只执行一次的定时器：setTimeout clearTimeout()
反复执行定时器时器：setInterval
--><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function fnMyalert(){
alert("Hello World!");
}
var time02 = setInterval(fnMyalert,1000);//反复执行计时器
var time02 = setInterval(function(){alert('hello'),2000});//使用匿名函数来作用定时器
clearInterval(time02);//关闭反复执行的定时器
</script>
</head>
<body>
</body>
</html>
<!--
反复执行定时器时器：setInterval
-->3.解析
a.setTimeout 和clearTimeout
对于setTimeout(a,b)方法需要输入两个参数，分别为函数名，执行时间(ms)。
如本程序的var oTime = setTimeout(fnMyalert,2000);设置一个一次性定时器（使用一次就报废了）。执行效果为等待2000ms即2s后执行一次fnMyalert()函数。
对于 clearTimeout(a)方法需要输入一个参数，为停止所需停止的定时器的名字。
如本程序clearTimeout(oTime),oTime为一个变量指向定时器。执行效果为在setTimeout()设置的时间之前把其停止，相当于最后没有输出。
b. setInterval和clearINterval
对于setInterval(a,b)方法的两个参数为需重复执行的函数名以及每次之间间隔的时间距离。
如本程序var time02 = setInterval(fnMyalert,1000);先等1s然后开始第一次执行函数，此后每次间隔一秒进行执行函数。
clearInterval(time02);参数为储存所停止的定时器的变量，运行效果为函数执行直接停止。
c.拓展使用匿名函数作用定时器
对于第二段代码
var time02 = setInterval(function(){alert('hello'),2000});//使用匿名函数来作用定时器
相当于将定义函数和调用步骤直接合并在一起
4.案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var oDiv=document.getElementById('div1');
var iLeft=0;
var iSpeed=15;
/* function fnMove(){
iLeft+=9;
oDiv.style.left =iLeft+'px';
if(iLeft>=1695.2){
clearInterval(oTime1);
} */
var oTime1 = setInterval(function(){
iLeft+=iSpeed;
oDiv.style.left =iLeft+'px';
if(iLeft>1695.2||iLeft<=0)
{
iSpeed=-iSpeed;
//clearInterval(oTime1);
}
},30);//经验数据30ms动一次
}
</script>
<style>
.box{
width: 200px;
height: 200px;
background-color: pink;
position: absolute;
left: 0px;
top: 100px;
}
</style>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
代码实现了由反复定时器控制方块实现左右移动
二、谈谈变量
1.全局变量和局部变量
变量作用域
全局变量：在函数之外定义，为整个页面公用，函数内外部都可以访问。在函数内部不止可以访问还可以进行变量的改变。此时内部的改动全部变。
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
var a=1;
var a=9;
最后前面的值会覆盖后面的值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var iNum01=12;
function fnNum(){
iNum01+=24;
alert(iNum01);//36
}
fnNum();
alert(iNum01);//36
</script>
</head>
<body>
</body>
</html>
<!--
变量作用域
全局变量：在函数之外定义，为整个页面公用，函数内外部都可以访问。在函数内部不止可以访问还可以进行变量的改变。此时内部的改动全部变。
局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
var a=1;
var a=9;
最后前面的值会覆盖后面的值
-->对于局部变量来说比较正常，值得注意的是，如果在一个函数访问全局变量可以访问到，如果在函数里面对全局变量进行修改重新赋值是可以的！
2.拓展封闭函数
前面说到函数里面可以随意访问并改变全局变量，这样就会有很大的安全隐患：如全局定义了这个变量，我们在函数里面也定义这个变量并赋值，这样就会导致全局变量的覆盖，如果是无意为之这个是很可怕的哦。
那么如何在函数里面定义一个独有的空间，从而避免这样的现象呢？-------使用封闭函数
a.封闭函数的定义
封闭函数
(function(){
alert("Hello World!");
})();//直接调用,匿名函数定义()=直接调用
封闭函数第二种写法
!function(){
alert("hello");
}();下面也行
~function(){
alert("hello");
}();
b.使用
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//封闭函数的作用，开启一个独立的空间，里面的变量与外界隔离
(function(){
//alert("Hello World!");
})();
var iNUm01=12;
function myalert(){
alert('hello');
}
(function(){
var iNum01 = 24;
function myalert(){
alert("he");
}
alert("函数里面"+iNum01);//24
myalert();//he
})();
alert("函数外面"+iNUm01);//12
myalert();//hello
</script>
</head>
<body>
</body>
</html>
<!--
封闭函数
(function(){
alert("Hello World!");
})();//直接调用,匿名函数定义()=直接调用
封闭函数第二种写法
!function(){
alert("hello");
}();
~function(){
alert("hello");
}();
-->上面的代码在全局定义了一个函数和变量，在封闭函数里面定义了一样的函数和代码，最后的弹框说明封闭函数定义的函数、变量和外部的函数、变量直接互相不干扰。
三、小应用——无缝滚动
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无缝滚动</title>
<style type="text/css">
*{
margin:0;
padding:0;
}
.list_con{
width:1000px;
height:200px;
border:1px solid #000;
margin:10px auto 0;
background-color:#f0f0f0;
position:relative;
overflow:hidden;
}
.list_con ul{
list-style:none;
width:2000px;
height:200px;
position:absolute;
left:0;
top:0;
}
.list_con li{
width:180px;
height:180px;
float:left;
margin:10px;
}
.btns_con{
width:1000px;
height:30px;
margin:50px auto 0;
position:relative;
}
.left,.right{
width:30px;
height:30px;
background-color:gold;
position:absolute;
left:-40px;
top:124px;
font-size:30px;
line-height:30px;
color:#000;
font-family: 'Arial';
text-align:center;
cursor:pointer;
border-radius:15px;
opacity:0.5;
}
.right{
left:1010px;
top:124px;
}
</style>
<script>
window.onload=function(){
var iSpeed=-2;
var iLeft = 0;
var oDiv = document.getElementById('slide');//div元素
var oUl = oDiv.getElementsByTagName('ul')[0];//选择改div下面的ul作为一个选择集，即通过getElementsByTagName生成的一定是一个列表选择集，
//本次生成的为只有一个元素的选择集[ul],通过[0]将ul这个元素取出来
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
var sInner=oUl.innerHTML;
var temp=0;
oUl.innerHTML+=sInner;//复制一份
function fnMove(){
iLeft+=iSpeed
oUl.style.left=iLeft+'px';
if(iLeft<-1000){
iLeft=0;
}
else if(iLeft>0){
iLeft=-1000;
}
}
var oTime=setInterval(fnMove,30);
oBtn01.onclick = function(){
iSpeed=-2;
}
oBtn02.onclick = function(){
iSpeed=2;
}
//鼠标在那个上面的时候
oDiv.onmouseover=function(){
temp=iSpeed;
iSpeed=0;
}
oDiv.onmouseout=function(){
iSpeed=temp;
}
}
</script>
</head>
<body>
<div class="btns_con">
<div class="left" id="btn01"><</div>
<div class="right" id="btn02">></div>
</div>
<div class="list_con" id="slide">
<ul>
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
</ul>
</div>
</body>
</html>
<!--
alert(oUl1.innerHTML);
<li><a href=""><img src="images/goods001.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods002.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods003.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods004.jpg" alt="商品图片"></a></li>
<li><a href=""><img src="images/goods005.jpg" alt="商品图片"></a></li>
-->对于人来说一瞬间将画面的切换只要搭配好就不会被人眼发现
四、动态时钟应用
var sNow=new Date();//Wed Oct 26 2022 21:03:37 GMT+0800 (中国标准时间)
new Date()从电脑系统读取时间把它用一个变量接收
var iYear = sNow.getFullYear();//年份
var iMonth = sNow.getMonth()+1;//月份从0-11
var iDate = sNow.getDate();//日
var iWeek = sNow.getDay();//星期0-6星期天为0
var iHour = sNow.getHours();//时
var iMinu = sNow.getMinutes();//分
var iSecond = sNow.getSeconds();//秒分别读取年月日时分秒
需要注意的是月份是从0-11来算，故显示的时候记得+1
星期日为0这个也需要注意一下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
function fnTime(){
var oDiv=document.getElementById('div1');
var sNow=new Date();//Wed Oct 26 2022 21:03:37 GMT+0800 (中国标准时间)
var iYear = sNow.getFullYear();//年份
var iMonth = sNow.getMonth()+1;//月份从0-11
var iDate = sNow.getDate();//日
var iWeek = sNow.getDay();//星期0-6星期天为0
var iHour = sNow.getHours();//时
var iMinu = sNow.getMinutes();//分
var iSecond = sNow.getSeconds();//秒
switch(iWeek){
case 0:
iWeek="日";
break;
case 1:
iWeek="一";
break;
case 2:
iWeek="二";
break;
case 3:
iWeek="三";
break;
case 4:
iWeek="四";
break;
case 5:
iWeek="五";
break;
case 6:
iWeek="六";
break;
}
var sTr="当前时间为："+iYear+"年"+fnTodou(iMonth)+"月"+fnTodou(iDate)+"日 "+"星期"+iWeek+" "+fnTodou(iHour)+":"+fnTodou(iMinu)+":"+fnTodou(iSecond);
oDiv.innerHTML=sTr;
}
function fnTodou(n){
if (n>=10){
return n;
}
else{
return "0"+n;
}
}
fnTime();//刚开始调用一次解决刚开始空白的问题；
setInterval(fnTime,10);//等500ms再调用函数
}
</script>
<style>
div{
text-align: center;
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html>实现星期0-6到汉字型一到日的转化
switch(iWeek){
case 0:
iWeek="日";
break;
case 1:
iWeek="一";
break;
case 2:
iWeek="二";
break;
case 3:
iWeek="三";
break;
case 4:
iWeek="四";
break;
case 5:
iWeek="五";
break;
case 6:
iWeek="六";
break;
}
函数实现输出的为两位数这样更好看
function fnTodou(n){
if (n>=10){
return n;
}
else{
return "0"+n;
}
}
五、双十一倒计时
设置未来时间2022年11.11日 0时0分0秒方法
//未来时间2022年11月10日24时0分0秒；
var sFuture = new Date(2022,10,10,24,0,0);
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
function fnTo(){
var oDiv = document.getElementById('div1');
var sNow = new Date();//实际开发中读取后台时间
//未来时间2022年11月10日24时0分0秒；
var sFuture = new Date(2022,10,10,24,0,0);
//alert(sFuture-sNow);//1266866862毫秒
var sLeft=parseInt((sFuture-sNow)/1000);//得出秒，并将秒之下的直接截断
//alert(sLeft);//1266610秒
//一天多少秒86400
var iDay = parseInt(sLeft/86400);//计算还剩多少天
//alert(iDay);14
var iHour = parseInt((sLeft%86400)/3600)//多少小时
//alert(iHour);//15
var iMu = parseInt(((sLeft%86400)%3600)/60);//多少分
var iSeconds = sLeft%60//计算还剩多少秒
var sTr = "距离双十一还剩: "+iDay+"天"+fnTodu(iHour)+"时"+fnTodu(iSeconds)+"秒";
oDiv.innerHTML=sTr;
}
function fnTodu(n){
if(n<10){
return "0"+n;
}
else{
return n;
}
}
setInterval(fnTo,10);
}
</script>
<style>
div{
text-align: center;
font-size: 30px;
color: pink;
}
</style>
</head>
<body>
<div id="div1"></div>
</body>
</html> 
六、弹框事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style type="text/css">
.menu{
height:80px;
background-color:gold;
position:fixed;
width:960px;
top:0px;
left:50%;
margin-left:-480px;
}
p{
text-align:center;
}
.popup{
width:500px;
height:300px;
border:1px solid #000;
background-color:#fff;
position:fixed;
left:50%;
margin-left:-251px;
top:50%;
margin-top:-151px;
z-index:9999;
}
.popup h2{
background-color:gold;
margin:10px;
height:40px;
}
.mask{
position:fixed;
width:100%;
height:100%;
background-color:#000;
left:0;
top:0;
opacity:0.5;
z-index:9998;
}
.pop_con{
display:none;
}
</style>
<script type="text/javascript">
window.onload=function(){
var oDiv = document.getElementById('div');
var oBtn = document.getElementById('btn');
var oP = document.getElementById('p');
var i=5;
var iSt="";
oBtn.onclick=function(){
oDiv.style.display='block';
var Time = setInterval(function(){
i--;
iSt="还有"+i+"秒关闭弹框";
oP.innerHTML=iSt;
if(i==0){
oDiv.style.display='none';
clearInterval(Time);
iSt="还有5秒关闭弹框";
oP.innerHTML=iSt;
i=5
}
},1000);
}
}
</script>
</head>
<body>
<div class="menu">菜单文字</div>
<div class="pop_con" style="display: none" id="div">
<div class="popup">
<h2>弹框的标题</h2>
<br>
<br>
<br>
<p id="p">还有5秒关闭弹框</p>
</div>
<div class="mask"></div>
</div>
<input type="button" value="弹出弹框" id="btn">
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
<p>网页文字</p>
<br />
<br />
<br />
<br />
<br />
<br />
<br />
</body>
</html>
七、常用内置函数
1、document
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)2、location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
<!--
1、document
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)
2、location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值
-->1.window.location.href
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){{
var oBtn = document.getElementById('btn01');
//var sUrl = document.referrer;//存储上次页面的地址 需要服务器才行
oBtn.onclick=function(){
//window.location.href=sUrl;
window.location.href="https://www.baidu.com";//跳转到百度
}
}}
</script>
</head>
<body>
<input type="button" value="跳转" id="btn01">
</body>
</html>
<!--
window-location属性
-->运行结果点击跳转按钮实现页面跳转
2.window.location.search
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
window.onload=function(){
var oBody=document.getElementById('body01');
//参数?a=2#12
var sData = window.location.search;//获取链接后面的参数?a=2
var sHash = window.location.hash;//获取链接参数字符串的以#开始以及后面的字符串#2
alert(sHash);//#2
alert(sData);//?a=2
if(sData!=""){
var aRr = sData.split("=");
var iNum = aRr[1];
if(iNum==1){
oBody.style.backgroundColor="pink";
}
else if(iNum==2){
oBody.style.backgroundColor="#666";
}
}
}
</script>
</head>
<body id="body01">
</body>
</html>//参数?a=2#12
var sData = window.location.search;//获取链接后面的参数?a=2
var sHash = window.location.hash;//获取链接参数字符串的以#开始以及后面的字符串#2
八、Math对象
Math.random(）生成0-1之间包括0但不包括1之间的随机数
Math.floor(5.6);//5向下取整，去掉小数部分
Math.ceil(5.6);//6向上取整，去掉小数部分加一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
//var ipi = Math.PI;
//alert(ipi);//3.1415....
//var iNum = Math.random();//返回一个从0-1的随机数不包括1
//console.log(iNum)//把iNum在控制台打出
//Math.floor(5.6);//5向下取整，去掉小数部分
//Math.ceil(5.6);//6向上取整，去掉小数部分加一
//10-20之间的随机数
var iNum01 = 10;
var iNum02=20;
var arr1=[];
for(var i=0;i<30;i++){
var iNum = Math.floor((iNum02-iNum01)*Math.random())+iNum01;//10-19因为随机数0-1不包括1
var iNum = Math.floor((iNum02-iNum01+1)*Math.random())+iNum01;//满足10-20包括10和20；
arr1.push(iNum);
}
console.log(arr1);
</script>
</head>
<body>
</body>
</html>var iNum = Math.floor((20-10+1)*Math.random())+10;生成随机数[10,20]
九、调试程序的三种方式
alert阻止函数的运行,先卡在那
console.log(变量)最后在程序控制会弹出他
console控制台可以写代码很强大，但是访问的只能是全局变量而不是局部变量，如果想访问局部变量则使用console.log()
document.title=值；也可以在标题处看值包起来
1.alert()
以弹框形式将特定值弹出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var i=0;
alert(0)
</script>
</head>
<body>
</body>
</html>
2.console.log()
在浏览器控制台将值弹出
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var i=0;
console.log(0);
</script>
</head>
<body>
</body>
</html>
3.document.title()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
var i=0;
document.title=i;
</script>
</head>
<body>
</body>
</html>
十、总结
至此javascrip原生内容完毕，嗨嗨嗨
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
