jQuery移动端网页秒表闹钟计时器源代码下载
2015-06-10 10:15:14  By: dwtedx

本Demo的使用jQuery实现的多功能秒表加闹钟以及计时器的功能、Demo里面使用了timepicker插件、另外还使用了CSS3动画效果、实现的倒计时的功能、效果和功能都非常棒、本Demo可做为一款插件导入到项目中使用、非常的方便

jquery定时器


CSS引入

<link type="text/css" rel="stylesheet" 
	href="assets/materialize/css/materialize.min.css">
<link type="text/css" rel="stylesheet" 
	href="assets/css/styles.css">
<link type="text/css" rel="stylesheet" 
	href="assets/jonthornton-jquery-timepicker/jquery.timepicker.css">


JS引入

<script src="assets/js/jquery-1.8.3.min.js"></script>
<script src="assets/materialize/js/materialize.min.js"></script>
<script src="assets/jonthornton-jquery-timepicker/
	jquery.timepicker.min.js"></script>
<script src="assets/js/hammer.js"></script>
<script src="assets/js/script.js"></script>
<script src="assets/js/alarm.js"></script>
<script src="assets/js/stopwatch.js"></script>
<script src="assets/js/timer.js"></script>


部分HTML

<div class="container timer hidden">
	<form>
		<div class="control input-field">
			<input id="timer-input" type="number">
			<label for="timer-input">分钟</label>
		</div>

		<a class="timer-btn start waves-effect">
			<i class="mdi-av-play-arrow"></i>
		</a>
		<a class="timer-btn pause waves-effect">
			<i class="mdi-av-pause"></i>
		</a>
		<a class="timer-btn reset waves-effect">
			<i class="mdi-av-replay"></i>
		</a>
		<div class="control checkbox">
			<input type="checkbox" id="timer-sounds" />
			<label for="timer-sounds">声音</label>
		</div>
	</form>
	<div class="clock inactive z-depth-1 waves-effect">0:00</div>
</div>


最后给贴上Demo的源代码、希望对大家有用、用兴趣的哥们可以下载看看

源代码下载链接: http://dwtedx.com/download.html?bdkey=s/1eQvp2Tk 密码: en3n

若资源对你有帮助、浏览后有很大收获、不妨小额打赏我一下、你的鼓励是维持我不断写博客最大动力

想获取DD博客最新代码、你可以扫描下方的二维码、关注DD博客微信公众号(ddblogs)

或者你也可以关注我的新浪微博、了解DD博客的最新动态:DD博客官方微博(dwtedx的微博)

如对资源有任何疑问或觉得仍然有很大的改善空间、可以对该博文进行评论、希望不吝赐教

为保证及时回复、可以使用博客留言板给我留言: DD博客留言板(dwtedx的留言板)

感谢你的访问、祝你生活愉快、工作顺心、欢迎常来逛逛


快速评论


技术评论

  • 该技术还没有评论、赶快抢沙发吧...
DD记账
top
+