时钟特效

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. Redis进阶例子

    工作中用到的RabbitMQ例子 , 但是最后没有用 , 用的CMQ , 顺便说下CMQ社区真的少 , 并且功能少 . 一.消息体 package com.bootdo.common.rabbitmq ...

  2. HTML页面中5种超酷的伪类选择器:hover效果

    想在自己的网站中应用超酷的hover效果吗?也许你可以从如下的这些实例中获得一些灵感,如果你喜欢这些效果,也可以直接拷贝代码并应用到你的站点. 给平淡的站点带来活力 hover效果能给网页增加一些动态 ...

  3. sin_addr.s_addr和sin_addr.S_un.S_addr

    sin_addr.s_addr和sin_addr.S_un.S_addr 先mark一下,等下写

  4. poj2368 Buttons

    题目描述 题解: 非常简单的巴什博弈问题. 简单来说保证$L+1$是$K$的因数即可. 决策是,先手取$x$个,后手就取$L+1-x$个. 那个$L>=2$真的很坑. 代码: #include& ...

  5. JDBC-Web项目导入mysql驱动包路径-Eclipse & Myeclipse

    初学JAVA,很多都不懂,开始听老师说导入数据库驱动包的时候是: 右键项目 -> Properties -> Java Build Path -> 右侧选项卡选择Libraries ...

  6. windows 上使用virtualenv进行python多版本转换

    近期因为需要在python2.7和Python3.6上进行工作学习,可是笔记本只配置了python3.6环境. 所以打算使用virtualenv这个强大的工具进行多版本转换: 一.首先,默认已经配置好 ...

  7. 【笔记】linux x86漏洞利用

    0x1任意代码执行是如何实现的? 任意代码执行使用一种叫“覆盖返回地址”的技术来实现.这种方式使得攻击者重写位于栈上的返回地址,这将导致任意代码执行.

  8. LeetCode（169）Majority Element

    题目 Given an array of size n, find the majority element. The majority element is the element that app ...

  9. [SHELL]awk的用法举例

    从初学awk到现在小有所成,非常感谢CUers的帮助,总结了下自己曾经遇到的问题和犯的错误,供初学者借鉴,因本人非计算机专业,对专业词汇可能有表述不对的地方,还请指正和补充! 1. awk '{cod ...

  10. XV6第一个进程

    第一个进程 本章通过第一个进程的创建来解释 xv6 是如何开始运行的,让我们得以一窥 xv6 提供的各个抽象是如何实现和交互的.xv6 尽量复用了普通操作的代码来建立第一个进程,避免单独为其撰写代码. ...