demo1時(shí)鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時(shí)鐘</title>
<style type="text/css">
</style>
<script type="text/javascript">
window.onload = function(){
var oBox = document.getElementById('box');
function timeGo(){
var now = new Date();
// alert(now);//彈出美式時(shí)間:Wed Jun 20 2018 15:27:13 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間)
var year = now.getFullYear();//2018年
var month = now.getMonth() + 1;//6月彈出5//范圍0-11 使用+1
var date = now.getDate();//20號(hào)
var week = now.getDay();//3//星期幾制恍,西半球時(shí)間,范圍0-6惊畏,星期日為一周的第一天,為0
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// alert(hour + ":" + minute + ":" + second);//15:33:9
oBox.innerHTML = '當(dāng)前時(shí)間是:' + year + '年' + toDouble(month) + '月' + toDouble(date) + '日 ' + toWeek(week) + ' ' + toDouble(hour) + ":" + toDouble(minute) + ":" + toDouble(second);
}
timeGo();
setInterval(timeGo, 1000);
}
//此函數(shù)將星期的數(shù)字轉(zhuǎn)為漢字表示
function toWeek(num){
switch(num){
case 0:
return '星期天';
break;
case 1:
return '星期一';
break;
case 2:
return '星期二';
break;
case 3:
return '星期三';
break;
case 4:
return '星期四';
break;
case 5:
return '星期五';
break;
case 6:
return '星期六';
break;
}
}
//此函數(shù)將不足兩位的數(shù)字前面補(bǔ)0
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
demo2倒計(jì)時(shí)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計(jì)時(shí)</title>
<script type="text/javascript">
window.onload = function(){
//活動(dòng)第二天要將頁面下線,直接跳轉(zhuǎn)到其它頁面司训,不會(huì)走后面的代碼了
// window.location.href = "[圖片上傳失敗...(image-797ae-1560395539516)]
http://www.baidu.com";
var oDiv = document.getElementById('div1');
function timeLeft(){
//實(shí)際開發(fā)中此時(shí)間從服務(wù)器獲取,避免客戶端調(diào)整時(shí)間
var now = new Date();
var future = new Date(2019,8,2,0,0,0);
// alert(future - now);//彈出與當(dāng)前時(shí)間相差的毫秒數(shù):12469935436
var milli = parseInt((future - now)/1000);
//活動(dòng)當(dāng)天頁面下線液南,避免倒計(jì)時(shí)到點(diǎn)后繼續(xù)計(jì)負(fù)時(shí)
if(milli <= 0){
http://www.baidu.com";
}
var day = parseInt(milli / 86400);
var hour = parseInt(milli % 86400 / 3600);
var minute = parseInt(((milli % 86400) % 3600) / 60);
var second = milli % 60;
oDiv.innerHTML = '距離2019年08月02日00時(shí)00分00秒還有' + day + '天' + toDouble(hour) + '時(shí)' + toDouble(minute) + '分' + toDouble(second) + '秒';
}
timeLeft();
setInterval(timeLeft, 1000);
}
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="div1"></div>
</body>
</html>
變量的作用域
全局變量:
函數(shù)外部定義的變量壳猜,函數(shù)內(nèi)部和外部都可以訪問,它的值可以共享滑凉。
局部變量:
函數(shù)內(nèi)部定義的變量统扳,函數(shù)內(nèi)部可以訪問,外部無法訪問譬涡。函數(shù)內(nèi)部訪問變量時(shí)闪幽,先在內(nèi)部查找是否有此變量,如果有涡匀,就使用內(nèi)部變量盯腌,如果沒有,就去外部查找陨瘩。
函數(shù)內(nèi)部如果不用‘var’關(guān)鍵字定義變量腕够,變量可能會(huì)變成全局變量,如果用嚴(yán)格模式解析會(huì)報(bào)錯(cuò)舌劳。
封閉函數(shù)
例子:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>封閉函數(shù)</title>
<script type="text/javascript">
/*原來的寫法
function myAlert(){
var str = '歡迎訪問我的主頁';
alert(str);
}
myAlert();*/
var str = function(){
alert('test');
}
//封閉函數(shù)的一般寫法
//封閉函數(shù)定義:(function(){……})()
/*
;;(function(){
var str = '歡迎訪問我的主頁';
alert(str);
})();//最后的()表示馬上執(zhí)行
*/
//封閉函數(shù)其他的寫法:在匿名函數(shù)前加“帚湘!”或者“~”,之后加“()”
~function(){
var str = '歡迎訪問我的主頁';
alert(str);
}();
</script>
</head>
<body>
</body>
</html>
用變量的方式定義函數(shù)
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用變量的方式定義函數(shù)</title>
<script type="text/javascript">
/*
原來的寫法:可以提前
myAlert();
function myAlert(){
alert('hello!');
}*/
//函數(shù)用變量方式定義:先定義再使用
// myalert();//提前會(huì)報(bào)錯(cuò)
var myAlert = function(){
alert('hello!');
}
myAlert();//放在下面可以執(zhí)行
</script>
</head>
<body>
</body>
</html>
閉包
閉包的本質(zhì)就是函數(shù)嵌套甚淡,就是在函數(shù)里面定義函數(shù)大诸,內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量,參數(shù)和變量不會(huì)被垃圾回收機(jī)制給回收。
閉包的用途:可以存循環(huán)的索引值资柔,做私有變量計(jì)數(shù)器焙贷。
例:
閉包的一般寫法
function aa(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
}
//cc全局變量不會(huì)被垃圾回收
var cc = aa(24);*/
//閉包的封閉函數(shù)寫法
var cc = (function(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
})(24);
cc();
/*
//只能調(diào)用一次的閉包
(function(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
})(24)();
閉包存循環(huán)的索引值
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>閉包存循環(huán)的索引值</title>
<style type="text/css">
li{
height: 30px;
background-color: gold;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
//閉包的用途:存循環(huán)的索引值
window.onload = function(){
var aLi = document.getElementsByTagName('li');
// alert(aLi.length);//8
for(var i=0; i<aLi.length; i++){
/*
aLi[i].onclick = function(){
alert(i);//每個(gè)li都彈出8,因?yàn)辄c(diǎn)擊時(shí)循環(huán)已完畢贿堰,i最后為8
}
*/
(function(k){//這里的k是形參
aLi[k].onclick = function(){
alert(k);//彈出每個(gè)li的索引值
}
})(i);//這里的i是實(shí)參
}
}
</script>
</head>
<body>
<ul>
<li>1</li>
<li>2<</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
內(nèi)置對(duì)象
1辙芍、document
document.referrer //獲取上一個(gè)跳轉(zhuǎn)頁面的地址(需要服務(wù)器環(huán)境)
2、location
window.location.href //獲取或者重定url地址
window.location.search //獲取地址參數(shù)部分
window.location.hash //獲取頁面錨點(diǎn)或者叫哈希值
3羹与、Math
Math.random 獲取0-1的隨機(jī)數(shù)
Math.floor 向下取整
Math.ceil 向上取整
獲取地址參數(shù)
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>獲取地址欄參數(shù)</title>
<script type="text/javascript">
window.onload = function(){
//url故硅?aa=tom#12
var data = window.location.search;//?aa=tom
var hash = window.location.hash;//#12
alert(hash);//#12
var oSpan = document.getElementById('span01');
// alert(data);//纵搁?aa=tom
var arr = data.split('=');
// alert(arr);/aa,tom
var name = arr[1];
oSpan.innerHTML = name;
}
</script>
</head>
<body>
<div>歡迎<span id="span01"></span>訪問我的主頁</div>
</body>
</html>
math
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Math</title>
<script type="text/javascript">
// var num = Math.random();
// alert(num);//彈出0-1之間的隨機(jī)數(shù)
var a = 10;
var b = 20;
// var num = Math.random()*(b-a)+a;
// alert(num);//彈出10-20之間的隨機(jī)數(shù)
var arr = [];
for(var i=0; i<20; i++){
// var num = Math.floor(Math.random()*(b-a)+a);//向下取整吃衅,10-19
var num = Math.floor(Math.random()*(b-a + 1)+a);//向下取整,10-20
arr.push(num);//生成一個(gè)數(shù)就放進(jìn)數(shù)組
}
alert(arr);//17,20,20,11,11,19,17,16,10,11,16,11,18,13,13,11,17,14,19,19
</script>
</head>
<body>
</body>
</html>