天天看点

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

一些例题

1.显示当前的时间function showDate(){var d = new Date(); //获取当前时间var year = d.getFullYear(); //获取当前年份var month = d.getMonth() + 1; //获取当前月份,注意加1var date = d.getDate(); //获取当前日期var week = d.getDay(); //获取星期,因为0代表周日,所以需要if判断一下if( week == 0 ){week = “周日”;}var hour = d.getHours(); //获取小时var min = d.getMinutes(); //获取分钟var sec = d.getSeconds(); //获取秒return year + “年” + month + “月” + date + “日 星期” + week + ” ” + hour + “:” + min + “:” + sec; //将它们组合起来输出}alert( showDate() ); //最后直接调用showDate函数即可

注意引号、分号等标点符号一定要用英文的

运行结果如下:

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本
html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

2.setDate()和getDate()封装一个函数,可以根据输入的数值n(天数)显示n天后的时间

分析:先获取当前时间,再获取天数,再用天数加上n天function numOfDate(n){ //n天后var d = new Date(); //获取当前时刻var date = d.getDate(); //取出天数d.setDate( date + n ); //加上n天return d;}alert( numOfDate(2) );

运行结果如下:

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本
html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

计时器

setInterval()

格式:

setInterval( 函数(或匿名函数),毫秒数 ); 或者

setInterval( function(){  } , 毫秒数 );  只不过一个是写了函数名,一个是直接定义了函数

功能:每隔所传参数的毫秒数,就调用一次所传参数的函数

返回值:当前页面上对于这个定时器的唯一标识,定时器的ID

有了定时器的ID我们就可以取消定时器,下面会讲到

举个小例子:

Document点击按钮时启动一个定时器,这个定时器让它执行show函数 body>

运行结果如下:

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本
html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

取消定时器

clearInterval();

参数:定时器的ID

功能:取消定时器

我们把上面的小例子中的按钮ID输出一下window.onload = function(){var oBtn = document.getElementById( “btn” );oBtn.onclick = function(){var timer = setInterval( function(){document.write( i++ + “

” );} ,1000 ); //改写的上面的函数传参alert( timer );}}

当我们点击按钮时运行的按钮ID为

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

那么怎么去取消定时器呢?

我们需要加一个if判断条件,控制它什么时候取消window.onload = function(){var oBtn = document.getElementById( “btn” );oBtn.onclick = function(){var timer = setInterval( function(){document.write( i++ + “

” );if( i == 3 ){clearInterval( timer );}} ,1000 ); //改写的上面的函数传参alert( timer );}}

运行结果如下

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

以上是定时器的使用及清除

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

标签间的所有内容

innerHTML

功能:标签间的所有内容

举个小例子:

如果我们的div中有一些信息,想要通过点击按钮来获取这个信息,就需要用到它

Document 斜体 body>

运行结果如下,当我们点击按钮时,就弹出对话框

获取时并不仅仅是文字获取,而是标签一起获取

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

如果我们想要设置innerHTML的内容,可以这样写window.οnlοad=function( ){var oBtn=document.getElementById( “btn” );var oDiv=document.getElementById( “div1” );oBtn.οnclick=function( ){//获取div标签间的内容oDiv.innerHTML=”

我是替换文本

”}}

运行结果点击按钮就可以看添加的

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

如果在innerHTML包含标签,标签会被识别,并且会解析,呈现对应的效果。

html文本框中计时器,JavaScript日期函数 - 练习、计时器、innerHTML我是替换文本

-写作不易,大家多多关注,谢谢啦-

---web分享,分享的不只是web