js基础之倒计时代码
2024-05-10 11:32:03
js基础之倒计时代码
- 主要代码
主要代码
<!DOCTYPE html>
<html lang="en"><head><meta charset="utf-8" /><title>您的专属倒计时</title><style type="text/css">* {margin: 0;padding: 0;font-family: '微软雅黑';font-size: 20px;}.time {overflow: hidden;margin: 100px auto;border: 1px solid #fff;text-align: center;background: linear-gradient(#fff1eb, #ace0f9);border-radius: 10px;padding: 20px;width: 530px;}.time h3 {font-size: 30px;text-align: center;padding-bottom: 30px;letter-spacing: 5px;/* background-image: linear-gradient(to right, #a8edea 0%, #fed6e3 100%); */background-image: linear-gradient(to right,#eea2a2 0%,#bbc1bf 19%,#57c6e1 42%,#b49fda 79%,#7ac5d8 100%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;}.time h3 input {border: none;width: 100px;height: 35px;text-align: center;border-radius: 8px;background: #f2f2f2;}.time .even,.time .odd {float: left;height: 50px;text-align: center;line-height: 50px;margin-right: 10px;border-radius: 8px;}.time .even {width: 35px;padding: 0 20px;background: #fff;color: rgb(60, 224, 216);}.time .odd {width: 20px;padding: 0 10px;/* background: #ffffff; */color: #fff;}#lastDiv {margin-right: 0;}</style></head><body><div class="time"><h3>小姐姐，距离您下班还有:</h3><div id="residueDays" class="even"></div><div class="odd">天</div><div id="residueHours" class="even"></div><div class="odd">时</div><div id="residueMinutes" class="even"></div><div class="odd">分</div><div id="residueSeconds" class="even"></div><div class="odd" id="lastDiv">秒</div></div></body>
</html>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
<script type="text/javascript">var flag = truevar newDateObj = new Date()var Year = newDateObj.getFullYear()var Mounth = newDateObj.getMonth() + 1Mounth = Mounth < 10 ? '0' + Mounth : Mounthvar Data = newDateObj.getDate()Data = Data < 10 ? '0' + Data : Dataconsole.log(Year, Mounth, Data)function countDownTime() {// 倒计时截止时间var EndTime = new Date(`${Year}/${Mounth}/${Data}` + ' 18:00:00')// 现在的事件var NowTime = new Date()// 时间差（时间单位：ms）var t = EndTime.getTime() - NowTime.getTime()var d = 0var h = 0var m = 0var s = 0if (t >= 0) {// 向下取整d = Math.floor(t / 1000 / 60 / 60 / 24)h = Math.floor((t / 1000 / 60 / 60) % 24)m = Math.floor((t / 1000 / 60) % 60)s = Math.floor((t / 1000) % 60)}// 如果是一位数，前面拼接"0"function toDouble(num) {return num < 10 ? '0' + num : num}$('#residueDays').html(d)$('#residueHours').html(toDouble(h))$('#residueMinutes').html(toDouble(m))$('#residueSeconds').html(toDouble(s))console.log(d, h, m, s)var time = document.querySelector('.time')if (d == 0 && h == 0 && m == 0 && s == 0) {var p = document.createElement('p')if (flag) {flag = falsep.innerHTML = '下班了，收拾东西麻溜点儿走吧'p.style.backgroundImage ='linear-gradient(to right,#eea2a2 0%, #bbc1bf 19%,#57c6e1 42%,#b49fda 79%, #7ac5d8 100%)'p.style.webkitBackgroundClip = ' text'p.style.webkitTextFillColor = ' transparent'p.style.marginTop = '70px'p.style.fontSize = '25px'time.appendChild(p)} else {return}}}setInterval(countDownTime, 1000)
</script>js基础之倒计时代码相关推荐
- JS学习日志15 -- JS基础--忍者代码
前言 从头开始对javascript进行学习,每天定个小目标,学习一点,期待学习完后,对js的认知会发生什么变化~~ :JS基础知识 一.忍者代码 过去的程序员忍者使用这些技巧,来使代码维护者的头脑更 ...
- 用js基础实现倒计时
倒计时是我们常用的一个案例.顾名思义,倒计时即用输入的时间减去现在的时间,但存在一个问题:如果用02分减去20分那结果会是负值. 为解决上述问题,我们可以用时间戳来做.用户输入时间总的毫秒数减去现在时 ...
- html js秒杀倒计时,JavaScript仿京东秒杀倒计时代码实例
本篇文章小编给大家分享一下JavaScript仿京东秒杀倒计时代码实例,小编觉得挺不错的,现在分享给大家供大家参考,有需要的小伙伴们可以来看看. 仿京东秒杀倒计时 html代码 秒杀倒计时 : : c ...
- php5分钟倒计时代码,JS实现十分钟倒计时代码实例
编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaSc ...
- html倒计时代码执行操作,JS实现十分钟倒计时代码实例
编写JS倒计时代码需要用到很多JavaScript知识,比如:if函数,Math.floor,定时器setInterval等等,如有不清楚的小伙伴可以参考PHP中文网的相关文章,或者访问 JavaSc ...
- 小汤学编程之JavaScript学习day01——认识JS、JS基础语法
一.认识JS 1.JavaScript的组成 2.浏览器执行js简介 3.JavaScript是什么? 4.扩展内容 二.JS基础语法 1.代码书写位置 2.变量 ...
- javascript实现奥运倒计时代码
js实现奥运倒计时代码 转自: Js中国 http://javascriptxml.5d6d.com/thread-4-1-1.html <div> <div cl ...
- js轮播图代码_javascript基础（一）——轮播图
javascript基础(一)--轮播图 1.轮播图的实现原理 轮播图的js实现原理其实十分的简单,首先将图片放入一个ul标签中,ul标签的大小要足够将所有图片放入其中.然后再将ul标签放进div中, ...
- js php 获取时间倒计时_,JS实现获取时间和设置倒计时代码分享
本文主要和大家分享JS实现获取时间和设置倒计时代码,希望能帮助到大家. 只做笔记记录一下,主要用到Date 和 setInterval 第一个倒计时的设置: var timeBox = documen ...
最新文章
- OPenCv java 形态学操作(12)
- 深度学习实战：基于bilstm或者dialated convolutions做NER
- 用Unity3D实现简单的井字棋小游戏
- 数字时钟html5 js,html5 canvas js(数字时钟)实例代码
- Java中哪些可以作为GC Roots
- python二十四点_python实现24点游戏（地球上最短的24点游戏代码？）
- 什么是数据、元数据、主数据和参考数据？
- android gms包
- Html + JQuery 点击图片弹出视频加蒙版，全局居中并且可关闭
- 微信小程序之组件传值
- PHP接入萤石云开放平台直播功能
- 数据收发过程中的网络设备状态
- 今日金融词汇---股价复权，是什么？
- css方位,CSS 世界中的方位与顺序
- 【Python项目】你们还在冲会员看电影电视剧嘛？Python带你免费看电影电视剧资源 | 附源码
- 苹果新旧手机数据转移_如何将数据从安卓设备转移到iPhone12_苹果手机_手机学院...
- 音频可视化图形引擎—Specinker
- bitcoin源码分析
- 关于电脑磁盘消失的解决方法
- 硫化铅量子点,PbSQDs，近红外二区量子点，波尔半径大，量子效应显著