一款jQuery倒计时提醒定时器代码,页面初始化时为60秒倒计时提醒,可以在输入框里设置想要的秒数,自动计算成上面的格式显示出来,提醒音乐可以单独播放,也可以自由设置音量、是否循环等,当然,也可以替换那个MP3文件。
页面的head部分,需引入3个必要的CSS样式文件、jQuery代码库和两个JS文件,代码如下:
<link type="text/css" rel="Stylesheet" href="Skin/Css/examples.css"/>
<link type="text/css" rel="Stylesheet" href="Skin/Css/example_start_stop.css"/>
<link type="text/css" rel="stylesheet" href="skin/pink.flag/jplayer.pink.flag.css"/>
<script src="js/jquery.min.js"></script>
<script type="text/javascript" src="Skin/Js/jquery.lwtCountdown-1.0.js"></script>
<script type="text/javascript" src="Js/jquery.jplayer.min.js"></script>
<style type="text/css">
.btn { background:#34779a; width:80px; border: #34779a 1px solid; cursor:pointer; text-align:center; text-decoration:none; color:#bdf; -moz-border-radius:5px; -webkit-border-radius:5px; border-radius:5px;}
.btn:hover{ background:#053650;}
</style>
接着设置计时器和播放器等的参数,代码如下:
<script language="javascript" type="text/javascript">
// Set the Countdown
var x=60;
jQuery(document).ready(function() {
$("#jquery_jplayer_1").jPlayer({
ready: function() {
$(this).jPlayer("setMedia", {
mp3: "Skin/Mp3/Warning.mp3"
});
},
swfPath: "js",
supplied: "mp3",
wmode: "window"
});
$("#alltime").blur(function() {
x = $("#alltime").val();
});
$('#countdown_dashboard').countDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': Math.floor(x / 60),
'sec': x % 60
},
onComplete: function() {
$("#jquery_jplayer_1").jPlayer("play");
}
});
});
// Stop countdown
function stop() {
$('#countdown_dashboard').stopCountDown();
}
// Start countdown
function start() {
$('#countdown_dashboard').startCountDown();
}
// reset and start
function reset() {
// alert(s);
$('#countdown_dashboard').stopCountDown();
$('#countdown_dashboard').setCountDown({
targetOffset: {
'day': 0,
'month': 0,
'year': 0,
'hour': 0,
'min': Math.floor(x / 60),
'sec': x % 60
},
onComplete: function() {
$("#jquery_jplayer_1").jPlayer("play");
}
});
$('#countdown_dashboard').startCountDown();
}
</script>
页面的body部分,主要分为计时器部分和音乐播放器部分,都用了多个div容器或div的嵌套结构,代码如下:
<div id="examples_container">
<!-- example start/stop -->
<div class="example_pane">
<div id="countdown_dashboard">
<div class="dash weeks_dash">
<span class="dash_title">周数</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">天数</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">小时</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">分钟</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">秒数</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
<div class="countdown_controls">
<input id="alltime" type="text" value="" style=" width:30px; margin-right:6px;border: #34779a 1px solid;background:#34779a; color:#fff;" />
<button onclick="stop()" class="btn">停止计时</button>
<button onclick="start()" class="btn">继续计时</button>
<button onclick="reset()" class="btn">重新计时</button>
</div>
</div>
<!-- END example start/stop -->
</div>
<div id="jquery_jplayer_1" class="jp-jplayer"></div>
<div id="jp_container_1" class="jp-audio">
<div class="jp-type-single">
<div class="jp-gui jp-interface">
<ul class="jp-controls">
<li><a href="javascript:;" class="jp-play" tabindex="1">播放</a></li>
<li><a href="javascript:;" class="jp-pause" tabindex="1">暂停</a></li>
<li><a href="javascript:;" class="jp-stop" tabindex="1">停止</a></li>
<li><a href="javascript:;" class="jp-mute" tabindex="1" title="mute">静音</a></li>
<li><a href="javascript:;" class="jp-unmute" tabindex="1" title="unmute">开声音</a></li>
<li><a href="javascript:;" class="jp-volume-max" tabindex="1" title="max volume">最大音</a></li>
</ul>
<div class="jp-progress">
<div class="jp-seek-bar">
<div class="jp-play-bar"></div>
</div>
</div>
<div class="jp-volume-bar">
<div class="jp-volume-bar-value"></div>
</div>
<div class="jp-current-time"></div>
<div class="jp-duration"></div>
<ul class="jp-toggles">
<li><a href="javascript:;" class="jp-repeat" tabindex="1" title="repeat">循环</a></li>
<li><a href="javascript:;" class="jp-repeat-off" tabindex="1" title="repeat off">单次</a></li>
</ul>
</div>
</div>
</div>
系统已开启自动识别垃圾评论机制,识别到的自动封号,下载出错或者资源有问题请联系全栈客服QQ 1915635791