时钟/倒计时/变量的作用域/封闭函数

                                                时钟

<!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

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);

}

//此函数将星期的数字转为汉字表示

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;

}

}

//此函数将不足两位的数字前面补0

function toDouble(num){

if(num < 10){

return '0' + num;

}else{

return num;

}

}

</script>

</head>

<body>

<div id="box"></div>

</body>

</html>

..............................................................................................................................................................................

                                                   倒计时

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>倒计时</title>

<script type="text/javascript">

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;

}

}

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>

..............................................................................................................................................................................

                                            变量的作用域

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

局部变量:函数内部定义的变量,函数内部可以访问,外部无法访问。函数内部访问变量时,先在内部查找是否有此变量,如果有,就使用内部变量,如果没有,就去外部查找

函数内部如果不用'var'关键字定义变量,变量可能会变成全局变量,如果用严格模式解析会报错

..............................................................................................................................................................................

                                                    封闭函数

<script type="text/javascript">

/*原来的写法

function myAlert(){

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

alert(str);

}

myAlert();*/

var str = function(){

alert('test');

}

//封闭函数的一般写法

//封闭函数定义:(function(){……})()

/*

;;(function(){

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

alert(str);

})();//最后的()表示马上执行

*/

//封闭函数其他的写法:在匿名函数前加“!”或者“~”,之后加“()”

~function(){

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

alert(str);

}();

</script>

............................................................................................................................................................................

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 第一章: JS简介 从当初简单的语言,变成了现在能够处理复杂计算和交互,拥有闭包、匿名函数, 甚至元编程等...
    LaBaby_阅读 1,697评论 0 6
  • <!DOCTYPE html> 定时器弹框 .pop{ width: 400px; height: 300px; ...
    啊烟雨阅读 1,753评论 0 0
  • 100个常用的javascript函数 1、原生JavaScript实现字符串长度截取 复制代码代码如下: fun...
    老头子_d0ec阅读 368评论 0 0
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,695评论 1 45
  • Lua 5.1 参考手册 by Roberto Ierusalimschy, Luiz Henrique de F...
    苏黎九歌阅读 13,905评论 0 38