getminutes函数python举例_Python笔记:JavaScript 9.6——定时器和变量作用域

一、定时器

(一)定时器在javascript中的作用

1、制作动画

2、异步操作

3、函数缓冲与节流

(二)定时器类型及语法

/*

定时器：

setTimeout 只执行一次的定时器

clearTimeout 关闭只执行一次的定时器

setInterval 反复执行的定时器

clearInterval 关闭反复执行的定时器

*/

var time1 = setTimeout(myalert,2000);

var time2 = setInterval(myalert,2000);

/*

clearTimeout(time1);

clearInterval(time2);

*/

function myalert(){

alert('ok!');

}

setTimeout和setInvertal中第一个参数是函数名或者匿名函数，第二个参数是时间，单位ms。

(三)课堂练习

1、定时器制作移动动画

Document

window.onload = function(){

// 获取div

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

// 初始化iLeft

var iLeft = 0;

// 运动函数

function fnMoving(){

// 每moving一次iLeft+2

iLeft += 2;

// 将iLeft加上px赋给div的left属性

oDiv.style.left = iLeft + "px";

// 当left大于700时关闭定时器，停止移动

if(iLeft>700){

clearInterval(timer);

}

}

// 设置反复执行定时器

var timer = setInterval(fnMoving, 30);

}

.box{

width: 200px;

height: 200px;

background-color: gold;

position: absolute;

left: 0;

top: 100px;

}

效果：

2、时钟

window.onload = function(){

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

function fnTimego(){

var sNow = new Date();

// 年份

var iYear = sNow.getFullYear();

// 月份，因为是从0到11，所以要加一个1

var iMonth = sNow.getMonth()+1;

// 日期

var iDate = sNow.getDate();

// 星期，从0到6

var iWeek = sNow.getDay();

// 小时

var iHour = sNow.getHours();

// 分钟

var iMinute = sNow.getMinutes();

// 秒

var iSecond = sNow.getSeconds();

// 显示格式：当前时间是：xxxx年x月x日 星期x xx:xx:xx

var sTr = '当前时间是：'+ iYear + '年' + iMonth + '月' + iDate+'日'+' '+fnToweek(iWeek)+' '+fnTodou(iHour)+':'+fnTodou(iMinute)+':'+fnTodou(iSecond);

// 写入div

oDiv.innerHTML = sTr;

}

fnTimego();

// 执行时由于延迟问题，刚打开页面会卡顿1s，为了解决这个问题，就要在setInterval之前提前运行一次

setInterval(fnTimego, 1000);

// 显示星期

function fnToweek(n){

if(n==0){

return "星期日";

}

else if(n==1){

return "星期一";

}

else if(n==2){

return "星期二";

}

else if(n==3){

return "星期三";

}

else if(n==4){

return "星期四";

}

else if(n==5){

return "星期五";

}

else{

return "星期六";

}

}

// 如果时间是一位数，则在前面加个零，否则不变。

function fnTodou(n){

if(n<10){

return '0'+n;

}

else{

return n;

}

}

}

3、倒计时：显示5月1日距今还有多久

window.onload = function(){

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

function fnTimeleft(){

// 实际开发中会从服务器传一个时间过来

var sNow = new Date();

// 未来时间：4月30日24:00:00

var sFuture = new Date(2020,3,30,24,0,0);

// sFuture-sNow返回的单位是ms，除以1000并舍掉小数使其以s为单位

var sLeft = parseInt((sFuture-sNow)/1000);

// 计算天数(一天24*60*60=86400秒)

var iDay = parseInt(sLeft/86400);

// 计算还剩多少小时

var iHours = parseInt((sLeft%86400)/3600);

// 计算还剩多少分钟

var iMinutes = parseInt((sLeft%86400%3600)/60);

// 计算还剩多少秒

var iSeconds = parseInt((sLeft%86400%3600%60));

var sTr = '距离5月1日还剩：' + fnTodou(iDay) + '天' + fnTodou(iHours) + '时' + fnTodou(iMinutes) + '分' + fnTodou(iSeconds) + '秒' ;

oDiv.innerHTML = sTr;

}

fnTimeleft();

setInterval(fnTimeleft, 1000);

// 一位数加0补位

function fnTodou(n){

if(n<10){

return '0'+n;

}

else{

return n;

}

}

}

大部分和时钟一样，样式自己写一下，效果：

二、变量作用域

变量作用域指的是变量的作用范围，javascript中的变量分为全局变量和局部变量。

1、全局变量：在函数之外定义的变量，为整个页面公用，函数内部外部都可以访问。

2、局部变量：在函数内部定义的变量，只能在定义该变量的函数内部访问，外部无法访问。

//全局变量

var a = 12;

function myalert()

{

//局部变量

var b = 23;

alert(a);

alert(b);

}

myalert(); //弹出12和23

alert(a); //弹出12

alert(b); //出错