时钟特效

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 时钟特效的更多相关文章

  1. 纯js时钟特效详细代码分析实例教程

    电子时钟是网上常见的功能,在学习date对象和定时器功能时,来完成一个电子时钟的制作是不错的选择.学习本教程之前,读者需要具备html和css技能,同时需要有简单的javascript基础. 先准备一 ...

  2. 第五章 JS典型特效

    注意: 1.JS在HTML中从上到下依次执行,所以获取元素的结果与JS的位置有关 <!DOCTYPE html> <html> <head> <title&g ...

  3. 未封装的js放大镜特效

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>j ...

  4. [ZZ+CH] Html5 canvas+js 时钟

    总之新Blog入驻以后,又开始老习惯,到处折腾自定义的空间,放些东西. 想起以前大一的时候做过一个Javascript的时间显示器,现在想做一个时钟,当然现在老奸巨猾,会先去看一看有前辈写过没. 前辈 ...

  5. 简单的javascript实例一(时钟特效)

    方便以后copy 时钟特效 <html> <head> <meta http-equiv="Content-Type" content="t ...

  6. Three.js粒子特效，shader渲染初探（一篇非常详细的介绍）

    Three.js粒子特效,shader渲染初探 转载来源:https://juejin.im/post/5b0ace63f265da0db479270a 这大概是个序 关于Three.js,网上有不多 ...

  7. 使用CSS3生成的电子时钟特效

    在线演示 本地下载 突然觉得自己对带工作的态度亟需改正,虽然不喜欢现在的加班生活,但是自己要去接受自己不喜欢的,才能获得自己喜欢的. 这是自己好久之前丛过的一个时钟,网上应该有这个的教程,虽然实现的效 ...

  8. JS实现时钟特效

    <!DOCTYPE html><html><head lang="en"><meta charset="UTF-8"& ...

  9. 原生JS投票特效

    效果:http://hovertree.com/texiao/js/24/ 效果图: 代码如下: <!DOCTYPE html> <html lang="en"& ...

随机推荐

  1. QT+常见控件+tab Widget 和Stacked Widget

    首先:这里介绍以下tab Widget 和Stacked Widget 之间的区别和使用的方法: tab Widget控件可以直接的进行切换,Stacked Widget却不可以直接在界面上进行切换, ...

  2. Linux-04 Linux中Tomcat和MySQL的安装

    1.下载apache-tomcat-7.0.79-tar.tar2.解压到当前用户目录,改名为tomcat [hduser@node1 ~]$ tar -zxvf apache-tomcat-7.0. ...

  3. Dubbo框架的说明

    说实话,自己现在做的项目中有用到dubbo,但是我所负责的那一个模块,并没有涉及到dubbo,想学习一下dubbo,之前是没有学习完,这次继续... 一.背景知识总结 二.服务治理 三.Dubbo架构 ...

  4. Luogu P3806 点分治模板1

    题意: 给定一棵有n个点的树询问树上距离为k的点对是否存在. 分析: 这个题的询问和点数都不多(但是显然暴力是不太好过的,即使有人暴力过了) 这题应该怎么用点分治呢.显然,一个模板题,我们直接用套路, ...

  5. C++之类成员的访问权限详解（一）

    概念解析 众所周知,面向对象编程语言的特征之一就是封装,不同编程语言对于封装提供的实现有所不同,但原理大体上是相同的.C++提供了三种不同程度的访问权限来实现,主要是通过public.private. ...

  6. Oracle批量更新数据,使用begin end

    /* 使用begin end批量更新 注意end后面必须使用;结束 并且每条update语句都要用;来结束 所以close为;END; 是为了补全语法 */ <foreach collectio ...

  7. 用户管理命令--useradd

    用户管理命令--useradd 作用:用于添加一个新的用户 格式:useradd [ 选项 ] 用户名 选项的常用介绍 -u: UID指定用户id,必须是唯一的,并且大于499 -c: 添加注释,可以 ...

  8. metasploitable2更改root密码

    metasploitable2这个系统众所周知,一个用户名和密码是msfadmin.但是这个账号权限不全,我们想要改root密码来登陆为所欲为.也没试过破解,咱们索性就改了吧. 就简单几行代码..   ...

  9. java面试微信交流群-欢迎你的加入

    Java后端技术专注Java相关技术:SSM.Spring全家桶.微服务.MySQL.MyCat.集群.分布式.中间件.Linux.网络.多线程,偶尔讲点运维Jenkins.Nexus.Docker. ...

  10. 自定义ngCloak

    场景: 一个非常复杂的表单页面,页面有5个标签,第五个标签中又有5个标签,也就是说一共有9个标签,每个标签中都有一个表单,表单之间相互关联.所有表单项(包括复合的),有80多个数据.全部东西写在一个h ...