月份排序 0-11 所以需要+1
范围是0-6 星期日为第一天 星期日为0
innerHTML 属性获取或插入内容
parseInt 取整
location设置页面跳转
window.onload = function(){
//活动第二天要将页面下线,跳转到其它页面,不会走后面的代码
// window.location.href = "http://www.baidu.com";
var oDiv = document.getElementById('div1');
function timeLeft(){
//实际开发中此时间从服务器获取,避免客户端调整时间
var now = new Date();
var future = new Date(2018,5,20,16,30,20);
// alert(future - now);//弹出与当前时间相差的毫秒数:12469935436
var milli = parseInt((future - now)/1000);
//活动当天页面下线,避免倒计时到点后继续计负时
// if(milli <= 0){
// //页面跳转,不执行下面的代码了
// window.location.href = "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 = '距离2018年11月12日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;
}
全局变量:
函数外部定义的变量,函数内部和外部都可以访问,它的值可以共享
局部变量:
函数内部定义的变量,函数内部可以访问,外部无法访问。访问变量时,在内部查找是否有此变量,有就使用内部变量,没有就去外部查找
函数内部如果不用'var'关键字定义变量,变量可能会变成全局变量,如果用严格模式解析会报错
//封闭函数的一般写法
//封闭函数定义:(function(){……})()
/*
;;(function(){
var str = '欢迎访问我的主页';
alert(str);
})();//最后的()表示马上执行
*/
//封闭函数其他的写法:
在匿名函数前加“!”或者“~”,之后加“()”
~function(){
var str = '欢迎访问我的主页';
alert(str);
}();
用变量的方式定义函数
/*
原来的写法:可以提前
myAlert();
function myAlert(){
alert('hello!');
}*/
//函数用变量方式定义:先定义再使用
// myalert();//提前会报错
var myAlert = function(){
alert('hello!');
}
myAlert();//放在下面可以执行
闭包
闭包的本质就是函数嵌套,就是在函数里面定义函数
内部函数可以引用外部函数的参数和变量
参数和变量不会被垃圾回收机制给回收
闭包的用途:可以存循环的索引值、做私有变量计数器
//闭包的用途:存循环的索引值
闭包做私有变量计时器
闭包做选项卡
.btns{
width: 500px;
height: 50px;
}
/*选项卡的样式*/
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;/*默认灰色*/
color: #666;
border: 0px;
}
/*被选中的选项卡的样式*/
.btns input.cur{
background-color: gold;
}
/*内容区的样式*/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/*默认隐藏*/
line-height: 300px;
text-align: center;
}
/*被选中的内容区的样式*/
.contents div.active{
display: block;
}
</style>
<script type="text/javascript">
//闭包做选项卡
window.onload = function(){
var aBtn = document.getElementById('btns').getElementsByTagName('input');
var aCon = document.getElementById('contents').getElementsByTagName('div');
// alert(aCon.length);
//循环所有的选项卡按钮
for(var i=0; i<aBtn.length; i++){
(function(i){
//给每个选项卡按钮添加点击事件
aBtn[i].onclick = function(){
//遍历所有选项卡按钮
for(var j=0; j<aBtn.length; j++){
//将每个选项卡按钮都设为灰色
aBtn[j].className = '';
//将每个内容区都隐藏
aCon[j].className = '';
}
//this代表当前点击的Button对象
this.className = 'cur';//当前点击的按钮为金色
// alert(i);//不加闭包时,不管点哪个按钮,i都等于3
//加闭包保存了索引值才有效
aCon[i].className = 'active';//当前点击的按钮对应的内容显示
}
})(i);
}
}
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
<div class="active">tab文字内容一</div>
<div>tab文字内容二</div>
<div>tab文字内容三</div>
跳转的原页面
内置对象
document
document.referrer //获取上一个跳转页面的地址
location
window.location.href //获取或者重定url地址
window.location.search//获取地址参数部分
window.location.hash//获取页面错点或者叫哈希值
math
Math.random 获取0-1的随机数
Math.floor向下取整
Math.ceil 向上取整
获取地址栏参数
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>
math
// var num = Math.random();
// alert(num);//弹出0-1之间的随机数
var a = 1;
var b = 17;
// var num = Math.random()*(b-a)+a;
// alert(num);//弹出10-20之间的随机数
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);//生成一个数就放进数组
}
alert(arr);//17,20,20,11,11,19,17,16,10,11,16,11,18,13,13,11,17,14,19,19