怎样安装Dreamweaver的jquery扩展,我们通常会用dreamweaver这个网页设计软件来编写网页前台代码，在编写代码时会经常出现下拉的菜单供我们选择，为我们编写代码节省了很多的时间。这样......
2023-03-17 304 JQUERY DREAMWEAVER
jquery倒计时设计
来源：互联网
2023-03-16 23:53:40 298
很多网站都有倒计时功能，这里教大家做一个支持同页面多个倒计时基于jquery的做法。
工具/原料
- 工具用的最简单的EditPlus
- 下载一个jquery.js
方法/步骤
打开工具，点击左上角文件-选择新建一个html网页。如图：
这里有一段现成的html代码，有一些CSS样式不再这次的讲解之内，下列代码直接拷贝到工具里面就可以运行，先运行起来看效果我再讲过程。代码如下：
!doctype html>
html>
head>
meta charset="utf-8">
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://code.jquery.com/jquery-1.6.2.js">/script>
script type="text/javascript">
function timer(){
window.setInterval(function(){
$(".time-item").each(function(i){
var intDiff=parseInt($(this).attr('second'));
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;
$(this).find('#day_show').html(day "天");
$(this).find('#hour_show').html('s id="h">/s>' hour '时');
$(this).find('#minute_show').html('s>/s>' minute '分');
$(this).find('#second_show').html('s>/s>' second '秒');
intDiff--;
$(this).attr('second',intDiff);
});
}, 1000);
}
$(function(){
timer();
});
/script>
/head>
body>
h1>网页上的倒计时/h1>
div class="time-item" second="60">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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 class="time-item" second="120000">
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>
!--倒计时模块-->
/body>
/html>
讲解开始，其他html标签CSS样式全部过滤，直接看JQUERY代码。
script type="text/javascript">
function timer(){ //这里是添加一个JS方法
window.setInterval( //这里是只定时循环执行一次它包含的方法（也就是下面的方法）
function(){
$(".time-item").each(function(i){ //这里是给全部的div的class为time-item添加事件
var intDiff=parseInt($(this).attr('second')); //获取需要倒计时的总共秒数120为2两分钟。这里是在循环获取所有当前div的倒计时时间。
var day=0, //初始化天数
hour=0, //初始化小时数
minute=0, //初始化分钟数
second=0;//时间默认值
if(intDiff > 0){ //satrt 以下是一些时间计算，不用讲解了。
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);
} //end 时间计算结束
if (minute = 9) minute = '0' minute; //这里是拼装字符串，当分钟数小于9的时候我们会显示为09
if (second = 9) second = '0' second; //这里是拼装字符串，当秒数小于9的时候我们会显示为09
///////////////////////////////////////////////////
span id="day_show">0天/span>
strong id="hour_show">0时/strong>
strong id="minute_show">0分/strong>
strong id="second_show">0秒/strong>
/////////////////////////////////////////////////////
//以下四列代码是给头上用//包含的html标签赋值，并且只赋值给当前的div。
$(this).find('#day_show').html(day "天");
$(this).find('#hour_show').html('s id="h">/s>' hour '时');
$(this).find('#minute_show').html('s>/s>' minute '分');
$(this).find('#second_show').html('s>/s>' second '秒');
intDiff--;
$(this).attr('second',intDiff);
});
}, 1000); //jquery自带方法。1面执行一次方法。window.setInterval( function{}, 1000);
}
$(function(){
timer(); //开发网页自动调用timer()方法执行倒计时。
});
/script>
整个JS代码解释都有了，希望能帮助大家。实在不懂某一行代码，可以问问身边的人。这整段代码都相对来说过于简单。这是我在网上查找资料学习别人的源码自己再二次修改所得的倒计时。
注意事项
- 注意绑定class别写错了
- 还有div倒计时那里是总共的秒数，不是毫秒数。
以上方法由办公区教程网编辑摘抄自百度经验可供大家参考！
标签： JQUERY
相关文章
- 详细阅读
-
jQuery MiniUI 快速入门详细阅读
jQuery MiniUI 快速入门,前段时间由于工作的原因接触到MiiUI。感觉MiiUI很强大，使用起来也很舒服。下面我就带领大家快速的使用MiiUI。MiiUI-专业WeUI控件库它能缩短开发时......
2023-03-17 291 JQUERY
-
怎么使用JQuery Mobile开发移动网站详细阅读
怎么使用JQuery Mobile开发移动网站,现在越来越多的人用网站来做手机a,这样的好处是，可以做一个网站，基本上可以做到多个平台adroid,io,w,都可以使用。这里使用JQueryMoile......
2023-03-17 336 JQUERY