的setinterval函数_JavaScript日期函数 - 计时器、innerHTML

1a9a9b2f36402067884e894cb8f9cc71.png

一些例题

1.显示当前的时间

function showDate( ){  var d = new Date();  //获取当前时间  var year = d.getFullYear();  //获取当前年份  var month = d.getMonth() + 1;  //获取当前月份,注意加1  var 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函数即可

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

运行结果如下:

8ff990bba22f7e60a05f4aabe55a881b.png
6a68cdec4a14859161b8d2ea0a242750.png

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

运行结果如下:

78b1362dddf750b051f1cdba905524dd.png
e6a7e3e58071b524a325f0e206abeacb.png

计时器

setInterval()

格式:

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

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

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

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

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

举个小例子:

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

运行结果如下:

09ef493bc1d5250bc49f640002c84de7.gif
c87eb78ee8ab94982c0548df53d8f335.png

取消定时器

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为

7ff074c80a069c09ce8c4559ab62bca5.png

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

我们需要加一个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 );}}

运行结果如下

b210b09e3e91bf0a0999a063bce19af2.gif

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

90081743702e32c0c3d4f911a63b34ff.png

标签间的所有内容

innerHTML

功能:标签间的所有内容

举个小例子:

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

Document
斜体
body>

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

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

508d9967fb3158f5527294ac367ccfab.png

如果我们想要设置innerHTML的内容,可以这样写

window.onload=function( ){    var oBtn=document.getElementById( “btn” );    var oDiv=document.getElementById( “div1” );        oBtn.onclick=function( ){  //获取div标签间的内容  oDiv.innerHTML=”

我是替换文本

”}}

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

fd8c04c8f2a3bf077aed4afd409ddcff.gif

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

6c8b61a00511c1ac7917649987255cfb.png

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

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

8a8afb79e9a14bde75dc1289cca95fb0.gif

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
可以使用`setInterval`函数来实现倒计时动画,具体实现方法如下: 首先,需要设置一个初始时间和一个倒计时结束时间。然后,使用`setInterval`函数循环执行一个函数,该函数将会在每个一定的时间间隔内被调用。 在该函数内部,可以获得当前时间,并计算出还有多少时间剩余。然后,根据剩余时间来更新倒计时的显示,并在时间到达结束时间时停止计时器。 以下是一个简单的示例代码: ```javascript // 设置初始时间和结束时间 const startTime = new Date().getTime(); const endTime = startTime + 100000; // 获取页面中的倒计时元素 const countdown = document.querySelector('.countdown'); // 定义倒计时函数 function updateCountdown() { const currentTime = new Date().getTime(); const remainingTime = endTime - currentTime; // 计算剩余时间的分钟和秒数 const minutes = Math.floor(remainingTime / (1000 * 60)); const seconds = Math.floor((remainingTime % (1000 * 60)) / 1000); // 更新倒计时的显示 countdown.innerHTML = `${minutes}:${seconds.toString().padStart(2, '0')}`; // 如果时间到达结束时间,停止计时器 if (remainingTime <= 0) { clearInterval(countdownInterval); countdown.innerHTML = 'Time Up!'; } } // 使用setInterval函数调用倒计时函数 const countdownInterval = setInterval(updateCountdown, 1000); ``` 在该示例代码中,我们首先获取了页面中的倒计时元素,并设置了初始时间和结束时间。然后,我们定义了一个`updateCountdown`函数,在函数内部计算剩余时间并更新倒计时的显示。最后,我们使用`setInterval`函数来循环调用该函数,直到时间到达结束时间时停止计时器
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值