JS Clock effects

Clock effects createtime--2018 February 24 15:11:23author:marydon

Implementation: Both are based on the HTML5 canvas tag.

Style One

With the jquery plug-in implementation

<!DOCTYPE HTML><HTML>    <Head>        <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8">        <Metaname= "keywords"content= "keywords, keywords">        <Metaname= "description"content= "Content Description of this page">        <title>jquery clock Effects Show</title>        <!--Introducing jquery -                <Scripttype= "Text/javascript"src= "D:\JAR\jquery\jquery-1.11.2.min.js"></Script>        <!--introducing the jquery clock plugin -        <Scripttype= "Text/javascript"src= "C:\Users\Marydon\Desktop\clock\js\jquery.thooClock.js"></Script>        </Head><Body>    <!--specify the position of the clock to be placed -    <DivID= "Myclock"></Div>    <Scripttype= "Text/javascript">    //defining the Clock parameter configuration    $('#myclock'). Thooclock ({size: $, Brandtext:'Marydon'    }); </Script></Body></HTML>

Parameter introduction

Size: Default value: 250. The size of the clock.
Dialcolor: Default value: ' #000000 '. The foreground color of the clock. can be hex, color keyword, RGB or Rgba color value.
Dialbackgroundcolor: Default value: ' Transparent '. The background color of the clock.
Secondhandcolor: Default value: ' #F3A829 '. The color of the clock second hand.
Minutehandcolor: Default value: ' #222222 '. The color of the clock minute hand.
Hourhandcolor: Default value: ' #222222 '. The color of the clock hour.
Alarmhandcolor: Default value: ' #FFFFFF '. The color indicated by the alarm clock (the alarm indicates that it is only visible if AlarmTime is set to ' hh:mm ').
Alarmhandtipcolor: Default value: ' #026729 '. The color of the cue box indicated by the alarm.
Hourcorrection: Default value: ' +0 '. Hour correction. For example: +5 or-3.
Alarmcount: Default value: 1. How many times the alarm will ring.
AlarmTime: The time of the alarm clock. Can be a Date object or a string: Hh,hh:mm,hh:mm:ss.
Shownumerals: Whether the number is displayed on the clock.
Brandtext: The brand name of the clock.
BRANDTEXT2: The origin name of the clock.
Onalarm: The callback function of the alarm clock.
Offalarm: The callback function at the end of the alarm.
Oneverysecond: This function is triggered once every second

Effect Show

Style Two

Using JS implementation

<!DOCTYPE HTML><HTML>    <Head>        <Metahttp-equiv= "Content-type"content= "Text/html;charset=utf-8">        <Metaname= "keywords"content= "keywords, keywords">        <Metaname= "description"content= "Content Description of this page">        <title>JS Clock effect display</title>        <!--introducing the custom JS Clock plugin -        <Scripttype= "Text/javascript"src= "C:\Users\Marydon\Desktop\clock.min.js"></Script>        </Head><Body>    <!--specify the position of the clock to be placed -    <CanvasID= "Canvas"></Canvas>    <Scripttype= "Text/javascript">clocktest (); </Script></Body></HTML>

Effect Show

JS Clock effects