js实现动态数字时钟
1.效果如下
2.html部分
<!DOCTYPE html> <html> <head><meta charset="UTF-8"><title>JS — 实现简单的数字时钟效果</title><link rel="stylesheet" type="text/css" href=""> </head> <body><div class="demo"><span id="nowTime"></span></div> </body>
3.js部分
<script type="text/javascript">var newDate = '';getLangDate();function dateFilter(date){ //值小于10时,在前面补0if(date < 10){return "0"+date;}return date;}function getLangDate(){var dateObj = new Date(); //表示当前系统时间的Date对象var year = dateObj.getFullYear(); //当前系统时间的完整年份值var month = dateObj.getMonth()+1; //当前系统时间的月份值var date = dateObj.getDate(); //当前系统时间的月份中的日var day = dateObj.getDay(); //当前系统时间中的星期值var weeks = ["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];var week = weeks[day]; //根据星期值,从数组中获取对应的星期字符串var hour = dateObj.getHours(); //当前系统时间的小时值var minute = dateObj.getMinutes(); //当前系统时间的分钟值var second = dateObj.getSeconds(); //当前系统时间的秒钟值var timeValue = "" +((hour >= 12) ? (hour >= 18) ? "晚上" : "下午" : "上午" ); //当前时间属于上午、晚上还是下午newDate = dateFilter(year)+"-"+dateFilter(month)+"-"+dateFilter(date)+" "+dateFilter(hour)+":"+dateFilter(minute)+":"+dateFilter(second);document.getElementById("nowTime").innerHTML = "当前时间: "+newDate+" "+week;setTimeout(getLangDate,1000);} </script> </html>
转载于:https://www.cnblogs.com/wenhainan/p/10432342.html
js实现动态数字时钟相关推荐
- java多线程世界时钟_Java实现的动态数字时钟功能示例【显示世界时间】
本文实例讲述了Java实现的动态数字时钟功能.分享给大家供大家参考,具体如下: 构建: 1. Clock继承 JFrame 为运行页面 2. ClockText 测试类 创建 Clock 对象 运行效 ...
- java如何实现动态时钟_Java实现动态数字时钟
本文实例为大家分享了Java实现动态数字时钟的具体代码,供大家参考,具体内容如下 构建: Clock继承 JFrame 为运行页面 ClockText 测试类 创建 Clock 对象 运行效果: 具体 ...
- 利用js制作动态小时钟
利用js制作动态小时钟 在学完Date()函数之后,可以用来与CSS结合制作一个能转动的时钟. 新建html文件,写好基本结构,代码如下: <!DOCTYPE html> <html ...
- java数字时钟_Java实现动态数字时钟
本文实例为大家分享了Java实现动态数字时钟的具体代码,供大家参考,具体内容如下 构建: Clock继承 JFrame 为运行页面 ClockText 测试类 创建 Clock 对象 运行效果: 具体 ...
- java显示多个地区时钟_Java实现的动态数字时钟功能示例【显示世界时间】
本文实例讲述了java实现的动态数字时钟功能.分享给大家供大家参考,具体如下: 构建: 1. clock继承 jframe 为运行页面 2. clocktext 测试类 创建 clock 对象 运行效 ...
- java动态时钟_Java实现的动态数字时钟功能示例【显示世界时间】|chu
本文实例讲述了Java实现的动态数字时钟功能.分享给大家供大家参考,具体如下: 构建: 1. Clock继承 JFrame 为运行页面 2. ClockText 测试类 创建 Clock 对象 运行效 ...
- js入门·动态的时钟,显示完整的一些方法,新年倒计时
时间对象作为非常重要的一个对象,对我们学.net的人来说,并不是很重要,但这并不意味着我们可以忽略,事实上,用得着的时候还是很多的,如果完全依赖JS处理时间,那是会出问题的,因为JS总是假设本地机器上 ...
- 用js计时器实现数字时钟
代码如下 <!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8& ...
- js实现动态数码时钟
数码时钟 在写数码时钟之前,你需要准备0-9数字的图片,你可以自己在网上找,也可以通过ps自己制作喜欢的图片(图片要重命名为"数字".jpg),下面我给大家简单介绍一下,数码时钟的 ...
- js进阶实例,数字时钟
先看效果,动态数字时钟 用到了jQuery,但是只是用来获取元素,只有一点点 面向对象开发 看代码 HTML,自己引入jQuery和js,jQuery在前 <body><div cl ...
最新文章
- 南京师范大学计算机技术调剂,南京师范大学2017年研究生调剂信息
- 信息系统项目管理师-信息化与信息系统考点笔记(下)
- Linux下查看文件内容
- 洛谷 - P3246 [HNOI2016]序列(莫队+单调栈)
- GIF图片合集(用于网络请求图片用)
- 梯度下降优化方法'原理_优化梯度下降的新方法
- 第八节:EF Core连接MySql和Sqlite数据库
- Eclipse控制项目的访问名称
- 在linux中安装oracle中文包,在Linux命令行下安装Oracle 10g
- querydsl动态 sql_Spring data jpa 复杂动态查询方式总结
- SpringCloud或SpringBoot+Mybatis-Plus利用mybatis插件实现数据操作记录及更新对比
- Python程序控制结构(二)循环结构:for in遍历循环,while无限循环,循环+else
- 02277微型计算机原理及应用,微型计算机原理及应用(课程代码:02277).doc
- php 上传乱码_php上传文件名乱码了怎么办
- 2022年日历表电子版打印版
- macos安装盘第三方工具制作_制作 macOS Mojave U盘USB启动安装盘方法教程 (全新安装 Mac 系统)...
- Google Play 开发者注意事项
- python操作网页flash视频_selenium自动化过程中如何操作Flash动画
- 数据库基础知识:概念篇
- 网站强制跳转到国家反诈中心如何解封