本文展示一个自定义时钟,无添加样式,以实现功能为主。
分析:
html中使用js三种形式
第一种---在html中body里的元素中,加点击事件onclick=“alert();”第二种---在html中head里加入<script>functionmethod(){arert();}</script>onclik=“method()”事件中调用方法第三种---在js文件中加入functionmethod(){arert();}onclik=“method()”事件中调用注:通过html页面中<head>标记里的<script>中引入js文件:<scripttype="text/javascript"src="路径"></script>
如何获得自定义日期数据
1.获取当前日期vardate=newDate();2.调用方法,获取需求数据,以年,月,日为例date.getFullYear();date.getMonth()+1;//javascript中取出的month比实际的月份小1date.getDate();//易混点:getDate()---返回月份,getDay---返回星期3.拼接日期数据,获得自定义格式日期字符串拼接符+
相关方法
1.document.getElementById()
document.getElementById()方法可根据id获取标签的DOM,通过.innerHTML可获得标签里的内容,亦可以通过"="内嵌内容,向id所在标签下插入内容。
2.setInterval() setInterval() 方法可按照指定的周期(以毫秒计)来调用函数或计算表达式。
附上完整代码
<html><head><metacontext="text/html;charset=utd-8"><title>自定义时钟</title></head><scriptlanguage="JavaScript">functionshowTimes(){//获取当前日期vardate=newDate();//获取当前年varyear=date.getFullYear();//获取当前月varmonth=date.getMonth()+1;if(month<10){month="0"+month;//月份为个数时,前面补0}//获取当前日varday=date.getDate();if(day<10){day="0"+day;//月份为个数时,前面补0}//获取当前时varhours=date.getHours();if(hours<10){hours="0"+hours;//月份为个数时,前面补0}//获取当前分varminutes=date.getMinutes();if(minutes<10){minutes="0"+minutes;//月份为个数时,前面补0}//获取当前秒varseconds=date.getSeconds();if(seconds<10){seconds="0"+seconds;//月份为个数时,前面补0}//拼接时间vardatetime=year+"-"+month+"-"+day+""+hours+":"+minutes+":"+seconds;//显示在id为showtimes的容器里document.getElementById("timer").innerHTML=datetime;}//设置1秒调用一次setInterval("showTimes()",1000);</script><body>当前时间为:<pid="timer"></p></form></body></html>
作者:林夕木木