定时器
定时器在javascript中的作用
1、制作动画
2、异步操作
3、函数缓冲与节流
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
function myalert(){
alert('hello world!');
}
// 只执行一次的定时器,第一个参数是函数名，或者是匿名函数，第二个参数是时间，单位是毫秒，不写单位
//var timer01 = setTimeout(myalert,2000);
// 关闭只执行一次的定时器
//clearTimeout(timer01);
// 反复执行的定时器
//var timer02 = setInterval(myalert,1000); 改成下面匿名函数的写法：
var timer02 = setInterval(function(){
alert('hello world!');
},1000)
//关闭反复执行的定时器
//clearInterval(timer02);
</script>
</head>
<body>
</body>
</html>
定时器动画实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
var iLeft = 0;
/*
var timer = setInterval(moving,30);
function moving(){
iLeft += 3;
oDiv.style.left = iLeft + 'px';
}
*/
var timer = setInterval(function(){
iLeft += 3;
oDiv.style.left = iLeft + 'px';
if(iLeft>700)
{
clearInterval(timer);
}
},30);
}
</script>
<style type="text/css">
.box{
width:200px;
height:200px;
background-color:gold;
position:absolute;
left:0;
top:100px;
}
</style>
</head>
<body>
<div id="div1" class="box"></div>
</body>
</html>
无缝滚动
<!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 type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('slide');
var oBtn01 = document.getElementById('btn01');
var oBtn02 = document.getElementById('btn02');
//通过标签获取元素，获取的是选择集，加上下标才能获取到元素
var oUl = oDiv.getElementsByTagName('ul')[0];
var iLeft = 0;
var iSpeed = -2;
var iNowspeed = 0;
//将ul里面的内容复制一份，整个ul里面就包含了10个li
oUl.innerHTML = oUl.innerHTML + oUl.innerHTML;
function moving(){
iLeft += iSpeed;
// 当ul向左滚动到第5个li时，瞬间将整个ul拉回到初始位置
if(iLeft<-1000)
{
iLeft=0;
}
//当ul在起始位置往右滚动时候，瞬间将整个ul拉回到往左的第5个li的位置
if(iLeft>0)
{
iLeft = -1000;
}
oUl.style.left = iLeft + 'px';
}
var timer = setInterval(moving,30);
oBtn01.onclick = function(){
iSpeed = -2;
}
oBtn02.onclick = function(){
iSpeed = 2;
}
// 当鼠标移入的时候
oDiv.onmouseover = function(){
iNowspeed = iSpeed;
iSpeed = 0;
}
// 当鼠标移出的时候
oDiv.onmouseout = function(){
iSpeed = iNowspeed;
}
}
</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>
时钟
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
function fnTimego(){
var sNow = new Date();
// 获取年份
var iYear = sNow.getFullYear();
// 获取月份，月份是从0到11，0表示一月，11表示十二月
var iMonth = sNow.getMonth()+1;
var iDate = sNow.getDate();
// 星期是从0到6,0表示星期天
var iWeek = sNow.getDay();
var iHour = sNow.getHours();
var iMinute = sNow.getMinutes();
var iSecond = sNow.getSeconds();
var sTr = '当前时间是：'+ iYear + '年'+ iMonth + '月'+ iDate+'日 ' + fnToweek(iWeek) + ' ' +fnTodou(iHour) + ':' + fnTodou(iMinute) + ':' + fnTodou(iSecond);
oDiv.innerHTML = sTr;
}
// 刚开始调用一次，解决刚开始1秒钟空白的问题
fnTimego();
setInterval(fnTimego,1000);
function fnToweek(n){
if(n==0)
{
return '星期日';
}
else if(n==1){
return '星期一';
}
else if(n==2){
return '星期二';
}
else if(n==3){
return '星期三';
}
else if(n==4){
return '星期四';
}
else if(n==5){
return '星期五';
}
else{
return '星期六';
}
}
function fnTodou(n){
if(n<10)
{
return '0'+n;
}
else
{
return n;
}
}
}
</script>
<style type="text/css">
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>
<script type="text/javascript">
window.onload = function(){
var oDiv = document.getElementById('div1');
function fnTimeleft(){
//实际开发中需要读取后台的时间，可以通过ajax来读取
var sNow = new Date();
// 未来时间：4月30日晚24点
var sFuture = new Date(2022,3,30,24,0,0);
//计算还有多少秒
var sLeft = parseInt((sFuture-sNow)/1000);
//计算还剩多少天
var iDays = parseInt(sLeft/86400);
// 计算还剩多少小时
var iHours = parseInt((sLeft%86400)/3600);
// 计算还剩多少分
var iMinutes = parseInt(((sLeft%86400)%3600)/60);
// 计算还剩多少秒
var iSeconds = sLeft%60;
var sTr = '距离5月1日还剩：'+ iDays + '天' + fnTodou(iHours) + '时' + fnTodou(iMinutes) + '分'+ fnTodou(iSeconds) + '秒';
oDiv.innerHTML = sTr;
}
fnTimeleft();
setInterval(fnTimeleft,1000);
function fnTodou(n){
if(n<10)
{
return '0'+n;
}
else{
return n;
}
}
}
</script>
</head>
<style type="text/css">
div{
text-align:center;
font-size:30px;
color:pink;
}
</style>
<body>
<div id="div1"></div>
</body>
</html>
变量作用域
变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。
1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。
2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。
<script type="text/javascript">
//全局变量
var a = 12;
function myalert()
{
//局部变量
var b = 23;
alert(a);
alert(b);
}
myalert(); //弹出12和23
alert(a); //弹出12
alert(b); //出错
</script>
封闭函数
封闭函数是javascript中匿名函数的另外一种写法，创建一个一开始就执行而不用命名的函数。
封闭函数的好处
封闭函数可以创造一个独立的空间，在封闭函数内定义的变量和函数不会影响外部同名的函数和变量，可以避免命名冲突，在页面上引入多个js文件时，用这种方式添加js文件比较安全。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
/*
function myalert(){
alert('hello world!');
}
myalert();
转换成封闭函数的写法：
*/
/*(function(){
alert('hello world!');
})();*/
//封闭函数的第二种写法：
/*!function(){
alert('hello world!');
}();*/
~function(){
alert('hello world!');
}();
var iNum01 = 12;
function myalert02(){
alert('hello world!');
}
// 在封闭函数前加一个“;” , 可以避免js压缩时候出错。
(function(){
var iNum01 = 24;
function myalert02(){
alert('hello hello!');
}
alert(iNum01);
myalert02();
})();
alert(iNum01);
myalert02();
</script>
</head>
<body>
</body>
</html>
常用内置对象
1、document
document.getElementById //通过id获取元素
document.getElementsByTagName //通过标签名获取元素
document.referrer //获取上一个跳转页面的地址(需要服务器环境)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
// 存储上一个页面的地址：
//var sUrl = document.referrer;
var oBtn = document.getElementById('btn01');
oBtn.onclick = function(){
//window.location.href = sUrl;
window.location.href = "http://www.baidu.com";
}
}
</script>
</head>
<body>
<input type="button" name="" value="跳转" id="btn01">
</body>
</html>
2、location
window.location.href //获取或者重定url地址
window.location.search //获取地址参数部分
window.location.hash //获取页面锚点或者叫哈希值
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<a href="007window-location的属性02.html">链接到007页面</a><br><br>
<a href="8007window-location的属性02.html?aa=1">链接到金色背景007页面</a><br><br>
<a href="007window-location的属性02.html?aa=2">链接到绿色背景007页面</a>
<br><br>
<a href="007window-location的属性02.html?aa=3">链接到粉色背景007页面</a>
<br><br>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBody = document.getElementById('body01');
/*url中？号后边的值*/
var sData = window.location.search;
alert(sData);
/*url中#号后边的值*/
var sHash = window.location.hash;
alert(sHash);
if(sData!='')
{
var aRr = sData.split("=");
var iNum = aRr[1];
if(iNum==1)
{
oBody.style.backgroundColor = 'gold';
}
else if(iNum==2)
{
oBody.style.backgroundColor = 'green';
}
else
{
oBody.style.backgroundColor = 'pink';
}
}
}
</script>
</head>
<body id="body01">
<h1>007页面</h1>
</body>
</html>
3、Math
Math.random 获取0-1的随机数
Math.floor 向下取整
Math.ceil 向上取整
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
var iPi = Math.PI;
var arr = [];
for (var i=0;i<100;i++)
{
// Math.random 只能返回从0到1之间的随机数，不包括0，也不包括1
var iNum = Math.random();
arr.push(iNum);
}
//alert(arr);
console.log(arr);
//向下取整，去掉小数部分
alert(Math.floor(5.6)); // 弹出5
//向上取整，去掉小数部分，整体加1
alert(Math.ceil(5.2))
// 10 - 20 之间的随机数
var iN01 = 10;
var iN02 = 20;
var arr2 = [];
for(var i=0;i<40;i++)
{
// 生成从10到20的随机数
var iNum02 = Math.floor((iN02-iN01+1)*Math.random()) + iN01;
arr2.push(iNum02);
}
console.log(arr2);
</script>
</head>
<body>
</body>
</html>
调试程序的方法
1、alert
2、console.log
3、document.title
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<script type="text/javascript">
window.onload = function(){
var oBody = document.getElementById('body01');
var iNum01 = 12;
// alert 会阻止程序的运行
//alert(iNum01);
console.log(iNum01);
oBody.style.backgroundColor = 'gold';
var iNum02 = 24;
var iNum03 = 36;
//alert(iNum02);
console.log(iNum02);
setInterval(function(){
iNum03++;
//console.log(iNum03);
document.title = iNum03;
},100)
}
</script>
</head>
<body id="body01">
</body>
</html>