倒计时css和js html代码,手把手教你利用CSS和JS创建一个倒数计时器

倒计时功能,在很多地方都会用到,我们平时都习惯去用一些插件来应用,会减少不少的工作量,并且效果也能达到预期。

我今天并不是想分享什么倒计时插件,而是自己写一个简单的倒数计时器,有兴趣的同学可以往下看看吧!

首先看下最终的功能,如图:

bbc78cd62d046b74977727b9ecab4613.png

默认进来,图片上的数字可以从10,逐渐减少到0,如果点击“RESET”,会重新执行。

技术

我们将让CSS处理动画,因为CSS动画在浏览器中的性能要比JavaScript处理动画高得多。创建倒数计时器的步骤如下:创建一堆数字

每秒创建一个JavaScript间隔

使用CSS变换移动数字堆栈

HTML

让我们从所有HTML开始。我们需要两个按钮以及所有10-0的数字。

👉

Next Episode Starts in

10

10

9

8

7

6

5

4

3

2

1

0

Reset

我们添加了带有表情符号的图标。我们也有一个countdown将包含我们的numbers。

我们拥有倒数div的原因是我们可以10在其中放置一个。这10个负责在我们的UI中为我们的用户提供一些空间numbers。文件流中将有空间。

我们将不得不numbers绝对定位,这将使它们脱离文档流。

CSS

让我们开始我们的CSS。

基本样式

我们为按钮设置了一些基本样式,以使其看起来不错:/_ button styles are here _/

button {

background: white;

border-radius: 5px;

border: none;

padding: 15px 30px;

font-size: 24px;

font-family: 'Muli';

display: block;

text-transform: uppercase;

letter-spacing: 2px;

cursor: pointer;

transition: 0.3s ease all;

line-height: 1;

display: flex;}button:hover {

background: #eee;}.icon {

margin-right: 8px;}.reset {

font-size: 12px;

padding: 8px 16px;

margin: 100px auto 0;}

现在,我们将提供一些美观的按钮。下一步是开始定位我们的数字,以便它们显示在列中。

自定义字体

我们从fonts.google.com找到了自定义字体,并将链接添加到我们的CodePen设置中:https://fonts.googleapis.com/css?family=Muli&display=swap

倒数和数字的定位

将以下内容添加到我们的CSS中。.countdown {

position: relative;

display: block;

text-indent: -9999px;

overflow: hidden;

margin-left: 6px;}.numbers {

position: absolute;

top: 0;

left: 0;

text-align: center;

transition: 0.3s ease transform;

text-indent: 0;}

我们将countdown区域设置为,overflow: hidden以便看不见其视野之外的任何数字。我们现在看到的只是一个数字。

看看没有以下内容的幕后情况overflow: hidden:

使用overflow: hidden,我们所有的额外数字都从视图中隐藏:

让我们进入我们的JavaScript。

JavaScript

这是开始每秒移动数字的工作所在。

创建变量

首先,从DOM中获取所需的一切并创建变量。// grab parts of our HTML

const countdownArea = document.querySelector('.countdown');

const numbersArea = document.querySelector('.numbers');

const resetBtn = document.querySelector('.reset');

// create an interval and counter

let interval;

let count = 0;

// calculate the height of our numbers

const height = countdownArea.getBoundingClientRect().height;

创建一个计时器

接下来,我们将创建一个用于创建计时器的函数。我们需要做的事情是:增加我们的 count

使用count和height找出数字列表的偏移量

offset通过CSS转换将新内容应用于数字部分

确保到达10点后停止间隔// create the interval that creates the timerfunction createTimer() {

interval = setInterval(() => {

// 1. increment our count

count++;

// 2. calculate the offset and apply it

const offset = height * count;

// 3. apply the offset using css transforms

numbersArea.style.transform = `translateY(-${offset}px)`

// 4. stop the interval at 10

if (count >= 10) {

// go to the next episode

clearInterval(interval);

}

}, 1000);}

最后一部分是实际调用我们的新函数。添加以下内容,我们的计时器应该开始工作了!createTimer();

添加重置

最后一部分是添加重置。我们将使用之前抓取的重置按钮:resetBtn.addEventListener('click', createTimer);

我们必须在createTimer函数中添加三行以重置所有内容:function createTimer() {

clearInterval(interval);

count = 0;

numbersArea.style.transform = 'translateY(0)'

// other code goes here...

// interval = setInterval(() => {...

}

总结

有兴趣的童鞋可以去试试吧~~~如果有疑问可以加QQ群咨询。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/506281.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

空间说说html,空间说说大全(共100句)

1、把眼泪留给最疼你的人,把微笑留给伤你最深的人。2、只要再坚持一下下,我们就能到幸福的彼岸。3、伤害过我的人,我从不让他们好过。4、其实生活很平淡,只是我们自己把它弄得苦不堪言。5、忘记,那么冰凉,绝…

七牛云 转码_七牛云存储 - 七牛 php sdk 上传 转码 问题

实在是不会用 sdk 呀 都蒙圈了求大神 指点vendor(Qiniu.io);vendor(Qiniu.rs);$bucket icunzai-voice;$key $filename;$client new \Qiniu_MacHttpClient(null);$putPolicy new \Qiniu_RS_PutPolicy("$bucket:$key");$putPolicy->CallbackUrl U(/Wechat/Bott…

手机端使用ghelper_Anki手机端使用指南(一)

【本篇会对如何使用手机端anki进行详解】有小伙伴询问在应用商店搜索anki找不到名字叫“anki”的软件,这里解释一下,在手机端的名字和电脑端的名字不太一样。安卓对应的名字叫做AnkiDroidIOS对应的名字叫做Ankimobile不过其实是一个软件,同步…

计算机专业英语词汇mp3,【听单词】计算机专业英语词汇音频106,计算机英语单词MP3...

monitor call instruction n.监督命令描述operator unit console 操作负单元控制台emergency switch 应急开关discontinuous spectrum 不连续频谱critical path scheduling method n.关键路径调度法track centertocenter spacing n.磁道中心矩(磁道中心距)digital computing n.…

python生物数据分析_Python学生物统计-数据可视化-学习笔记5

5.1 作图的重要性在分析一个数据之前, 我们首先要对数据进行检查, 在统计上看一下汇总统计, 比如最大值, 最小值, 中位数, 平均值, 方差, 标准差, 变异系数等等.直方图, 看一下数据的分布情况箱线图, 看一下数据的分布, 有无异常值所谓一图胜千言.python中的作图工具5.2 散点图…

三甲医院his系统源码_三甲医院科研管理系统是什么,科研成果包括哪些

对于三甲医院来说,做科研管理系统必不可少的是数据收集,有一个方便的数据收集管理软件能记科研效率提高很多,那就是三甲医院科研管理系统,首先,我们先了解一下三甲医院科研管理系统是什么,科研成果包括哪些…

html的表格使用函数,从另一个HTML表格创建HTML表格的jQuery函数

我在页面上有一个HTML表格,我想用jQuery从中获取信息,清理/清理它,并创建一个新的“干净的”HTML表格信息。从另一个HTML表格创建HTML表格的jQuery函数我有表具有以下结构:Full Name123.456.7890456.789.0123OfficeTitleSuperviso…

小说中场景的功能_场景在小说中的作用

文 | 彼岸晓吾/ Part 01写场景最厉害的作家有余华,莫言和村上。初学写作者最容易犯的毛病是不会写场景,不了解场景的意义所在。很多写手以为,只要把自己的意思表达出来,自然会形成一篇文章或一个故事。其实不然。那么,…

python 批量读取xlsx并合并_如何用Python快速导入多个excel文件并合并文件数据

日常工作中,每个月都会遇到那么个固定的工作,将业务方同事整理的数据导入GP数据库中的某张表中;听起来是很简单的活呢! 但每次业务MM总会发来一个文件夹,里面有三四十个Excel文件(.xlsx格式,且字…

ie8 html 编辑器 为word,ie8生成word

1. 兼容IE8 导出Wrod方法直接var wordnew ActiveXObject("word.Application");word.visibletrue;(这句不要就不显示word出来,后台处理)var docword.ActiveDcouemnt;doc.content.text"导出内容"doc.save(如果要选择存放路径)就用doc.…

git 创建邮箱 用户名_厉害了!IDEA中如何使用Git进行项目管理,完整教程来了?...

第一部分:安装1. 下载地址: https://git-scm.com/download/win如果速度慢, 使用 迅雷下载;2. 点击安装, 然后下一步, 直到下面这个页面:建议: 按照上面所示方式选中复选框 ;3. 点击下一步, 直到出现这个页面:建议: 这个页面是选择git使用的命令行, 建议使用第一个git自带的;4. …

程序员操作系统推荐_为什么程序员要会 Linux

(给伯乐在线加星标,看经典文章)作者:猫嗅花https://www.jianshu.com/p/5020fbd76d0c三大操作系统概述三大操作系统概述windows, macOS, linux是当今主流三大操作系统,普通用户一般是选择windows或macOS, linux主要是占据服务器领域市场。这三…

url中能出现的字符_网站URL配置4个技巧,轻松获得更多流量

对于刚入行的SEO新人,我们在做企业网站优化的时候,通常都是按照程序员设置的网站架构进行线上基础性内容的优化,特别是在使用一些固定CMS系统的时候,大量的站内URL都是配置固定的,很少有人去关注这方面对SEO的影响。那…

关于计算机网络的短文英语,英语翻译哪个心心好嘛!帮我用英语写一段关于计算机网络的100多个字的短文嘛!内容随便写!只要是关于计算机网络的!...

计算机网络,可以参考内容:)~~Computer Network is A software/hardware infrastructure Share resources data, files, computing power Information highway communication between geographically dispersed users Electronic Society Cyberspace Virtual global …

python 调用mysql_Python调用Mysql

最近在学习Python,发现Python的众多类库给Python开发带来了极大的便利性。 由于项目中使用Mysql,就考虑尝试使用Python调用Mysql,方便写一些调试用的小程序代码。花了半天差了些资料,自己动手,做了个简单的demo&#x…

arm export 汇编_C/C++与汇编混合编程有什么好处?

1.导语当需要C/C与汇编混合编程时,可以有以下两种处理策略:若汇编代码较短,则可在C/C源文件中直接内嵌汇编语言实现混合编程。若汇编代码较长,可以单独写成汇编文件,最后以汇编文件的形式加入项目中,通过AT…

html调整文字位在基线显示,html – 将标题对齐到相同的基线,无论后续文字是什么?...

有没有办法将不同大小的多个标题的第一行与同一基线对齐?也不管后面的文本,也应该对齐.编辑:重新上传:在我看来,唯一的解决方案是将每个标题和每个正文文本放入单独的DIV,然后使用标题来填充顶部或边缘顶部以对齐它们(例如H1将是36px,0px边距…

论文速递|Management Science 11月文章合集(上)

编者按 在本系列文章中,我们梳理了运筹学顶刊Management Science11月份发布的47篇文章的基本信息,旨在帮助读者快速洞察行业最新动态。本文为第一部分。 文章1 ● 题目:Discrimination and Economic Expectations 歧视与经济期望 ● 原文链…

不属于微型计算机特点的是什么,2017计算机应用基础模拟题及答案

2017计算机应用基础模拟题及答案一、选择题:1.过程控制的特点是( D )A.计算量大,数值范围广 B.数据输入输出量大,计算相对简单C.进行大量的图形交互操作 D.具有良好的实时性和高可靠性2.世界第一台电子计算机ENIAC诞生于(B )A.1945 B.1946 C.…

怎么修剪_幸福树怎么修剪——武汉花卉租摆

幸福树,一种寓意美好的观赏型植物,它生长非常迅速,稍不注意就长的非常茂盛。而要想保证幸福树的美貌,跟人的头发一样,我们要给它适当的修剪,那幸福树怎么修剪呢?为了大家能养出美丽的幸福树来&a…