js 时钟特效
时钟特效
CreateTime--2018年2月24日15:11:23
Author:Marydon
实现方式:都是基于HTML5的canvas标签实现的
款式一
借助jQuery插件实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="本网页内容描述">
<title>jQuery时钟特效展示</title>
<!-- 引入jQuery -->
<script type="text/javascript" src="D:\JAR\jquery\jquery-1.11.2.min.js"></script>
<!-- 引入jQuery时钟插件 -->
<script type="text/javascript" src="C:\Users\Marydon\Desktop\clock\js\jquery.thooClock.js"></script>
</head>
<body>
<!-- 指定盛放时钟的位置 -->
<div id="myclock"></div>
<script type="text/javascript">
// 定义时钟参数配置
$('#myclock').thooClock({
size:200,
brandText:'Marydon'
});
</script>
</body>
</html>
参数介绍
size:默认值:250。时钟的大小。
dialColor:默认值:'#000000'。时钟的前景色。可以是hex,颜色关键字,rgb或rgba颜色值。
dialBackgroundColor:默认值:'transparent'。时钟的背景颜色。
secondHandColor:默认值:'#F3A829'。时钟秒针的颜色。
minuteHandColor:默认值:'#222222'。时钟分针的颜色。
hourHandColor:默认值:'#222222'。时钟时针的颜色。
alarmHandColor:默认值:'#FFFFFF'。闹钟指示的颜色(闹钟指示只有在alarmTime设置为'hh:mm')时才可见。
alarmHandTipColor:默认值:'#026729'。闹钟指示的提示框颜色。
hourCorrection:默认值:'+0'。小时校正。例如:+5或-3。
alarmCount:默认值:1。闹钟会响多少次。
alarmTime:响闹钟的时间。可以是Date对象或字符串:hh,hh:mm,hh:mm:ss。
showNumerals:是否在时钟上显示数字。
brandText:时钟的品牌名称。
brandText2:时钟的产地名称。
onAlarm:闹钟的回调函数。
offAlarm:闹钟结束时的回调函数。
onEverySecond:这个函数会在每一秒都触发一次
效果展示
款式二
使用js实现
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="keywords" content="关键词,关键词">
<meta name="description" content="本网页内容描述">
<title>js时钟特效展示</title>
<!-- 引入自定义js时钟插件 -->
<script type="text/javascript" src="C:\Users\Marydon\Desktop\clock.min.js"></script>
</head>
<body>
<!-- 指定盛放时钟的位置 -->
<canvas id="canvas"></canvas>
<script type="text/javascript">
clockTest();
</script>
</body>
</html>
效果展示
相关推荐:
js 时钟特效的更多相关文章
- 纯js时钟特效详细代码分析实例教程
电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一 ...
- 第五章 JS典型特效
注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...
- 未封装的js放大镜特效
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...
- [ZZ+CH] Html5 canvas+js 时钟
总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...
- 简单的javascript实例一(时钟特效)
方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...
- Three.js粒子特效,shader渲染初探(一篇非常详细的介绍)
Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...
- 使用CSS3生成的电子时钟特效
在线演示 本地下载 突然觉得自己对带工作的态度亟需改正,虽然不喜欢现在的加班生活,但是自己要去接受自己不喜欢的,才能获得自己喜欢的. 这是自己好久之前丛过的一个时钟,网上应该有这个的教程,虽然实现的效 ...
- JS实现时钟特效
<!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...
- 原生JS投票特效
效果:http://hovertree.com/texiao/js/24/ 效果图: 代码如下: <!DOCTYPE html> <html lang="en"& ...
随机推荐
- zabbix4.2学习笔记系列
写在前面:对zabbix的接触始于对监控的了解,网上比较多zabbix相关博客,比较多基于3系列甚至2系列,最新开发版zabbix4.2版本已经出来,本博客基于4.2版本学习,参考官网4.2版本和网上 ...
- RestTemplate-postForObject源码
参数: 请求路径, 请求参数, 返回类型, 扩展模板变量
- EBS ORACLE采购对账单自动产生发票
只要传入个对账单号,然后跑数据抛到接口表,运行接口请求,就可以自动生成发票 create or replace package body pkg_ap_check_by_po is --创建ap发票 ...
- In line copy and paste to system clipboard
On the Wiki Wiki Activity Random page Videos Photos Chat Community portal To do Contribute Watch ...
- 普通平衡树(treap)
题干:6种操作: 1. 插入x数 2. 删除x数(若有多个相同的数,因只删除一个) 3. 查询x数的排名(若有多个相同的数,因输出最小的排名) 4. 查询排名为x的数 5. 求x的前驱(前驱定义为小于 ...
- linux破解root登录密码,并重置
重启系统后按'e'键,进入编辑模式,在'UTF -8'后空格输入'rd.break'后,按快捷键'Ctrl+X'进入新界面进行编辑,代码如下: switch_root:/# mount -o remo ...
- CSS3---box-shadow设置
1.box-shadow是向盒子添加阴影.支持添加一个或者多个. 2.box-shadow: X轴偏移量 Y轴偏移量 [阴影模糊半径] [阴影扩展半径] [阴影颜色] [投影方式]; 3.注意:ins ...
- 南邮CTF--bypass again
南邮CTF--bypass again 提示:依旧弱类型,来源hctf 解析: 源代码: if (isset($_GET['a']) and isset($_GET['b'])) { if ($_G ...
- Linux 配置yum本地安装源
cat /etc/system-release Red Hat Enterprise Linux Server release 7.0 (Maipo) 1 使用本地源得先挂载ISO光盘文件 # 可以创 ...
- 教你轻松在React Native中使用自定义iconfont
在react-native项目中我们一般使用到 react-native-vector-icons(这里不介绍如何使用react-native-vector-icons按照官方文档即可)但是当reac ...