demo1時鐘
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>時鐘</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);//彈出美式時間：Wed Jun 20 2018 15:27:13 GMT+0800 (中國標準時間)
var year = now.getFullYear();//2018年
var month = now.getMonth() + 1;//6月彈出5//范圍0-11 使用+1
var date = now.getDate();//20號
var week = now.getDay();//3//星期幾，西半球時間，范圍0-6，星期日為一周的第一天，為0
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
// alert(hour + ":" + minute + ":" + second);//15:33:9
oBox.innerHTML = '當前時間是：' + 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ù)字前面補0
function toDouble(num){
if(num < 10){
return '0' + num;
}else{
return num;
}
}
</script>
</head>
<body>
<div id="box"></div>
</body>
</html>
demo2倒計時
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>倒計時</title>
<script type="text/javascript">
window.onload = function(){
//活動第二天要將頁面下線，直接跳轉(zhuǎn)到其它頁面，不會走后面的代碼了
// window.location.href = "[圖片上傳失敗...(image-797ae-1560395539516)]
http://www.baidu.com";
var oDiv = document.getElementById('div1');
function timeLeft(){
//實際開發(fā)中此時間從服務器獲取，避免客戶端調(diào)整時間
var now = new Date();
var future = new Date(2019,8,2,0,0,0);
// alert(future - now);//彈出與當前時間相差的毫秒數(shù)：12469935436
var milli = parseInt((future - now)/1000);
//活動當天頁面下線，避免倒計時到點后繼續(xù)計負時
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時00分00秒還有' + day + '天' + toDouble(hour) + '時' + 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)部訪問變量時，先在內(nèi)部查找是否有此變量，如果有，就使用內(nèi)部變量，如果沒有，就去外部查找。
函數(shù)內(nèi)部如果不用‘var’關鍵字定義變量，變量可能會變成全局變量，如果用嚴格模式解析會報錯。
封閉函數(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();//提前會報錯
var myAlert = function(){
alert('hello!');
}
myAlert();//放在下面可以執(zhí)行
</script>
</head>
<body>
</body>
</html>
閉包
閉包的本質(zhì)就是函數(shù)嵌套，就是在函數(shù)里面定義函數(shù)，內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量，參數(shù)和變量不會被垃圾回收機制給回收。
閉包的用途：可以存循環(huán)的索引值，做私有變量計數(shù)器。
例：
閉包的一般寫法
function aa(b){
var a = 12;
function bb(){
alert(a);
alert(b);
}
return bb;
}
//cc全局變量不會被垃圾回收
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);//每個li都彈出8，因為點擊時循環(huán)已完畢，i最后為8
}
*/
(function(k){//這里的k是形參
aLi[k].onclick = function(){
alert(k);//彈出每個li的索引值
}
})(i);//這里的i是實參
}
}
</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)置對象
1、document
document.referrer //獲取上一個跳轉(zhuǎn)頁面的地址(需要服務器環(huán)境)
2、location
window.location.href //獲取或者重定url地址
window.location.search //獲取地址參數(shù)部分
window.location.hash //獲取頁面錨點或者叫哈希值
3、Math
Math.random 獲取0-1的隨機數(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之間的隨機數(shù)
var a = 10;
var b = 20;
// var num = Math.random()*(b-a)+a;
// alert(num);//彈出10-20之間的隨機數(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);//生成一個數(shù)就放進數(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>
