Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Updated Silly Clock from 2001

    <script type="text/javascript">
    <!--
    if ((document.getElementById) &&
    window.addEventListener || window.attachEvent){
    document.write('<input type="button" id="clockcontrol" value="Clock Off"/>');
    }
    //-->
    </script>

    <script type="text/javascript">
    <!--
    //Silly Clock - kurt.grigg@yahoo.co.uk
    if ((document.getElementById) &&
    window.addEventListener || window.attachEvent){

    (function(){

    //Configure here...

    //Clock colours
    var dCol = '#ffa000'; //date colour.
    var fCol = '#ff0a00'; //face colour.
    var sCol = '#ffffff'; //seconds colour.
    var mCol = '#00ff00'; //minutes colour.
    var hCol = '#00ff00'; //hours colour.

    //Controls
    var del = 0.4; //follow mouse speed.
    var rep = 30; //run speed (setTimeout).

    //End.

    var theDays = ["SUNDAY","MONDAY","TUESDAY","WEDNESDAY","THURSDAY","FRIDAY","SATURDAY"];
    var theMonths = ["JANUARY","FEBRUARY","MARCH","APRIL","MAY","JUNE","JULY","AUGUST","SEPTEMBER","OCTOBER","NOVEMBER"," DECEMBER"];


    var r,h,w;
    var d = document;
    var my = 10;
    var mx = 10;
    var timer = null;
    var vis = true;
    var ofy = 4;
    var ofx = 4;
    var ofst = 70;
    var date = new Date();
    var day = date.getDate();
    var year = date.getYear();
    if (year < 2000) year = year+1900;

    var dt = " " + theDays[date.getDay()] + " " + day + " " + theMonths[date.getMonth()] + " " + year;
    var todaysDate = dt.split("");
    var tdlen = todaysDate.length;

    var clockFace = "3 4 5 6 7 8 9 10 11 12 1 2";
    var cfa = clockFace.split(" ");
    var cflen = cfa.length;

    var hlen = 3;
    var mlen = 4;
    var slen = 5;

    var dims = 40;
    var Q1 = 360/cflen;
    var Q2 = 360/todaysDate.length;
    var handlen = dims/5;
    var dy = [];
    var dx = [];
    var zy = [];
    var zx = [];
    var theSeconds = [];
    var theMinutes = [];
    var theHours = [];
    var theDial = [];
    var theDate = [];

    var sum = tdlen + cflen + hlen + mlen + slen + 1;
    for (i = 0; i < sum; i++){
    dy[i] = 0;
    dx[i] = 0;
    zy[i] = 0;
    zx[i] = 0;
    }

    var pix = "px";
    var domWw = (typeof window.innerWidth == "number");
    var domSy = (typeof window.pageYOffset == "number");
    var idx = d.getElementsByTagName('div').length;

    var isButton = (d.getElementById("clockcontrol"));

    if (isButton)
    var controlButton = d.getElementById("clockcontrol");

    if (domWw) r = window;
    else{
    if (d.documentElement &&
    typeof d.documentElement.clientWidth == "number" &&
    d.documentElement.clientWidth != 0)
    r = d.documentElement;
    else{
    if (d.body &&
    typeof d.body.clientWidth == "number")
    r = d.body;
    }
    }

    var dialcss = "position:absolute;top:0px;left:0px;width:10px;height:10px;border-width:0px;margin:0px;"
    +"padding:0px;font-family:Arial;line-height:100%;font-size:10px;text-align:center;margin-left:auto;"
    +"margin-right:auto;-webkit-border-radius:50%; -moz-border-radius:50%;border-radius:50%;";

    var handscss = "position:absolute;background-color:#ffffff;top:0px;left:0px;width:2px;height:2px;margin:0px;"
    +"padding:0px;border-width:0px;-webkit-border-radius:50%;-moz-border-radius:50%;border-radius:50%;";

    for (i=0; i < tdlen; i++){
    d.write('<div id="_date'+(idx+i)+'" style="'+dialcss+';color:'+dCol+'">'+todaysDate[i]+'<\/div>');
    }

    for (i=0; i < cflen; i++){
    d.write('<div id="_face'+(idx+i)+'" style="'+dialcss+';color:'+fCol+'">'+cfa[i]+'<\/div>');
    }

    for (i=0; i < hlen; i++){
    d.write('<div id="_hours'+(idx+i)+'" style="'+handscss+';background-color:'+hCol+'"><\/div>');
    }

    for (i=0; i < mlen; i++){
    d.write('<div id="_minutes'+(idx+i)+'" style="'+handscss+';background-color:'+mCol+'"><\/div>');
    }

    for (i=0; i < slen; i++){
    d.write('<div id="_seconds'+(idx+i)+'" style="'+handscss+';background-color:'+sCol+'"><\/div>');
    }

    function winsize(){
    var oh,sy,ow,sx,rh,rw;
    if (domWw){
    if (d.documentElement && d.defaultView &&
    typeof d.defaultView.scrollMaxY == "number"){
    oh = d.documentElement.offsetHeight;
    sy = d.defaultView.scrollMaxY;
    ow = d.documentElement.offsetWidth;
    sx = d.defaultView.scrollMaxX;
    rh = oh-sy;
    rw = ow-sx;
    }
    else{
    rh = r.innerHeight;
    rw = r.innerWidth;
    }
    h = rh;
    w = rw;
    }
    else{
    h = r.clientHeight;
    w = r.clientWidth;
    }
    }

    function scrl(yx){
    var y,x;
    if (domSy){
    y = r.pageYOffset;
    x = r.pageXOffset;
    }
    else{
    y = r.scrollTop;
    x = r.scrollLeft;
    }
    return (yx == 0)?y:x;
    }

    function OnOff(){
    if (vis){
    vis = false;
    controlButton.value = "Clock On";
    }
    else{
    vis = true;
    controlButton.value = "Clock Off";
    Delay();
    }
    kill();
    }

    function kill(){
    if (vis)
    mouseControl(true);
    else
    mouseControl(false);
    }

    function mouseControl(needed){
    if (window.addEventListener){
    if (needed){
    d.addEventListener("mousemove",mouse,false);
    }
    else{
    d.removeEventListener("mousemove",mouse,false);
    }
    }
    if (window.attachEvent){
    if (needed){
    d.attachEvent("onmousemove",mouse);
    }
    else{
    d.detachEvent("onmousemove",mouse);
    }
    }
    }

    function mouse(e){
    var msy = (domSy)?window.pageYOffset:0;
    if (!e) e = window.event;
    if (typeof e.pageY == "number"){
    my = e.pageY + ofst - msy;
    mx = e.pageX + ofst;
    }
    else{
    my = e.clientY + ofst - msy;
    mx = e.clientX + ofst;
    }
    if (!vis) kill();
    }

    function theClock(){
    var time = new Date();

    var secs = time.getSeconds();
    var secOffSet = secs - 15;
    if (secs < 15){
    secOffSet = secs+45;
    }
    var sec = Math.PI * (secOffSet/30);

    var mins = time.getMinutes();
    var minOffSet = mins - 15;
    if (mins < 15){
    minOffSet = mins+45;
    }
    var min = Math.PI * (minOffSet/30);

    var hrs = time.getHours();
    if (hrs > 12){
    hrs -= 12;
    }
    var hrOffSet = hrs - 3;
    if (hrs < 3){
    hrOffSet = hrs+9;
    }
    var hr = Math.PI * (hrOffSet/6) + Math.PI * time.getMinutes()/360;

    for (i=0; i < slen; i++){
    theSeconds[i].top = dy[tdlen + cflen + hlen + mlen + i] + ofy + (i * handlen) * Math.sin(sec) + scrl(0) + pix;
    theSeconds[i].left = dx[tdlen + cflen + hlen + mlen + i] + ofx + (i * handlen) * Math.cos(sec) + pix;
    }

    for (i=0; i < mlen; i++){
    theMinutes[i].top = dy[tdlen + cflen + hlen + i] + ofy + (i * handlen) * Math.sin(min) + scrl(0) + pix;
    theMinutes[i].left = dx[tdlen + cflen + hlen + i] + ofx + (i * handlen) * Math.cos(min) + pix;
    }

    for (i=0; i < hlen; i++){
    theHours[i].top = dy[tdlen + cflen + i] + ofy + (i * handlen) * Math.sin(hr) + scrl(0) + pix;
    theHours[i].left = dx[tdlen + cflen + i] + ofx + (i * handlen) * Math.cos(hr) + pix;
    }

    for (i=0; i < cflen; i++){
    theDial[i].top = dy[tdlen + i] + dims * Math.sin(i * Q1 * Math.PI/180) + scrl(0) + pix;
    theDial[i].left = dx[tdlen + i] + dims * Math.cos(i * Q1 * Math.PI/180) + pix;
    }

    for (i=0; i < tdlen; i++){
    theDate[i].top = dy[i] + dims * 1.5 * Math.sin(-sec + i * Q2 * Math.PI/180) + scrl(0) + pix;
    theDate[i].left = dx[i] + dims * 1.5 * Math.cos(-sec + i * Q2 * Math.PI/180) + pix;
    }
    if (!vis) clearTimeout(timer);
    }

    function Delay(){
    if (!vis){
    dy[0]=-100;
    dx[0]=-100;
    }
    else{
    zy[0]=Math.round(dy[0]+=((my)-dy[0])*del);
    zx[0]=Math.round(dx[0]+=((mx)-dx[0])*del);
    }
    for (i=1; i < sum; i++){
    if (!vis){
    dy[i]=-100;
    dx[i]=-100;
    }
    else{
    zy[i]=Math.round(dy[i]+=(zy[i-1]-dy[i])*del);
    zx[i]=Math.round(dx[i]+=(zx[i-1]-dx[i])*del);
    }
    if (dy[i-1] >= h-80) dy[i-1]=h-80;
    if (dx[i-1] >= w-80) dx[i-1]=w-80;
    }
    timer = setTimeout(Delay,rep);
    theClock();
    }


    function init(){
    for (i=0; i < tdlen; i++){
    theDate[i] = d.getElementById("_date"+(idx+i)).style;
    }
    for (i=0; i < cflen; i++){
    theDial[i] = d.getElementById("_face"+(idx+i)).style;
    }
    for (i=0; i < hlen; i++){
    theHours[i] = d.getElementById("_hours"+(idx+i)).style;
    }
    for (i=0; i < mlen; i++){
    theMinutes[i] = d.getElementById("_minutes"+(idx+i)).style;
    }
    for (i=0; i < slen; i++){
    theSeconds[i] = d.getElementById("_seconds"+(idx+i)).style;
    }
    winsize();
    mouseControl(true);
    Delay();
    }

    if (window.addEventListener){
    window.addEventListener("resize",winsize,false);
    window.addEventListener("load",init,false);
    if (isButton){
    controlButton.addEventListener("click",OnOff,false);
    }
    }
    else if (window.attachEvent){
    window.attachEvent("onload",init);
    window.attachEvent("onresize",winsize);
    if (isButton){
    controlButton.attachEvent("onclick",OnOff);
    }
    }
    })();
    }//End.
    //-->
    </script>

  • #2
    Senior Coder jmrker's Avatar
    Join Date
    Aug 2006
    Location
    FL
    Posts
    3,097
    Thanks
    38
    Thanked 498 Times in 492 Posts
    If you are going to update the code, you might take the time to test it.

    In FF browser, only bottom half of display shows at the very top of the screen window.

  • #3
    New to the CF scene
    Join Date
    Sep 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts
    <style type="text/css">
    <!--
    html{
    height:100%;
    }
    //-->
    </style>


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •