时钟特效

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. PHP15 Smarty模板

    学习目标 Smarty基本概念 Smarty安装和配置 Smarty模板设计 Smarty流程控制 Smarty基本概念 一种模板引擎,在系统中进行预处理和过滤数据.是主流的PHP模板引擎,此外PHP ...

  2. JavaEE-04 数据源配置

    学习要点 JNDI 数据库连接池 完成新闻发布系统数据库连接池 JNDI 说明 JNDI(Java Naming and Directory Interface),中文翻译为Java命名与目录接口,是 ...

  3. 「 SPOJ GSS3 」 Can you answer these queries III

    # 题目大意 GSS3 - Can you answer these queries III 需要你维护一种数据结构,支持两种操作: 单点修改 求一个区间的最大子段和 # 解题思路 一个区间的最大子段 ...

  4. 【转载】form表单的两种提交方式，submit和button的用法

    1.当输入用户名和密码为空的时候,需要判断.这时候就用到了校验用户名和密码,这个需要在jsp的前端页面写:有两种方法,一种是用submit提交.一种是用button提交.方法一: 在jsp的前端页面的 ...

  5. tomcat创建用户

    进入manager App时需要用户名+密码 输入错误时会出现页面如下: ​ 根据提示去服务器中找到tomcat目录下的tomcat-user.xml文件 在指定位置添加语句 <user use ...

  6. LeetCode（81） Search in Rotated Array II

    题目 Follow up for "Search in Rotated Sorted Array": What if duplicates are allowed? Would t ...

  7. 用python做分布式定时器

    分布式任务系统 (Python) github地址 https://github.com/thomashuang/Lilac/blob/master/README.rst 这里将介绍Liac的设计架构 ...

  8. BootStrap学习01框架搭建

    中文文档:https://v3.bootcss.com/css/ 开发工具 WebStorm 一.新建项目08bootstrap 引入bootstrap-3.3.7,引入jQuery,引入holder ...

  9. xtu字符串 B. Power Strings

    B. Power Strings Time Limit: 3000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java c ...

  10. zoj 1383 Binary Numbers

    Binary Numbers Time Limit: 2 Seconds      Memory Limit: 65536 KB Given a positive integer n, print o ...