ＳＱＬの窓
<< Java : JDialog で … | TOP | Windows7 : IIS 7.0… >>

2014年06月13日


jQuery のアナログ時計( 2個 )

 
※ 大きさの調整サンプルを作る為に２個の時計を実装しました

▼ 実行時の画像です



元記事

jQuery のアナログ時計
(オリジナルの CSS3Clock が不完全なので改良したコードです)


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<style type="text/css">
#position_wrapper {
	position: relative;
	width:600px;
	height:600px;
	border:1px solid #c0c0c0;
}

#clock {
	position: absolute;
	left:0px;
	top: 100px;
	width: 200px;
	height: 200px;
	background-image: url(http://winofsql.jp/image/clockface.jpg);
	background-size:contain;
	list-style: none;
	background-repeat:no-repeat;
	display:none;
}

#sec, #min, #hour {
	position: absolute;
	width: 10px;
	height: 200px;
	top: 0px;
	left: 95px;
	background-size:contain;
}

#sec,#sec2 {
	background-image: url(http://winofsql.jp/image/sechand.png);
	z-index: 3;
}

#min,#min2 {
	background-image: url(http://winofsql.jp/image/minhand.png);
	z-index: 2;
}

#hour,#hour2 {
	background-image: url(http://winofsql.jp/image/hourhand.png);
	z-index: 1;
}

#clock2 {
	position: absolute;
	left:200px;
	top: 100px;
	width: 400px;
	height: 400px;
	background-image: url(http://winofsql.jp/image/clockface.jpg);
	background-size:contain;
	list-style: none;
	background-repeat:no-repeat;
	display:none;
}

#sec2, #min2, #hour2 {
	position: absolute;
	width: 20px;
	height: 400px;
	top: 0px;
	left: 190px;
	background-size:contain;
}


</style>

<script type="text/javascript">
function set_time() {
	var hours = new Date().getHours();
	var mins = new Date().getMinutes();
	var seconds = new Date().getSeconds();

	var hdegree = hours * 30 + (mins / 2);
	var hrotate = "rotate(" + hdegree + "deg)";
	$("#hour,#hour2").css({"-moz-transform" : hrotate, "-webkit-transform" : hrotate, "transform" : hrotate});

	var mdegree = mins * 6;
	var mrotate = "rotate(" + mdegree + "deg)";
	$("#min,#min2").css({"-moz-transform" : mrotate, "-webkit-transform" : mrotate, "transform" : mrotate});

	var sdegree = seconds * 6;
	var srotate = "rotate(" + sdegree + "deg)";
	$("#sec,#sec2").css({"-moz-transform" : srotate, "-webkit-transform" : srotate, "transform" : srotate});

}

$(function() {
	set_time();
	$("#clock,#clock2").show();
	setInterval( function() {set_time();}, 1000 );
});

</script>

<div id="position_wrapper">
<ul id="clock">	
	<li id="hour"></li>
	<li id="min"></li>
	<li id="sec"></li>
</ul>

<ul id="clock2">	
	<li id="hour2"></li>
	<li id="min2"></li>
	<li id="sec2"></li>
</ul>

</div>
タグ：jquery javascript
【jQueryの最新記事】
posted by lightbox at 2014-06-13 11:52 | jQuery | このブログの読者になる | 更新情報をチェックする



Powered by Seesaa
container 終わり



✅ フリーフォントで簡単ロゴ作成
✅ フリーフォントでボタン素材作成
✅ フリーフォントで吹き出し画像作成
✅ フリーフォントではんこ画像作成
✅ ほぼ自由に利用できるフリーフォント
✅ フリーフォントの書体見本とサンプル
✅ 画像を大きく見る為のウインドウを開くボタンの作成
✅ CSS ドロップシャドウの参考デモ
✅ イラストAC
✅ ぱくたそ
✅ 写真素材 足成
✅ フリーフォント一覧
✅ utf8 文字ツール
右サイド 終わり
base 終わり