【HTML】获取当前时间并显示在网页上

首先在页面中我们直接写一个标签，然后给标签定义一个id，

这里我们用什么标签都可以，我们就用<span></span>演示吧，

代码如下：

<span id="clock" ></span><script type="text/javascript">var clock = new Clock();clock.display(document.getElementById("clock"));</script>

上面我们实例化了一个Clock的对象，这里我们就在外部定义一个Clock的类，

获取当前时间并进行时间的格式化，代码如下：

function Clock() {var date = new Date();this.year = date.getFullYear();this.month = date.getMonth() + 1;this.date = date.getDate();this.day = new Array("星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六")[date.getDay()];this.hour = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();this.minute = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();this.second = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();this.toString = function() {return "现在是:" + this.year + "年" + this.month + "月" + this.date + "日 " + this.hour + ":" + this.minute + ":" + this.second + " " + this.day; };this.toSimpleDate = function() {return this.year + "-" + this.month + "-" + this.date;};this.toDetailDate = function() {return this.year + "-" + this.month + "-" + this.date + " " + this.hour + ":" + this.minute + ":" + this.second;};this.display = function(ele) {var clock = new Clock();ele.innerHTML = clock.toString();window.setTimeout(function() {clock.display(ele);}, 1000);};
}

之后我们在页面头部中引入该js就好了

<script src="js/Clock.js" type=text/javascript></script>

效果：

【HTML】获取当前时间并显示在网页上相关推荐

android 获取当前时间_js如何获取当前时间并显示
js可以通过Date对象获取当前日期和时间,使用Date()获取系统当前时间,在使用getFullYear().getMonth().getDate() .getHours()等方法获取特定格式的时间 ...
Js实现获取当前时间并显示
js可以通过Date对象获取当前日期和时间,使用Date()获取系统当前时间,在使用getFullYear().getMonth().getDate() .getHours()等方法获取特定格式的时间 ...
Java只读服务器,在服务器端，JSP页面如何只读打开本地的word文件并显示在网页上...
在服务器端,JSP页面怎么只读打开本地的word文件并显示在网页上? 最近开发网站,遇到一个问题就是在服务器端,JSP页面怎么只读打开本地的word文件并显示在网页上,请问高位高手有没有什么解决办法, ...
html页面获取时间格式,js实现动态获取系统时间，显示到页面上
获取系统时间 //获取系统时间. var dateTime=new Date(); var hh=dateTime.getHours(); var mm=dateTime.getMinutes(); ...
css3获取当前时间并显示,实时获取当前时间并展示在页面上
简介实时获取当前时间并展示在页面上,是很多地方常用的:在页面中做此展示以便查看时间.本文使用js通过一个小的demo实现效果. 完整Code 实时展示当前时间 #time { width: 60%; ...
使用php读写mysql数据库并显示到网页上
由于工作的原因,需要了解下bs模式下的读写数据库的流程,将试验过程梳理一下. 我采用的是phpstudy搭建数据库,mysql数据库已经搭建完成,名称为2018版本,如下图: 由于我前期安装过apac ...
将txt文件内容通过cgi和apache显示在网页上
准备工作: 安装apache centos云系统 xftp和MobaXterm_CHS 参考博客:在linux上实现cgi内容在网页上显示 https://blog.csdn.net/taw19960 ...
关于springmvc框架的web工程，从.xml到.java再到.jsp显示到网页上的过程，以及jsp静态文件的访问
作为一个初学者来说解决一个大难题是不容易的,要抓紧记录下来分享给大家才行. 首先,你应该拥有一个配置好的环境和安装好插件的eclipse(需要用到web插件,spring插件和jsp插件),以及tom ...
软件框架SpringBoot-实现使用@Component@Data@Configuration@Bean（配置类控制类实体类）等方法实现将配置文件从8080端口显示在网页上
一.前言 1.该程序代码是使用idea2021.12版本编写的,若使用其他软件请对照好配置: 2.这个程序具体的内容我忘了,只知道使用@Component@ConfigurationPropertie ...

【HTML】获取当前时间并显示在网页上

【HTML】获取当前时间并显示在网页上相关推荐

最新文章

热门文章