时钟特效

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_4_QpushButton的简单使用_对象树

    QpushButton的简单使用 1.1 按钮的创建 QPushButton *btn = new QPushButton; 1.2 btn -> setParent(this);设置父窗口 1 ...

  2. lspci详解分析

    lspci详解分析 一.PCI简介 PCI是一种外设总线规范.我们先来看一下什么是总线:总线是一种传输信号的路径或信道.典型情况是,总线是连接于一个或多个导体的电气连线,总 线上连接的所有设备可在同一 ...

  3. flash player vista or win7

    win10 or 8 firefox https://fpdownload.adobe.com/get/flashplayer/pdc/31.0.0.122/install_flash_player. ...

  4. 安装Windows10+Ubentu18双系统

    1.先安装Windows系统,安装完成后,使用磁盘管理工具划分出一定的freespace空间留给linux安装系统用. 2.使用Universal-USB-Installer制作ubentu启动U盘. ...

  5. 如何用纯 CSS 创作炫酷的同心矩形旋转动画

    效果预览 在线演示 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/bMvbRp 可交互视频教 ...

  6. Java学习关于随机数工具类--Random类

    Random类是伪随机数生成器.之所以称为伪随机数(pseudorandom),是因为它们只是简单的均匀分布序列.Random类定义了以下构造函数: Random() Random(long seed ...

  7. python025 Python3 正则表达式

    Python3 正则表达式 正则表达式是一个特殊的字符序列,它能帮助你方便的检查一个字符串是否与某种模式匹配. Python 自1.5版本起增加了re 模块,它提供 Perl 风格的正则表达式模式. ...

  8. hust训练赛20160330--B - 又见LKity

    Problem 2122 又见LKity Time Limit: 1000 mSec Memory Limit : 32768 KB  Problem Description 嗨!大家好,在Templ ...

  9. [Docker]容器镜像

     1.rootfs的基础知识 Mount namespaces 隔离的是文件系统挂接点,它使每个容器能看到不同的文件系统层次结构,即每当创建一个新容器时,希望容器进程看到的文件系统时一个独立的隔离环境 ...

  10. vagrant的学习 之 Yii2

    vagrant的学习 之 Yii2 本文根据慕课网的视频教程练习,感谢慕课网! 慕课视频学习地址:https://www.imooc.com/video/14218. 慕课的参考文档地址:https: ...