网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
非常炫酷的js和css倒计时动画特效插件,可以自定义倒计时开始数据,通过点击一个开始倒计时按钮,屏蔽加速由小变大的弹出一个倒计时数字。
在页面中添加倒计时css样式代码
<link rel="stylesheet" href="./style.css">
倒计时html代码
<div class="container">
<nav> </nav>
<main>
<div class="animation-holder">
<div id="firework"></div>
<span id="count-down-number">5</span>
</div>
</main>
</div>
倒计时js代码
"use strict";
var span = document.getElementById("count-down-number");
var divToAnimate = document.getElementById("firework");
var fireworkHolder = (document.querySelector(".animation-holder"));
var START_VALUE = 11;
var number = START_VALUE;
window.setInterval(function () {
if (number > 0) {
var newFireWork = document.createElement("div");
newFireWork.id = "firework";
newFireWork.classList.add("animate");
fireworkHolder.appendChild(newFireWork);
number = number - 1;
span.innerText = number.toString();
}
else {
span.innerText = "点击重新开始";
span.classList.add("restart-text");
span.addEventListener("click", function () {
number = START_VALUE;
span.innerText = "";
span.classList.remove("restart-text");
});
}
}, 1500);
START_VALUE为倒计时起始数字,可以自定义起始数字。
转载请注明来源:js和css炫酷的倒计时动画特效插件
本文永久链接地址:https://www.moyouyouw.cn/code/925.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论