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