jQuery html5时钟插件制作在线定时闹钟铃声代码



221 882 295



特效描述:jQuery html5时钟插件 在线定时闹钟铃,带闹铃的jQuery时钟插件

代码结构

1. 引入CSS

<link href="css/style.css" rel="stylesheet" />

2. 引入JS

<script src="js/html5.js"></script>
<script src="js/jquery.min.js"></script>
<script src="js/moment.min.js"></script>
<script src="js/script.js"></script>

3. HTML代码

<div id="clock" class="light">
	<div class="display">
		<div class="weekdays"></div>
		<div class="ampm"></div>
		<div class="alarm"></div>
		<div class="digits"></div>
	</div>
</div>
<div class="button-holder">
	<a id="switch-theme" class="button">切换主题</a>
	<a class="alarm-button"></a>
</div>
<!-- The dialog is hidden with css -->
<div class="overlay">
	<div id="alarm-dialog">
		<h2>设置闹钟</h2>
		<label class="hours">
			时
			<input type="number" value="0" min="0" />
		</label>
		<label class="minutes">
			分
			<input type="number" value="0" min="0" />
		</label>
		<label class="seconds">
			秒
			<input type="number" value="0" min="0" />
		</label>
		<div class="button-holder">
			<a id="alarm-set" class="button blue">设置</a>
			<a id="alarm-clear" class="button red">清除</a>
		</div>
		<a class="close"></a>
	</div>
</div>
<div class="overlay">
	<div id="time-is-up">
		<h2>Time&#39;s up!</h2>
		<div class="button-holder">
			<a class="button blue">关闭</a>
		</div>
	</div>
</div>
<audio id="alarm-ring" preload>
	<source src="audio/ticktac.mp3" type="audio/mpeg" />
	<source src="audio/ticktac.ogg" type="audio/ogg" />
</audio>
<!-- JavaScript Includes -->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 顶部悬浮 底部悬浮 浮动导航菜单 导航切换 右键菜单 时间轴 图片广告 文字提示框 日历选择器 对联广告 图片切换 提示框/弹出层 时间日期插件 文字切换 layer 叠加浮动层 背景切换 lightbox 手风琴 Tooltip工具提示框 选项卡自动切换 浮动提示框 视频切换 html5弹窗动画 列表切换 渐隐切换 全屏切换 切换按钮 缩放切换 滚动切换 滑动选项卡切换 悬浮浮动漂浮 弹出层拖动 选项卡切换 滑动手风琴 窗口提示框 浮动提示框 日历日期时间

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到