欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页  >  IT编程

javascript计时器频率设置（js中计时器的用法）

程序员文章站 2022-04-10 16:21:41
一些例题1.显示当前的时间function showdate( ){ var d = new date(); //获取当前时间 var year = d.getfullyear(); //获取...

一些例题

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函数即可

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

运行结果如下：

javascript计时器频率设置（js中计时器的用法）
javascript计时器频率设置（js中计时器的用法）

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

运行结果如下：

javascript计时器频率设置（js中计时器的用法）
javascript计时器频率设置（js中计时器的用法）

计时器

setinterval()

格式：

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

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

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

返回值：当前页面上对于这个定时器的唯一标识，定时器的id

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

举个小例子：

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<script type = "text/javascript">
var i = 0;
function show(){  //这里也可以写成var show = function(){ }
        document.write( i++ + “<br />” );
}
//然后我们写一个按钮，点击按钮启动定时器
window.onload = function(){
  var obtn = document.getelementbyid( “btn” );  //先获取按钮
  obtn.onclick = function(){  //把事件驱动函数绑定给这个按钮
  setinterval( show,1000 );  //这里是函数的传参，传show，也可以将show改成function定义的函数内容
}
}
</script>
</head>
<body>
点击按钮时启动一个定时器，这个定时器让它执行show函数
  <input type=”button” id=”btn” value=”按钮” />
</ body>
</html>

运行结果如下：

javascript计时器频率设置（js中计时器的用法）
javascript计时器频率设置（js中计时器的用法）

取消定时器

clearinterval();

参数：定时器的id

功能：取消定时器

我们把上面的小例子中的按钮id输出一下

window.onload = function(){
       var obtn = document.getelementbyid( “btn” );
       obtn.onclick = function(){
       var timer = setinterval( function(){
       document.write( i++ + “<br />” );
} ,1000 );  //改写的上面的函数传参
alert( timer );
}
}

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

javascript计时器频率设置（js中计时器的用法）

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

我们需要加一个if判断条件，控制它什么时候取消

window.onload = function(){
       var obtn = document.getelementbyid( “btn” );
       obtn.onclick = function(){
       var timer = setinterval( function(){
       document.write( i++ + “<br />” );
       if( i == 3 ){
       clearinterval( timer );
}
} ,1000 );  //改写的上面的函数传参
alert( timer );
}
}

运行结果如下

javascript计时器频率设置（js中计时器的用法）

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

javascript计时器频率设置（js中计时器的用法）

标签间的所有内容

innerhtml

功能：标签间的所有内容

举个小例子：

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

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>document</title>
<script type = "text/javascript">
  window.onload=function( ){
    var obtn=document.getelementbyid( “btn” );
    var odiv=document.getelementbyid( “div1” );
    
    obtn.onclick=function( ){
  //获取div标签间的内容
  alert(odiv.innerhtml);
}
}
</script>
</head>
<body>
  <div id =”div1”><em>斜体</em></div>
  <input type=”button” id = “btn” value=”按钮” />
</ body>
</html>

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

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

javascript计时器频率设置（js中计时器的用法）

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

window.onload=function( ){
    var obtn=document.getelementbyid( “btn” );
    var odiv=document.getelementbyid( “div1” );
    
    obtn.onclick=function( ){
  //获取div标签间的内容
  odiv.innerhtml=”<h1>我是替换文本</h1>”
}
}

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

javascript计时器频率设置（js中计时器的用法）

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

javascript计时器频率设置（js中计时器的用法）

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

上一篇： 天之骄女长乐公主：23年又绚烂又短暂的人生

下一篇： C# 实现抓包的实例代码

推荐阅读