ホームページ >ウェブフロントエンド >jsチュートリアル >jQuery+cssで実現した時計効果(全ブラウザ対応)_jquery
この記事の例では、jQuery+css によって実装されたクロック効果について説明します。参考のために皆さんと共有してください。詳細は次のとおりです:
実行中のエフェクトのスクリーンショットは次のとおりです:
ここでは特に変更はありませんが、js の setTimeout メソッドを使用します。時間がかかる場合は、数分ごとに実行することをお勧めします。時計の校正!あはは、とにかく、間違いはあります。私はそれを修正しませんでした。
具体的なコードは次のとおりです:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script src="jquery-1.7.1.min.js" type="text/javascript"></script> <script type="text/javascript" > var addRadian = Math.PI / 30; var wrapper = null; var minutes = 0; var hours = 0; var secondsLineLength = 14; var secondLineLength = 20; function cloneObj(obj1) { var tempObj = {}; for (var i in obj1) { if (obj1.hasOwnProperty(i)) { tempObj[i] = obj1[i]; } } return tempObj; } function createMinute(po, r, text) { var minute = []; minute.push('<div class="minute" style="left:'); minute.push(po.x); minute.push('px; top:'); minute.push(po.y); minute.push('px;" >'); minute.push(text); minute.push('</div>'); wrapper.append(minute.join('')); } function createHour(po, r, text) { var minute = []; minute.push('<div class="hour" style="left:'); minute.push(po.x); minute.push('px; top:'); minute.push(po.y); minute.push('px;" >'); minute.push(text); minute.push('</div>'); wrapper.append(minute.join('')); } function initSeconds(text, center, range) { var now_seconds = new Date().getSeconds(); now_seconds = now_seconds > 0 ? now_seconds - 1 : 0; for (var i = 0; i < secondsLineLength + 1; i++) { createFlower(center, '●', range, (i + 1) * secondLineLength, Math.PI / 2 + (now_seconds) * addRadian, true, i == secondsLineLength ? true : false); } } function initMinutes(r, text, center) { var x = 0, y = 0; for (var i = 0; i < 60; i++) { x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength); y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength); createMinute({x: x,y: y}, r, text); } minutes = new Date().getMinutes(); waldedMinute(minutes); } function initHours(r, text, center) { var x = 0, y = 0; for (var i = 0; i < 60; i+=5) { x = center.x - Math.cos(Math.PI / 2 + i * addRadian) * (r + secondLineLength); y = center.y - Math.sin(Math.PI / 2 + i * addRadian) * (r + secondLineLength); createHour({ x: x, y: y }, r, text); } hours = new Date().getHours(); waldedHour(hours); } function waldedMinute(index) { var index = Math.floor((index % 60)) > 0 ? Math.floor((index % 60)) + 1 : 0; wrapper.find(".minute:lt(" + index + ")").css('color', "green"); if (index > 0) { wrapper.find(".minute:eq(0)").css('color', '#DDDDDD'); } } function waldedHour(index) { var index = Math.floor((index%12)) > 0 ? Math.floor((index%12)) + 1:0; wrapper.find(".hour:lt(" + index + ")").css('color', "green"); if(index > 0) { wrapper.find(".hour:eq(0)").css('color', '#494949'); } } function animation(obj, r, radian, range, center, text, last) { logNowTime(); radian += addRadian; var x = center.x - Math.cos(radian) * r; var y = center.y - Math.sin(radian) * r; obj.css({ "left": x, "top": y }); if (last && radian > Math.PI * 5 / 2 - 0.1) { radian = Math.PI / 2; minutes++; if (minutes < 60) { } else { if (minutes % 60 == 0) { hours++; if (hours % 12 != 0) { } else { wrapper.find(".hour").css('color', "#494949"); } waldedHour(hours); } else { wrapper.find(".minute").css('color', "#DDDDDD"); } } waldedMinute(minutes); } setTimeout(function () { animation(obj, r, radian, range, center, text, last); }, 1000); } function createFlower(center, text, range, r, radian, autoAnimate, last) { var flower = []; flower.push('<div class="second"'); flower.push(' style="left:'); flower.push(center.x); flower.push('px; top:'); flower.push(center.y); flower.push('px;'); flower.push(autoAnimate ? '" >' : 'color:red;" >'); flower.push(text); flower.push('</div>'); flower = $(flower.join('')); flower.appendTo(wrapper); //var r = (index + 1) * secondLineLength; if (autoAnimate) { animation(flower, r, radian, range, center, text, last); } } // 查看当前时间 function logNowTime() { var date = new Date(), hour = date.getHours(), minute = date.getMinutes(), second = date.getSeconds(); hour = hour < 10 ? "0" + hour : hour; minute = minute < 10 ? "0" + minute : minute; second = second < 10 ? "0" + second : second; $("#time").html("当前时间-" + hour + ":" + minute + ":" + second); } $(document).ready(function () { wrapper = $("#wrapper"), width = wrapper.width(), height = wrapper.height(), offLeft = parseInt(wrapper.offset().left), range = { x: offLeft, y: 0, x1: offLeft + width, y1: height }, center = { x: Math.round(width / 2) + offLeft, y: Math.round(height / 2) }; initHours(secondLineLength * secondsLineLength + 40, '●', center); initMinutes(secondLineLength * secondsLineLength + 20, '●', center); initSeconds('●', center, range); }); </script> <style type="text/css" > body { margin:0; padding:0; } #wrapper { margin:0 auto; width:1000px; height:780px; background:black; } .second { width:12px; height:12px; position:absolute; text-shadow:1px 1px 1px green; color:Green; } .minute { color:#DDDDDD; position:absolute;} .hour { color:#494949; position:absolute;} #time { font-size:30px; line-height:30px; text-shadow:2px 2px 2px green; text-align:center; } </style> </head> <body> <div id="time"></div> <div id="wrapper" > </div> </body> </html>
jQuery 特殊効果に関連するさらなるコンテンツに興味のある読者は、このサイトの特別トピック「jQuery の一般的な古典的な特殊効果の概要」および「jQuery アニメーションの概要」を参照してください。および特殊効果の使用"
この記事が jQuery プログラミングのすべての人に役立つことを願っています。