HTML+JS动态获取当前时间
时间:2022-07-24
本文章向大家介绍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>
- html5标签基础
- 彻底搞懂Gradle、Gradle Wrapper与Android Plugin for Gradle的区别和联系
- 社会化分享
- Android真机安装sqlite3的方法
- 二次元世界的Linux—东方Project之B站掠影
- 带三方登录(qq,微信,微博)
- Android Studio移动鼠标显示悬浮提示的设置方法
- Spring Cloud构建微服务架构:服务注册与发现
- 自定义Interpolator
- 解决adb push时出现的"Read-only file system"问题
- 1个掷硬币问题,4个Python解法
- 用xml来编写动画
- VIM常见用法总结
- Spring Cloud构建微服务架构:服务消费者
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 一个基于ngrx的Angular图书搜索应用,带网络请求
- Android利用RecyclerView实现列表倒计时效果
- 【Flutter Unit 重大更新 1 】超好用的组件收藏夹上线
- android特卖列表倒计时卡顿问题的解决方法
- dotnet 多线程禁止同时调用相同的方法 禁止方法重入调用 双检锁的设计
- android实现倒计时功能(开始、暂停、0秒结束)
- 【-Flutter/Dart 语法补遗-】 sync* 和 async* 、yield 和yield* 、async 和 await
- android实现条目倒计时功能
- Android实现简单手电筒功能
- k8s安装自动证书签发cert-manager letsencrypt
- Android仿Keep运动休息倒计时圆形控件
- android通过led实现手电筒功能
- Android 7.0 手电筒控制实现
- 【STM32H7】第13章 RL-TCPnet V7.X之创建多个TCP客户端
- Android倒计时的开始与停止 剩余时分秒的展示