倒计时 - 简书

<!DOCTYPE html>

<head>

window.onload = function(){

var oDiv = document.getElementById('div1');

timeleft();

setinterval(timeleft,1000);

function titeleft(){

var noe = new Date();

var future = new Date(2019,,10,12,0,0,0);

// if(milli<=0){

// window.location.href=

// "http://www.baidu.com";

// }

}

var now = new Date();//服务器获取

var future = now Date(2019,10,12,0,0,0);

console.log(future-now);//1090977861

var milli = parseint((future-now) / 1000);

var day = parseint(milli/86400);//60*60*24

var hour = parseint((milli % 86400)/ 3600);

var minute = parseint((milli % 86400) %　3600)／　60；

var second = milli % 60;

oDiv.innerhtml =

距离2019年11月12日00时00分还有'+ day'+'天'+todoule(hour)+'时'+todoule(minute)+'分'+todoule(second)+'秒';

function todouble(num){

if(num < 10){

return '0' + num;

}else{

return num;

}

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>变量的作用域</title>

全局变量：函数外部定义的变量，函数内部和外部都可以访问，它的值可以共享

局部变量：函数内部定义的变量，函数内部可以访问，

外部无法访问。函数内部访问变量时，先在内部查找是否有此变量，如果有，

就使用内部变量，如果没有，就去外部查找

函数内部如果不用'var'关键字定义变量，

变量可能会变成全局变量，如果用严格模式解析会报错

var a = 12;

function aa(){

var a = 5;

alert(a);//就近5 //内部没有12

var b = 7;

alert(b);//7

c++;

alert(c);//11

d = 20;

alert (d);

}

aa();

alert(b);//局部变量访问不了

alert(c);//11

aalert(d);//20

// alert(a);//12

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

// function myAlert(){

// var str = '欢迎访问我的主页';

// alert(str);

// }

// myAlert();

var str = 'abc';

var str = function(){

alert('test');

}

// (function(){

// var str = '欢迎访问我的主页';

// alert(str);

// })();

// !function(){

// var str = '欢迎访问我的主页';

// alert(str);

// }();

~function(){

var str = '欢迎访问我的主页';

alert(str);

}();

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>闭包存循环的索引值</title>

li{

height: 30px;

background-color: gold;

margin-bottom: 10px;

}

</style>

//闭包的用途：存循环的索引值

window.onload = function(){

var aLi = document.getElementsByTagName('li');

for (var i = 0; i<aLi.length; i++) { //0---7

(function(j){

aLi[j].onclick = function(){

alert(j);

}

})(i);

// aLi[i].onclick = function(){

// alert(i);

// }

}

alert(aLi.length);

}

</script>

</head>

<body>

<ul>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>闭包做私有变量计数器</title>

//闭包的用途：私有变量计数器

var count = (function(){

var a = 0;

function bb(){

a++;

return a;

}

return bb;

})();

// var return = count();

// alert(re);

alert(count());

var re =count();

alert(re);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>单体创建对象</title>

var tom = {

name:'tom',

age:18,

showname:function(){

alert(this.name);

showname:function(){

alert(this.sge);

}

alert(Tom.name);

alert(Tom.age);

Tom.showname();

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

// var num = Math.random();

// alent(num);

var a = 10;

var b = 20;

var num = Math.random()*(b-a)+a;

alert(num);

var arr = [];

for(var i=0; i<20; i++){

var num = Math.floor(Math.random()*(b-a)+a);//20,15,19....

arr.push(num);

}

alert(arr);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>获取地址栏参数</title>

//......?name= tom&pwd=123

var data = window.location.search;

console.log(data);

var hash = window.location.hash;

console.log(hash);

var arr = data.split('=');

console.log(arr);

var name arr[1];

var span01 = document.getElementByid('span01');

span01.innerHTML = name;

</script>

</head>

<body>

<div>

欢迎<span id="span01"></span>访问我的主页</div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>闭包做选项卡</title>

.btns{

width: 500px;

height: 50px;

}

/*选项卡的样式*/

.btns input{

width: 100px;

height: 50px;

background-color: #ddd;/*默认灰色*/

color: #666;

border: 0px;

}

/*内容区的样式*/

.contents div{

width: 500px;

height: 300px;

background-color: gold;

display:none;

line-height: 300px;

text-align: center;

}

</style>

//闭包做选项卡

window.onload = function(){

var btns = document.getElementByid('btns').getElementsByTagName('input');

var contents = document.getElementsByid('contents')getElementsByTagName('div');

for(var i=0; j<btns.length; j++){

(function(x){

btns[x].onclick = function(){

for(var j=0; j<btns.length; j++){

btns[j].classname = '';

contents[j].classname = '';

}

this.classname = 'cur';

alert(x);//3

contents[x].classname = 'active';

}

})(i);

}

</script>

</head>

<body>

</div>

<div class="contents" id="">tab文字内容一</div>

<div>tab文字内容二</div>

<div>tab文字内容三</div>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>工厂模式创建对象</title>

function person(name,age,jod){

// var o= new object();

var o= {};

o.name = name;

o.age = age;

o.showname = function(){

alert(this.age);

}

o.showage = function(){

alert(this.age);

}

o.showage = function(){

alert(this.job);

}

return o;

}

var Tom = person('tom',18,'程序员');

Tom,shoujob();

var Tom = person('jack',19,'功程师');

Tom,shoujob();

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

function Person(name,age,job){

this.name = name;

this.age -= age;

this.job = job;

this.showname = function(){

alert(this.age);

}

this.showage = function(){

alert(this.age);

}

this.showjob = function(){

alert(this.age);

}

var body new Person('bob',18,'产品网');

bob.showjob();

var alex = new Person('alex',19,'运鹰苗');

alex.showjob();

//false

console.log(bob.showjob == alex.showjob);

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

function Person(name,age,job){

this.name = name;

this.age = age;

this.job = job;

}

Person.prototype.showname = function(){

alert(this.name);

}

Person.prototype.showname = function(){

alert(this.age);

}

Person.prototype.showname = function(){

alert(this.job);

}

var lucy = new per showname('lucy',18,'猪');

lucy.showjob = function(){

alert('我的工作是:'+ this.job);

}

var lucy = new per showname('lily',19,'猪');

lucy.showjob();

//true

console.log(lucy,showjob == lily.showjob);

</script>

</head>

<body>

</body>

</html>