时钟特效

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. CodeForces - 930A Peculiar apple-tree（dfs搜索）

    题目: 给出一个树,这棵树上每个结点每一秒都会结出一颗果实,果实每经过一秒就会落向下一个结点,如果一个结点在同一时刻上的果实两两抵消,问最后在根节点处一共有多少个果实. 思路: dfs直接搜索统计这棵 ...

  2. Centos7 使用firewall管理防火墙

    一.Centos7使用firewall的管理防火墙 1.firewalld基本使用 启动:systemctl start firewalld 关闭:systemctl stop firewalld 状 ...

  3. css搞定所有垂直居中问题

    单行文本 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <titl ...

  4. 交互式数据可视化－D3.js（四）形状生成器

    使用JavaScript和D3.js实现数据可视化 形状生成器 线段生成器 var linePath = d3.line() - 使用默认的设置构造一个 line 生成器. linePath.x() ...

  5. matlab自定义函数的五种表示（前2种重点）

    1.命令文件/函数文件+函数文件:多个M文件 2.函数文件+子函数:一个M文件 3. inline:无需M文件 4.符号表达式+subs方式:无需M文件 5.字符串+subs方式:无需M文件 第一种: ...

  6. xtu字符串 C. Marlon's String

    C. Marlon's String Time Limit: 2000ms Memory Limit: 65536KB 64-bit integer IO format: %lld      Java ...

  7. ERP类系统设计学习

    文章:分布式.服务化的ERP系统架构设计 文章的方法是对系统进行拆分,拆分成多个子系统.

  8. ubuntu使用git的时：Warning: Permanently added the RSA host key for IP address '13.250.177.223' to the list of known hosts.

    1:问题现象: hlp@hlp:~/code/github_code/catch_imooc1$ git push origin master Warning: Permanently added t ...

  9. Python的另一种开发环境--Anaconda中的Spyder

    本文作者LucyGill,转载请注明出处(虽然我觉得并不会有人转载). 刚开始学Python的时候,我用的是其自带的idle(安装Python后,在开始菜单里可以找到),后来发现在eclipse中设置 ...

  10. CodeForces - 462B Appleman and Card Game

    是一道简单题 将字母从个数多到小排序 然后 再按题目算法得到最多 但是注意 数据类型声明 money要为long long #include <iostream> #include < ...