网页上的倒计时效果

最新推荐文章于 2022-04-27 17:56:12 发布
最新推荐文章于 2022-04-27 17:56:12 发布
阅读量126 收藏
点赞数
文章标签： xhtml javascript ViewUI
原文链接：http://www.cnblogs.com/youtianxia/p/3813059.html
版权

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jquery数字倒计时代码</title>
<style type="text/css">
h1{font-family:"微软雅黑";font-size:40px;margin:20px 0;;border-bottom:solid 1px #ccc;padding-bottom:20px;letter-spacing:2px;}
.time-item strong{background:#C71C60;color:#fff;line-height:49px;font-size:36px;font-family:Arial;padding:0 10px;margin-right:10px;border-radius:5px;box-shadow:1px 1px 3px rgba(0,0,0,0.2);}
#day_show{float:left;line-height:49px;color:#c71c60;font-size:32px;margin:0 10px;font-family:Arial, Helvetica, sans-serif;}
.item-title .unit{background:none;line-height:49px;font-size:24px;padding:0 10px;float:left;}
</style>
<script type="text/javascript" src="http://www.codefans.net/ajaxjs/jquery-1.6.2.min.js"></script>
<script type="text/javascript">
var intDiff = parseInt(60);//倒计时总秒数量
function timer(intDiff){
window.setInterval(function(){
var day=0,
hour=0,
minute=0,
second=0;//时间默认值
if(intDiff > 0){
day = Math.floor(intDiff / (60 * 60 * 24));
hour = Math.floor(intDiff / (60 * 60)) - (day * 24);
minute = Math.floor(intDiff / 60) - (day * 24 * 60) - (hour * 60);
second = Math.floor(intDiff) - (day * 24 * 60 * 60) - (hour * 60 * 60) - (minute * 60);
}
if (minute <= 9) minute = '0' + minute;
if (second <= 9) second = '0' + second;
$('#day_show').html(day+"天");
$('#hour_show').html('<s id="h"></s>'+hour+'时');
$('#minute_show').html('<s></s>'+minute+'分');
$('#second_show').html('<s></s>'+second+'秒');
intDiff--;
}, 1000);
}
$(function(){
timer(intDiff);
});
</script>
</head>
<body>
<div align="center" style="width:416px; margin:0 auto">
<h1>上谷战国红</h1>
<div class="time-item">
<span id="day_show">0天</span>
<strong id="hour_show">0时</strong>
<strong id="minute_show">0分</strong>
<strong id="second_show">0秒</strong>
</div>
</div>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
</html>

转载于:https://www.cnblogs.com/youtianxia/p/3813059.html

weixin_30293135
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
倒计时页面效果
m0_59735348的博客
05-02 196
<style> span { background-color: #333; color: #fff; } </style> <html> <span class="hour">1</span> : <span class="minute">2</span> : <span class="second">3</span> &lt.
javascript 读秒5,4,3,2,1,0执行动作代码,倒记时读秒显示代码
迷失曾经
07-12 1633
<!-- var wait_time = 5; //设置秒数(单位秒) var secs_time = 0; for(var i=1;i<=wait_time;i++) { window.setTimeout("sTimer("+i+")",i*1000); } function sTimer(num) { if(num==wait_time) { document.ge
前端小案例：自动跳转页面
lalala_dxf的博客
04-27 918
先看效果 具体实现步骤 1、显示页面效果 2、实现倒计时读秒效果 2.1 定义一个方法，获取span标签，修改span标签体内容 2.2 定义一个定时器，一秒执行以此该方法 具体代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <
时间倒数
小石头
04-15 406
var intDiff; function gradeId(gradeId){ intDiff = parseInt(60*40);//倒计时总秒数量 }else{ intDiff = parseInt(60*30);//倒计时总秒数量 } function timer(intDiff){ window.setInterval(function(){ var day=0, ...
Jquery时间倒数
weixin_30402085的博客
07-31 179
/* * 使用此时间倒数计时js需要引入jquery-1.7.2.min.js * 参数 * 使用时只需要条用timer(intDiff);方法 * intDiff:时间倒数的毫秒值（使用时只需在js中定义该变量并且赋值即可）int类型 * 页面显示需要<span id="day_show"></span> <span id="hour_show"&g...
jquery商城促销活动倒计时设置天,小时,分钟,秒且显示到期提示演示页面
12-04
jquery商城促销活动倒计时设置天,小时,分钟,秒且显示到期提示演示页面
基于django的网页倒计时
02-10
【标题】"基于django的网页倒计时"指的是在Web开发中使用Python的Django框架实现的一种动态显示倒计时的网页功能。这种功能常见于各类活动页面、竞赛报名截止或者线上活动开始前的预告，为用户提供清晰的时间提醒。 ...
烟花倒计时自适应网页模板
01-23
这个模板适用于各种活动宣传，尤其是节日庆典或大型活动的预告，通过动态的倒计时效果，吸引用户的注意力并增加期待感。 在网页设计中，自适应布局是关键元素之一，它意味着网页可以根据用户设备的屏幕尺寸和方向...
js定时器实现倒计时效果
10-19
主要为大家详细介绍了js定时器实现倒计时效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
JS实现的网页倒计时数字时钟效果
10-24
主要介绍了JS实现的网页倒计时数字时钟效果,是一款非常实用的javascript倒计时特效,具有一定参考借鉴价值,需要的朋友可以参考下
品牌上线倒计时网页模板
01-23
品牌上线倒计时网页模板是...综上所述，品牌上线倒计时网页模板的制作涵盖了前端开发的多个方面，包括设计、交互、技术和SEO。通过精心设计和编程，这样的网页能够有效地提升品牌曝光度，为品牌上线创造热烈的气氛。
计时器
weixin_38169927的博客
05-10 76
//不允许js代码。。。。。。。，直接写在这了var intDiff = parseInt(0);//计时总秒数量 function timer(intDiff){ window.setInterval(function(){ var day=0, hour=0, minute=0, second=0;//时...
前端页面中几种 倒计时效果的实现方式_DATE对象
chenwei1113的博客
02-27 1万+
    倒计时的效果在页面中是很常见的，尤其是在电商网站上，比如：距离双11还有多少天；登录到某个网站后，多少秒后跳转到首页；秒表的倒计时；时钟的效果等等……其核心是通过DATE对象来实现的。现在我们一起来看看吧！一、距离双11还有多少天&lt;!doctype html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8...
js实现倒数计时器功能
微也的博客
07-12 5975
正在学习js的路程中，今天知道了如何实现简单倒数计时的功能，比如说，可以用于设计考试定时功能，不是从0开始计时，而是从最后的规定时长开始，如02:00:00一直到00:00:00……现在开始学习，未设置天数的功能 首先，我们要明白几个方法， 1. setInterval( )方法可以按照指定的周期（以毫秒计）来调用函数或计算表达式，如setInterval(function(){}, 10
html中如何实现倒计时
JavaPanGo的博客
11-29 3万+
最近去银行的ATM机取钱的时候，发现每个页面都会有倒计时的显示，我就想着我能不能也做一个，其实很简单，就是在html中增加一个方法就可以。 window.onload=function(){ //一进该页面就加载以下方法 tick(); //显示右下角日期的方法 setInterval('countDow
前端页面实现倒计时效果的几种方法
热门推荐
Boboy
12-10 3万+
倒计时的效果在网站或其他平台剪得很多了吧，今天就让我们来看看实现它的几种方法吧！ 一 ——15分钟倒计时 <html> <head> <meta charset="UTF-8"> <title>15分钟倒计时</title> </head> <body> <div id="timer" style=...
JS-实现商品倒计时
一个大帅比的博客
11-18 2214
@if (item.Type == 1) { TimeSpan span = item.OrderEndTime - DateTime.Now;
js实时更新网页上的倒计时
最新发布
05-21
可以使用JavaScript中的定时器函数setInterval()，以一定的时间间隔不断更新倒计时显示。 以下是一个简单的示例代码： ... ``` <div id="countdown"></div> ...你只需修改目标日期时间戳，就可以实现不同的倒计时效果。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值