倒计时效果制作

最新推荐文章于 2024-06-13 10:05:02 发布
最新推荐文章于 2024-06-13 10:05:02 发布
阅读量146 收藏
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_58024830/article/details/116528799
版权 
	              倒计时效果

做之前得先整理好思路，倒计时，倒计时故名思意就是预期
时间和现在时间的一个差，年减年，月减月，日减日，得出来的结果就是我们所要知道的时间

现在开始写了！
一、HTML

在这里插入图片描述
在这里插入图片描述

html就这样简单排一下，也没什么要注意的。

二、css
这里也没设置什么样式，就简单的把个个文本框进行了排版
这里给外面包裹的盒子设置了宽高，用于等下文本框的位置
在这里插入图片描述

前面HTML和CSS我们就略过了，毕竟样式怎么样设置都可以，没必要说那么多，会了js随便怎么写好吧！
1、第一步肯定是先获取必要的元素了，那么没有元素怎么修改？
在这里插入图片描述

这里获取元素之后直接绑定事件了，因为这样比较方便，毕竟其他地方也用不到这个元素了
2、我们之前说了，原理就是拿预计的时间减去现在时间得差，就是我们要得效果
这第二步就要获取时间差了！

在这里插入图片描述

Date()：获取本地时间 getTime():返回从1970年1月1日到指定日期得秒数

首先先获取到本地时间，进行一个转换，变成秒数
再设置一个时间，进行转换变成秒数。
为什么要这样呢？
因为我们电脑是没办法直接计算出差了，所以必须让他们有一个固定得值，让他们把时间都返回到1970年其中的秒数，
而我们设定的时间肯定秒数长亿点，现在的时间肯定短一点，就用长的时间减短的时间就是之间的就是差了
现在就可以算结果了只要除以毫秒除以秒除以分钟除以小时就能得到详细的数据啦
3、不过这么么简单怎么还要劳烦我算一便呢？
在这里插入图片描述

Floor():舍去小数 //主要是为了反正出现小数，反正时间是不可能有小数的对吧！！！
这么分配时间地步，用减来的差除以毫秒再除以……除以小时得到的就是天数再赋值到变量中
小时的话，用差除以毫秒……除以小时再除以24后面余出来的数就是小时啦！
…………………………
………………
4、赋值了肯定就要用啊！之前挖的坑该填上了吧！

在这里插入图片描述

Value;设置或返回input标签里的值
这里获取元素之后直接把之前的值赋值到每个相应的文本里面去
返回浏览器点击查看

效果已经有了，但有没有发现这个倒计时有亿点点不一样

5、我们这个不会变化啊！
这这时候我们可以创建一个函数，把之前的代码放到函数里面，
再创建一个定时器，让这个函数每秒钟运动一次，这样就达到变化的效果啦！在这里插入图片描述
在这里插入图片描述

二刺螈杀手
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
js制作秒杀倒计时效果：
YY的博客
10-14 2421
js制作秒杀倒计时效果：
HTML——倒计时制作
Ts3768的博客
07-01 1178
用js制作HTML倒计时效果图
js格式化日期和倒计时效果
老男孩的博客
07-01 340
关于时间戳 <script> // 获得Date总的毫秒数(时间戳) 不是当前时间的毫秒数 而是距离1970年1月1号过了多少毫秒数 // 1. 通过 valueOf() getTime() var date = new Date(); console.log(date.valueOf()); // 就是 我们现在时间 距离1970.1.1 总的毫秒数 console.log(date.getTime()); // 2. 简单的写法 (最常用的写法) var date1 = +new Date
简单倒计时制作
weixin_42253718的博客
09-20 254
写在开头的话，HTML CSS JS 网页web一般都是先打框架，打静态的框架及其css写出来再用js调用函数使之动起来。 倒计时思路：获取结束的时间-当前的时间>0 得到两个时间对象 var enddate=new Date(“2019-9-30 17:20:00”); var current=new Date(); 时间戳：var cha=enddate.getTime()-curren...
前端页面实现倒计时效果的几种方法
热门推荐
Boboy
12-10 3万+
倒计时的效果在网站或其他平台剪得很多了吧，今天就让我们来看看实现它的几种方法吧！ 一 ——15分钟倒计时 <html> <head> <meta charset="UTF-8"> <title>15分钟倒计时</title> </head> <body> <div id="timer" style=...
倒计时有三种写法
小陈技术空间
02-17 3474
定时器有三种实现方法 setTimeout setInterval questAnimationFrame setTimeout var a = 10; var date = new Date(); setTimeout(function () { console.log(a--); if (a&gt;=0) { setTimeout(arguments....
html 倒计时效果,JS动态显示倒计时效果
weixin_42172204的博客
06-09 558
1.页面布局距离2020年元旦还有：天小时分秒2.js动态显示getTime()获得设定的时期与1970年1月1日时间相差的毫秒数1)获得插入数字的位置var show=document.getElementById("show").getElementsByTagName("span");2)声明现在的时间和未来的时间var timeing=new Date();var time=new Dat...
css，js 制作倒计时效果
小白的博客
07-17 765
利用css和js制作一个倒计时的效果，这种效果的用处很多，让我们一起来学习把。 首先，先准备三个盒子，分别放小时，分钟，秒数 有两个要点：第一个就是这个倒计时的函数 原理就是获取现在时间的时间戳 和输入时间的时间戳，然后用输入的时间戳减去现在时间的时间戳，最后分别转换为小时，分钟，和秒就可以了。 第二个就是利用定时器，1秒循环调用这个倒计时的函数。这样就可以做到倒计时的效果了。 注意：如果想进去网页中直接就进行倒计时，需要在定时器前面就调用一次这个函数就可以了。 最后附上时间的...
手把手教你如何使用Axure实现倒计时效果
weixin_43173093的博客
11-19 2007
我们经常看到一个场景，当点击某个按钮之后，旁边就会显示倒计时几秒后可以重新点击。这就是倒计时效果。 直接开始： 一、准备 添加全局变量：项目-全局变量-添加 time 值为60 准备一个矩形，添加文字：获取验证码。 准备一个动态面板，设置为两个 准备一个文本标签，不要输入字，放在一旁 给各个组件命名 二、设置交互 在动态面板上设置交互条件 在矩形上设置交互，自己设置禁用样式 ...
使用Axure制作倒计时效果.rp
10-14
使用Axure制作倒计时效果
php实现倒计时效果
12-18
这里写了一个考试系统剩余时间倒计时的显示代码和大家一起探讨。 实现原理： PHP获取的是服务器端的时间，我们只要设置考试的开始时间和结束时间及当前时间。如果当前的时间不在我们的考试时间范围内，则显示给考生...
js定时器实现倒计时效果
01-19
本文实例为大家分享了js定时器实现倒计时效果展示的具体代码，供大家参考，具体内容如下 日期函数 倒计时 = 用 将来的时间 – 现在的时间  问题：将来时间 距离 1970 毫秒数 – 现在距离 1970年1  用将来的...
PPT制作的炫彩倒计时
01-26
PPT制作炫彩倒计时是指在Presentation软件中创建一个倒计时动画，通常用于会议、培训、讲座、产品发布等场景中，以吸引观众的注意力，增加视觉效果。以下是PPT制作炫彩倒计时的相关知识点： 一、倒计时动画的概念：...
jquery 倒计时效果实现秒杀思路
12-09
代码如下: [removed] $(function(){ countDown(“2015/9/8 11:11:59″,”#colockbox1”); }); function countDown(time,id){ var day_elem = $(id).find(‘.day’); var hour_elem = $(id).find(‘.hour’);...
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 304
在vue.config.js中配置关闭Uncaught runtime errors显示。
vue3如何定义一个组件
Java程序员专栏
06-09 503
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
Harmony 开发的艺术 面向对象
不懂先生的博客
06-13 759
然后你可以创建多个子类，如“圆形”、“矩形”和“三角形”，它们都继承自“形状”类并实现了自己的“绘制”方法。尽管每个对象的类型可能不同（圆形、矩形、三角形等），但由于它们都继承了“形状”类并实现了相同的“绘制”方法，因此你可以通过父类引用来统一调用它们的方法。然后你可以创建一个“狗”类，它继承自“动物”类，并添加或覆盖一些特定的属性和方法（如“叫”和“摇尾巴”）。所以面向对象的三大特征（封装、继承、多态）在java语言中很容易实现的设计，搬到早期的JavaScript中，就变噩梦一样的存在。
JS-12-es6常用知识-async
最新发布
m0_68467925的博客
06-13 426
关键字async作用：声明一个函数为异步函数，允许函数内部使用await关键字等待 Promise 对象的完成。返回值：异步函数总是返回一个 Promise 对象，无论函数内部是否有显式的return语句。如果没有返回语句，函数会隐式地返回一个已解析（resolved）的 Promise，其值为undefined。
canvas制作倒计时炫丽效果
05-17
好的，以下是一个简单的canvas倒计时炫丽效果的示例代码，你可以根据自己的需求进行修改和优化： HTML代码： ```html <canvas id="canvas" width="300" height="300"></canvas> ``` JavaScript代码： ```...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值