页面的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>