js实现动态日期详解

852 阅读1分钟

本文展示一个自定义时钟,无添加样式,以实现功能为主。

分析:

  • html中使用js三种形式

      第一种---在htmlbody里的元素中,加点击事件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>