没有合适的资源?快使用搜索试试~ 我知道了~
首页javascript实现倒计时并弹窗提示特效
javascript实现倒计时并弹窗提示特效
13 下载量 14 浏览量
更新于2023-03-16
评论
收藏 61KB PDF 举报
倒计时的功能在我们做项目的时候会经常遇到,这里给大家分享的是个人编写的一个简易的效果代码,有需要的小伙伴可以参考下
资源详情
资源评论
资源推荐
javascript实现倒计时并弹窗提示特效实现倒计时并弹窗提示特效
倒计时的功能在我们做项目的时候会经常遇到,这里给大家分享的是个人编写的一个简易的效果代码,有需要
的小伙伴可以参考下
在前端开发中,难免会用到倒计时。如做的双十一活动,在距活动开始的半个月前需要做些宣传工作,需要告知用户优惠活动
什么时候开始。这个时候就要用到倒计时,如在整站的某个页面提醒用户活动什么时候开始等。而在活动的后期,特别是在距
活动结束仅有1天左右时,就要用到弹窗倒计时。这个倒计时设置在整站的首页顶部(当然也可以设置在其它地方,如首页中
部等),并设置弹窗弹出10秒后自动消失,由用户决定是否点击到相应的活动页面,购买产品。
需要的技术支持:CSS3,jQuery库;
HTML代码如下:
<section class="the_body">
<div class="countdown">
<h3>距中国雄于地球之日还有</h3>
<div class="countdown_time">
<span class="the_days"><i>0</i><i>3</i></span>
<i class="date_text">天</i>
<span class="the_hours"><i>0</i><i>7</i></span>
<i class="date_text">时</i>
<span class="the_minutes"><i>4</i><i>7</i></span>
<i class="date_text">分</i>
<span class="the_seconds"><i>1</i><i>1</i></span>
<i class="date_text">秒</i>
</div>
</div>
</section>
css代码如下:
.the_body{width: 100%;max-width: 640px;min-width: 320px;margin: 0 auto;}
.countdown{background:#ffec20;padding: 10px 0;}
.countdown h3{margin:0;padding:5px 0;color:#f53544;text-align:center;font-size:14px;}
.countdown .countdown_time{display:block;width:100%;text-align:center;}
.countdown .countdown_time i{display:inline-block;position:relative;padding:0 3px;font-style:normal;background:#fff;
margin:0 2px;border-radius:3px;box-shadow:0px 1px 1px #ccc;border-bottom:1px solid #cfcfcf;font-weight
:bold;}
.countdown .countdown_time i:after{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:1px;left:0;}
.countdown .countdown_time i:before{content:"";width:100%;border:1px solid #cfcfcf;border-width:1px 0 0;position:absolute;
bottom:3px;left:0;}
.countdown .countdown_time .date_text{background:transparent;font-weight:bold;box-shadow:none;
border-bottom:none;text-decoration:none;padding: 0;}
.countdown .countdown_time .date_text:after{content:"";border:none;}
.countdown .countdown_time .date_text:before{content:"";border:none;}
JavaScript代码如下:
<script>
function remaintime() {
var date = new Date("Jan 1,2015 00:00:00");//设置倒计时结束时间
var nowdate = new Date();//获取当前日期
var remaintime = date.getTime() - nowdate.getTime();//获取现在到倒计时结束时间的毫秒数
var remainday = Math.floor(remaintime / (1000 * 60 * 60 * 24));//计算求得剩余天数
var remainhour = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24)/ (1000 * 60 * 60));//计算求得剩余小时数
var remainminute = Math.floor((remaintime - remainday * 1000 * 60* 60 * 24 - remainhour * 1000 * 60 * 60)/ (1000 * 60));//计算求得剩余分钟数
var remainsecond = Math.floor((remaintime - remainday * 1000 * 60 * 60 * 24- remainhour * 1000 * 60 * 60 - remainminute *
1000 * 60) / (1000));//计算求得剩余秒数
//当剩余天数小于10时,就在其前加一个0,以下剩余小时数、分钟数与秒数与此相同
if (remainday < 10) {
remainday = "0" + remainday;
}else{remainday+="";
//当剩余天数大于10时,剩余天数为数值,这是需要将该值转换为字符串,以下的剩余小时数、分钟数与秒数与此相同
}
if (remainhour < 10) {
remainhour = "0" + remainhour;
}else{remainhour+="";}
if (remainminute < 10) {
remainminute = "0" + remainminute;
}else{remainminute+="";}
if (remainsecond < 10) {
remainsecond = "0" + remainsecond;
}else{remainsecond+="";}
$(".the_days i:first-child").html(remainday.substr(0, 1));
$(".the_days i:last-child").html(remainday.substr(1, 2));
weixin_38689338
- 粉丝: 9
- 资源: 975
上传资源 快速赚钱
- 我的内容管理 收起
- 我的资源 快来上传第一个资源
- 我的收益 登录查看自己的收益
- 我的积分 登录查看自己的积分
- 我的C币 登录后查看C币余额
- 我的收藏
- 我的下载
- 下载帮助
会员权益专享
最新资源
- zigbee-cluster-library-specification
- JSBSim Reference Manual
- c++校园超市商品信息管理系统课程设计说明书(含源代码) (2).pdf
- 建筑供配电系统相关课件.pptx
- 企业管理规章制度及管理模式.doc
- vb打开摄像头.doc
- 云计算-可信计算中认证协议改进方案.pdf
- [详细完整版]单片机编程4.ppt
- c语言常用算法.pdf
- c++经典程序代码大全.pdf
- 单片机数字时钟资料.doc
- 11项目管理前沿1.0.pptx
- 基于ssm的“魅力”繁峙宣传网站的设计与实现论文.doc
- 智慧交通综合解决方案.pptx
- 建筑防潮设计-PowerPointPresentati.pptx
- SPC统计过程控制程序.pptx
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
安全验证
文档复制为VIP权益,开通VIP直接复制
信息提交成功
评论0