zoukankan      html  css  js  c++  java
  • HTML+JS动态获取当前时间

    HTML+JS动态获取当前时间

    效果图:
    HTML+JS动态获取当前时间
    说明:

    JavaScript 中 Date 对象

    创建 Date 对象的语法:

    var myDate=new Date()

    常用 Date 对象方法:

    方法 描述
    Date() 返回当日的日期和时间
    getDate() 从 Date 对象返回一个月中的某一天 (1 ~ 31)
    getDay() 从 Date 对象返回一周中的某一天 (0 ~ 6)
    getMonth() 从 Date 对象返回月份 (0 ~ 11)
    getFullYear() 从 Date 对象以四位数字返回年份
    getHours() 返回 Date 对象的小时 (0 ~ 23)
    getMinutes() 返回 Date 对象的分钟 (0 ~ 59)
    getSeconds() 返回 Date 对象的秒数 (0 ~ 59)

    JavaScript 中 requestAnimationFrame()方法

    window.requestAnimationFrame()方法告诉浏览器您希望执行动画并请求浏览器在下一次重绘之前调用指定的函数来更新动画,通常与 setTimeout() 方法一起使用

    源代码:

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Html+js获取当前时间</title>
    		<style type="text/css">
    			#Main
    			{
    				margin-top: 40px;
    				margin-left: 50px;
    				height: 100px;
    				font-size: 30px;
    			}
    		</style>
    		<script type="text/javascript">
    			window.onload=function()
    			{
    				window.requestAnimationFrame(getDate)
    			}
    			
    			function getDate()
    			{
    				window.setTimeout(function(){
    					window.requestAnimationFrame(getDate)
    				},1000/2)
    				var d=new Date();   
    				var year=d.getFullYear()  //获取年
    				var month=d.getMonth()+1;  //获取月,从 Date 对象返回月份 (0 ~ 11),故在此处+1
    				var day=d.getDay()    //获取日
    				var days=d.getDate() //获取日期
    				var hour=d.getHours()   //获取小时
    				var minute=d.getMinutes()  //获取分钟
    				var second=d.getSeconds()   //获取秒
    				
    				if(month<10) month="0"+month
    				if(days<10) days="0"+days
    				if(hour<10) hour="0"+hour
    				if(minute<10) minute="0"+minute
    				if(second<10) second="0"+second
    				
    				var week=new Array("星期日","星期一","星期二","星期三","星期四","星期五","星期六")
    				var Tools=document.getElementById("Main")
    				var da=year+" 年 "+month+" 月 "+days+" 日 "+week[day]+" "+hour+" : "+minute+" :"+second
    				Tools.innerHTML=da
    			}
    			
    		</script>
    	</head>
    	<body>
    		<div id="Main"></div>
    	</body>
    </html>
    
    
  • 相关阅读:
    回溯、递归、DFS方法
    3-11日学习记录
    文本清洗总结
    归并排序学习
    3-9日学习笔记
    P3182 [HAOI2016]放棋子 错排问题
    P2880 [USACO07JAN]平衡的阵容Balanced Lineup 线段树 树状数组
    P3469 [POI2008]BLO-Blockade 强连通
    P2756 飞行员配对方案问题 网络流 二分图匹配
    P1823 [COI2007] Patrik 音乐会的等待 单调栈
  • 原文地址:https://www.cnblogs.com/cafuc20160512056/p/13202278.html
Copyright © 2011-2022 走看看