JavaScript显示当前时间

最新推荐文章于 2024-01-26 17:20:03 发布
原创 最新推荐文章于 2024-01-26 17:20:03 发布 · 245 阅读 · 0 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
这篇博客介绍了一个JavaScript实现的国庆倒计时小案例，通过Visual Studio 2015进行开发。博主首先展示了基本布局和CSS样式，然后详细解释了如何获取和格式化本地时间，利用三元运算符确保显示为两位数。接着，通过定时器每秒更新时间以实现动态显示，并添加了暂停功能，通过清除计时器来达到暂停效果。

本次实现js国庆倒计时小案例

开发工具与关键技术：Visual Studio 2015 JavaScript

当然 首先还是先写出大概布局如下图：

在对其添加 背景样式 和两个按钮的样式 下面便是我的css 样式了

这样再到类中添加JavaScript 代码便可如下图：

首先便是获取各项的div 而后 声明一个 分别获取本地时 分 秒，

然后使其更美观 所以使用了个三元运算判获取的本地时间小于

10的时候就在前面加一个0的操作 如果大于十那将不变 而后

在获取的shijian里使用innerHTML使其在浏览器页面显示出来（视图），

然后将获取的字符串拼接起来赋值给shijian便可实现获取时间,

可是这只能看见一次；做不到像时间表一样有个动态的时间显示

，使用添加一个计时器，使其一秒钟调用一次 使其有动态显示

的效果  且有个暂停按钮原理便是清除我们调用的计时器

从而实暂停的效果：这样便实现了时间的开始与暂停。

下图便是我的JavaScript效果图：

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

标签
#javascript
weak1003
关注
JavaScript-练习在页面上动态显示当前时间
paku-san的博客
05-21 3672
需求：把当前的时间在页面上动态的显示出来 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <body> <span id="time"></span> ...
使用JS获取当前时间并且改变时间显示格式
sunshine_kevin的博客
01-16 6969
使用JS改变获取时间的格式 刚开始学习前端不久，昨天突然想做一个简单的显示时间的页面，就当作是钟表了（哈哈，买不起表吗？） 写的过程中，发现JS自带的获取时间功能在视觉上总觉得不是很舒服，比如 9:08 显示的是 9:8 ，这个确实没有问题，但是就是看着不舒服，所以呢，网上查了查，学习了一番，我做成了 9:08 的样子。另外还有获取的星期是从0开始的数字，最后都改了改，做的样子还算看过眼。 先看一...
js显示当前时间
Lccccb的博客
03-21 364
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>js获取当前时间显示在页面上</title> <script> window.onload=function(){ //定时器每秒调用一次fnDate() fnDate();...
javascript设置指定年月日,js动态显示当前时间
阿发狗伪原创
11-14 2335
大家好，本文将围绕js中如何动态显示日期时间展开说明，javascript设置指定年月日是一个很多人都想弄明白的事情，想搞清楚js动态显示当前时间需要先了解以下几个事情。
js动态显示当前时间
Bruce_Json的博客
03-22 5226
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript"> function showTime() { nowtime = new Date(); ...
JavaScript实时显示当前时间
HerryDong的博客
12-13 1万+
JavaScript主要使用DateDate中的getMonth()方法返回值从0开始计数，获取日期需要使用getDate()方法，而不是getDay()方法。如果要实时获取时间，则需要使用Date结合定时器实现，下面介绍两种实现方法。使用和setTimeout都可以实时获取当前时间，如果你对递归深恶痛绝的话，那还是推荐使用，毕竟看起来更加简单直观。
用Js获取当前显示时间
新入菜鸟
01-07 2万+
Js初学菜鸟 &amp;lt;!DOCTYPE html&amp;gt; &amp;lt;html lang=&quot;en&quot;&amp;gt; &amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;UTF-8&quot;&amp;gt; &amp;lt;title&amp;gt;数字时钟&amp;lt;/title&amp
前端过去当前日期_js如何获取当前时间并显示
weixin_40005373的博客
12-19 1909
js可以通过Date对象获取当前日期和时间，使用Date()获取系统当前时间，在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间，在使用innerHTM方法显示。web前端学习：打造全网web前端全栈资料库(总目录)看完学的更快，掌握的更加牢固，你值得拥有(持续更新)​zhuanlan.zhihu.com本篇文章给大家介绍如何...
Js实现获取当前时间并显示
热门推荐
秉持Love and share的态度去学习和生活
03-15 3万+
js可以通过Date对象获取当前日期和时间，使用Date()获取系统当前时间，在使用getFullYear()、getMonth()、getDate() 、getHours()等方法获取特定格式的时间，在使用innerHTM方法显示。 首先我们来了解一下js获取当前时间所需的一些方法： 获取当前时间： var d = new Date();//获取系统当前时间 获取特定格式的时间： 1、获取当前年份 getYear()方法：可以获取年份（2位或4位），其返回值是表示当前Date 对象的年份字
JavaScript 当前时间显示（js）
z_haaaa的博客
04-03 609
【代码】JavaScript 当前时间显示。
js在页面显示当前时间
Leo的博客
03-31 2万+
【JavaScript中Date对象的常用方法】【步骤】（1）先在body中设置页面加载事件： &lt;body onload="load()"&gt; &lt;/body&gt;（2）定义showRealTime(clock)函数，用于得到当前时间：&lt;script type="text/javascript"&gt; function showRealTime(clock){ va...
使用JavaScript来显示当前时间
qiyiwuli的博客
01-26 669
该函数获取当前日期和时间，并从中提取小时、分钟和秒。然后，它确保这些值都是两位数（例如，将“9”更改为“09”）。最后，它将时间格式化为“HH:MM:SS”格式，并将其设置为页面上ID为“time”的元素的文本内容。以下是一个简单的HTML页面，它使用JavaScript来显示当前时间。JavaScript代码位于。这段代码首先定义了一个函数。函数以显示当前时间，并使用。函数每秒更新一次时间。函数，以便更新时间。
js-显示当前时间
Lan的专栏
09-03 244
此文章主要记录如何将当前时间显示到html中，并每秒刷新时间 首先实现简单的布局,主要用来显示时间 <style> #time { height: 200px; background: #ccc; text-align: center; line-height: 200px; color: darkturquoise; ...
js显示当前时间及其时钟显示
Luo_lung的博客
11-29 2784
1.弹窗显示，当前时间和日期： main.js var box=new Date(); alert("当前日期"+box.getFullYear()+"/"+box.getMonth()+"/"+box.getDay()); alert("现在时间"+box.getHours()+":"+box.getMinutes()+":"+box.getSeconds());
用js动态显示当前时间
豆奶的博客
04-17 2708
用setTimeout动态显示当前时间： <div class="showTime"></div> <script> var t = null; t=setTimeout(time,1000);//开始运行 function time(){ clearTimeout(t);//清除定时器 dt = new Date(); var y = dt.getFullYear(); var mt = dt.ge
JavaScript实现点击按钮显示当前时间详解
专注于与编程相关的知识内容分享
12-28 6513
通过JavaScript结合HTML和CSS，开发者可以轻松实现点击按钮显示当前时间的功能。本文详细介绍了从HTML结构、CSS样式到JavaScript逻辑的完整实现过程，并提供了扩展功能和注意事项。掌握这一技术后，开发者可以进一步探索更复杂的交互效果，如动态时间格式化、实时更新和国际化支持。
Vue js实时显示当前时间
hery186的专栏
01-21 3593
转自   https://blog.csdn.net/cdx1170776994/article/details/82529332   首先是要回去当前时间； 这是一个获取当前时间的函数（不包含秒），记住先在data（）里面声明一个全局变量nowTime  methods: {   timeFormate(timeStamp) {           let year = new Date...
js JavaScript 显示动态时钟 时间转换 日期 当前时间
爱学习的小强
11-01 777
文章目录输出效果代码实现 输出效果 代码实现 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale
js实时显示服务器时间并更新,JavaScript实时更新当前的时间的示例代码
weixin_29157493的博客
08-03 1315
实现的效果如下：时间会实时更新具体的JS代码如下var dateStart;function start() {dateStart = new Date(); //开始时间startTime();}function startTime() {set = window.setTimeout("startTime()", 1000);var dt = new Date();var day = dt.g...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值