Forked from: Event's Human Clock diff(134) ホネホネ・クロック JS - forked from: Human Clock chabudai Follow 2010-08-08 20:46:48 License: MIT License Fork9 Fav40 View51271 FireFoxのみちゃんとしたスピードで表示されます。 * * Flash版はこちら * http://wonderfl.net/c/3gx1 Play Stop Reload Fullscreen Smart Phone Fork tree Readme JavaScript 62 lines HTML 13 lines CSS 64 lines FireFoxのみちゃんとしたスピードで表示されます。 * * Flash版はこちら * http://wonderfl.net/c/3gx1 ホネホネ・クロック JS - forked from: Human Clock Raphael 1.4.3 - JavaScript Vector Library /** * FireFoxのみちゃんとしたスピードで表示されます。 * * Flash版はこちら * http://wonderfl.net/c/3gx1 */ window.onload = function () { var updateView = (function() { var sec; return function () { var now = new Date(); if (now.getSeconds() == sec) return; var second = now.getSeconds(); var minute = now.getMinutes(); var hour = now.getHours(); //１つずつにする var hour1; if(hour < 10){ hour1 = 0; }else{ hour1 = Math.floor(hour / 10); } var hour2 = hour%10; var minute1; if(minute < 10){ minute1 = 0; }else{ minute1 = Math.floor(minute / 10); } var minute2 = minute%10; var second1; if(second < 10){ second1 = 0; }else{ second1 = Math.floor(second / 10); } var second2 = second%10; _updateView(hour1, hour2, minute1, minute2, second1, second2); } })(); setInterval(updateView, 500); function _updateView(h1, h2, m1, m2, s1, s2) { //alert(h1+""+h2+":"+m1+""+m2+":"+s1+""+s2); var _url = "http://www.chabudai.org/temp/wonderfl/honehone/img/"; $('#hour1').css("background-image", "url("+_url+"h" + h1 + ".gif)"); $('#hour2').css("background-image", "url("+_url+"hh" + h2 + ".gif)"); $('#minute1').css("background-image", "url("+_url+"m" + m1 + ".gif)"); $('#minute2').css("background-image", "url("+_url+"mm" + m2 + ".gif)"); $('#second1').css("background-image", "url("+_url+"s" + s1 + ".gif)"); $('#second2').css("background-image", "url("+_url+"ss" + s2 + ".gif)"); } } <div id="raphael_canvas"> <div id="hour1"></div> <div id="hour2"></div> <div id="minute1"></div> <div id="minute2"></div> <div id="second1"></div> <div id="second2"></div> </div> <script type="text/javascript" src="http://jsdo.it/lib/jquery-1.4.2.min/js"></script> ホネホネ・クロック JS - forked from: Human Clock html,body { margin:0px; padding:0px; background : #ffffff; } #raphael_canvas{ position: absolute; width: 465px; height: 465px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/tenten.gif); } #hour1{ position: absolute; width: 80px; height: 100px; top: 170px; left: 40px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #hour2{ position: absolute; width: 80px; height: 100px; top: 170px; left: 80px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #minute1{ position: absolute; width: 80px; height: 100px; top: 170px; left: 170px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #minute2{ position: absolute; width: 80px; height: 100px; top: 170px; left: 210px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #second1{ position: absolute; width: 80px; height: 100px; top: 170px; left: 300px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #second2{ position: absolute; width: 80px; height: 100px; top: 170px; left: 340px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } FireFoxのみちゃんとしたスピードで表示されます。 * * Flash版はこちら * http://wonderfl.net/c/3gx1 /** * FireFoxのみちゃんとしたスピードで表示されます。 * * Flash版はこちら * http://wonderfl.net/c/3gx1 */ window.onload = function () { var updateView = (function() { var sec; return function () { var now = new Date(); if (now.getSeconds() == sec) return; var second = now.getSeconds(); var minute = now.getMinutes(); var hour = now.getHours(); //１つずつにする var hour1; if(hour < 10){ hour1 = 0; }else{ hour1 = Math.floor(hour / 10); } var hour2 = hour%10; var minute1; if(minute < 10){ minute1 = 0; }else{ minute1 = Math.floor(minute / 10); } var minute2 = minute%10; var second1; if(second < 10){ second1 = 0; }else{ second1 = Math.floor(second / 10); } var second2 = second%10; _updateView(hour1, hour2, minute1, minute2, second1, second2); } })(); setInterval(updateView, 500); function _updateView(h1, h2, m1, m2, s1, s2) { //alert(h1+""+h2+":"+m1+""+m2+":"+s1+""+s2); var _url = "http://www.chabudai.org/temp/wonderfl/honehone/img/"; $('#hour1').css("background-image", "url("+_url+"h" + h1 + ".gif)"); $('#hour2').css("background-image", "url("+_url+"hh" + h2 + ".gif)"); $('#minute1').css("background-image", "url("+_url+"m" + m1 + ".gif)"); $('#minute2').css("background-image", "url("+_url+"mm" + m2 + ".gif)"); $('#second1').css("background-image", "url("+_url+"s" + s1 + ".gif)"); $('#second2').css("background-image", "url("+_url+"ss" + s2 + ".gif)"); } } <div id="raphael_canvas"> <div id="hour1"></div> <div id="hour2"></div> <div id="minute1"></div> <div id="minute2"></div> <div id="second1"></div> <div id="second2"></div> </div> <script type="text/javascript" src="http://jsdo.it/lib/jquery-1.4.2.min/js"></script> html,body { margin:0px; padding:0px; background : #ffffff; } #raphael_canvas{ position: absolute; width: 465px; height: 465px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/tenten.gif); } #hour1{ position: absolute; width: 80px; height: 100px; top: 170px; left: 40px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #hour2{ position: absolute; width: 80px; height: 100px; top: 170px; left: 80px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #minute1{ position: absolute; width: 80px; height: 100px; top: 170px; left: 170px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #minute2{ position: absolute; width: 80px; height: 100px; top: 170px; left: 210px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #second1{ position: absolute; width: 80px; height: 100px; top: 170px; left: 300px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } #second2{ position: absolute; width: 80px; height: 100px; top: 170px; left: 340px; background-repeat: no-repeat; background-image: url(http://www.chabudai.org/temp/wonderfl/honehone/img/honehone1.gif); } use an iframe compat browser, deer Tweet QR code Embed Design view Code view <script type="text/javascript" src="http://jsdo.it/blogparts/4K7S/js?view=design"></script><p class="ttlBpJsdoit" style="width: 465px; margin: 0; text-align: right; font-size: 11px;"><a href="http://jsdo.it/chabudai/4K7S" title="ホネホネ・クロック JS - forked from: Human Clock">ホネホネ・クロック JS - forked from: Human Clock - jsdo.it - share JavaScript, HTML5 and CSS</a></p> zip tags html5ジャナイ Tweet twitter Tags animation clock clock, dynamic figures, html5ジャナイ human, time, ほねほね ステキ Favorite by timothyqd masutee S.Falahati bureau.schne.. Mari.Moriguc.. quandle Carla.Magalh.. 225ryry washinokanto.. shamotron 123451234512.. rettuce siouxcitizen.. y_tti xxxYukihirox.. stwindfy asou_jp clockmaker gct256 5129horinouc.. ngtn cwccw watanabebeya.. nanlow paq zendenmushi mash osamX hokori fingaholic ebiallergy: nice Mayumi.Hara: animation happi_tan1: clock yuya: clock jscoder: clock,dynamicfigures,human,time, darkbaron191..: clock calmbooks: animationほねほね pocotan001: ステキ erotica7777: ほねほねほねほね chomeconic: ずっと見ちゃう！ Forked sort new page view favorite forked forked: ホネホネ・クロック JS - forked .. terajima.yut.. 00 1views 63/13/64 html5ジャナイ forked: ホネホネ・クロック JS - forked .. York.Lam 00 7views 63/13/64 html5ジャナイ forked: ホネホネ・クロック JS - forked .. York.Lam 00 2views 63/13/64 html5ジャナイ forked: ホネホネ・クロック JS - forked .. Stanley.Lim... 00 13views 63/13/64 html5ジャナイ 1 2 3 4 5 6 7 8 9 10NEXT>>
