JavaScript实现页面倒计时效果

html代码:

css:

<style>

.time {

width: 300px;

height: 50px;

border: 1px solid black;

line-height: 50px;

text-align: center;

}

</style>

JavaScript:

// 1.先获取div

let div = document.querySelector('.time');

// 2.获取年月日,时分秒

function mytime() {

let dt = new Date();

let year = dt.getFullYear();

let M = dt.getMonth() + 1;

let day = dt.getDate();

let h = dt.getHours();

let m = dt.getMinutes();

let s = dt.getSeconds();

// 拼接字符串并将字符串设置给div

div.innerHTML = `今天是:${year}年${M}月${day}日${h}:${m}:${s}`;

}

mytime();

// 设置一个定时器

setInterval(function () {

mytime();

}, 1000)

</script>

JavaScript实现页面倒计时效果相关推荐

php活动倒计时代码,JavaScript实现活动倒计时效果的代码分享
这篇文章主要为大家详细介绍了基于JavaScript实现活动倒计时效果,距离活动时间还剩多少,具有一定的参考价值,感兴趣的小伙伴们可以参考一下本文实例为大家分享了js倒计时效果的具体代码,供大家参考 ...
JavaScript计时器实现倒计时效果
1.计时器: 描述:window中提供了两种计时器,即延迟期和定时器语法: 1) 定时器: ...
桌面倒计时html,javascript实现下班倒计时效果的方法(可桌面通知)_javascript技巧
本文实例讲述了javascript实现下班倒计时效果的方法.分享给大家供大家参考.具体如下: 周末了,搞个下班倒计时,娱乐下. 确保下面三点: 1.非IE浏览器,较高Chrome版本,已开启HTML5 ...
javascript实现页面倒计时
页面倒计时实现效果: 页面倒计时实现效果代码: <!DOCTYPE html> <html lang="en"> <head><meta ...
桌面html倒计时如何添加,JavaScript 实现Html页面倒计时效果的简单实例
Html网页倒计时是Web开发中比较常用的功能之一,例如新站上线前的欢迎页,节日的到来,活动的计时等等,阿萌来简单介绍一个比较简单的倒计时实例. 原理嘛,很简单,就是利用设定的时间戳减去当前的时间戳, ...
JQuery模仿淘宝天猫魔盒抢购页面倒计时效果
1.效果及功能说明通过对时间的控制来告诉用户一个活动还剩多少时间,精确到秒. 2.实现原理首先定义活动的截至的时间,要重年份精确到毫秒,在获得当前的年份到秒钟,在用截至时间,减去现在的时间,剩下的 ...
活动h5页面倒计时效果
仅供参考逻辑 $(function(){})中的代码: //倒计时参数var time = [{'y':2015,'m':11,'d':11,'h':16,'min':35,'order':0},{' ...
京东页面倒计时效果的制作
html代码 <div class="flash-box1"><a href="#"><div class="flash ...
JavaScript实现页面滚动到div区域div以动画方式出现
用JavaScript实现页面滚动效果,以及用wow.js二种方式实现网页滚动效果要实现效果是页面滚动到一块区域,该区域以动画方式出现. 这个效果需要二点: 一:我们要先写好一个css动画. 二:用 ...

JavaScript实现页面倒计时效果

JavaScript实现页面倒计时效果相关推荐

最新文章

热门文章