JavaScript日期函数 - 练习、计时器、innerHTML

一些例题

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

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

运行结果如下:

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

运行结果如下:

计时器

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>

运行结果如下:

取消定时器

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为

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

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

运行结果如下

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

标签间的所有内容

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>

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

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

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

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

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

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

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

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

(0)

相关推荐

  • 彻底搞明白this

    this是我们在书写代码时最常用的关键词之一,即使如此,它也是JavaScript最容易被最头疼的关键词.那么this到底是什么呢? 如果你了解执行上下文,那么你就会知道,其实this是执行上下文对象 ...

  • 插件分享 | 如何快速上手 Zookeeper 未授权漏洞

    全文共:3410 字   预计阅读时间:9 分钟 前言:Goby 是一款实时网络空间测绘工具,我尤其喜欢插件市场,它可以集成很多我们平时利用的小工具,不用再去烦恼的打开一个个文件夹.初次编写插件我选择 ...

  • javaWeb(五)----- BOM

    BOM ✔  概念:Browser Object Model 浏览器对象模型 * 将浏览器的各个组成部分封装成对象 ✔  组成: * Window   窗口对象 * Navigator   浏览器对象 ...

  • DOM查询练习

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  • Excel日期函数20关

    今天我们来对日期相关函数做一个小结,大部分我们都已经写过文章,所以我们就采用快问快答的方式来快速过一下!看看你目前学会了几个,能闯几关,记得自己先思考一下,看是否能写出!最后一个有亿点点难度! 问题1 ...

  • 日期函数综合应用-用到退休的考勤表

    继续我们函数系列,今天我们分享一下关于日期类函数的应用 一般我们都知道考勤表,都有一个表头,具体根据每月的天数来的 有的28天.30天或者31天 如果的需求就是可以根据选择不同,自动计算每月的天数,不 ...

  • excel待办事项清单视频:复选框控件应用日期函数添数据验证序列

    excel待办事项清单视频|excel添加复选框控件视频|excel日期函数应用视频|excel数据验证序列视频 本视频教程由部落窝教育分享.

  • excel-VBA日期函数

    日期函数 编号 函数 描述 1 Date 一个函数,它返回当前的系统日期. 2 CDate 一个函数,将给定的输入转换为日期. 3 DateAdd 一个函数,它返回一个指定的时间间隔被添加的日期. 4 ...

  • 10分钟,学会21个Excel日期函数

    10分钟,学会21个Excel日期函数

  • 手把手教你,学会时间和日期函数的综合运用

    计算两个日期相差的年.月.日数 在计算工龄.发票报销期限等日期计算应用中,经常要求两个日期的时间差以"0年0个月0天"的样式表现. 示例13-47    计算员工在职时长 图13- ...

  • 这些实用的日期函数,你都会了吗?

    HI,大家好,我是星光,这期咱们来聊一下有关过去和未来的函数问题-- 关于未来呢,首先请不要偶尔悲观,有个姓列的老师说过,面包会有的,牛奶会有的,将来一切都会有的--不过反正现在是没有的. 来,快请坐 ...

  • 用日期函数制作简易日历

    如果是当月的日期显示为白色(亮色),不是当月的日期显示为灰色(暗色):如果是系统当前的日期,也就是今天的日期,给个蓝色的背景色,突出显示. 其中年份和月份是用控件设置和调节的,昨天已经分享过设置的方法 ...

  • 日期函数date的基本用法

    小伙伴们好,昨天我们说了year,month,day这3个函数,它们可以从一个日期中分别提取出年份,月份和天数.如果反过来,想要由年月日3部分组成一个日期,就要用到date函数.它返回表示特定日期的序 ...