Heim > Artikel > Web-Frontend > Uhreffekt implementiert durch jQuery CSS (kompatibel mit allen Browsern)_jquery
Uhreffekt implementiert durch jQuery CSS (kompatibel mit allen Browsern)_jquery
- WBOYOriginal
- 2016-05-16 15:17:321709Durchsuche
Das Beispiel in diesem Artikel beschreibt den von jQuery CSS implementierten Uhreffekt. Teilen Sie es als Referenz mit allen. Die Details lauten wie folgt:
Der Screenshot des Laufeffekts sieht wie folgt aus:
Hier gibt es keine großen Änderungen, die Funktion wird einfach implementiert. Wenn die Zeit lang ist, wird empfohlen, sie alle paar Minuten auszuführen. Uhrkalibrierung! Haha, es gibt jedenfalls Fehler, ich habe es nicht für dich korrigiert.
Der spezifische Code lautet wie folgt:
<!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>
Leser, die an weiteren Inhalten zu jQuery-Spezialeffekten interessiert sind, können sich die Spezialthemen auf dieser Website ansehen: „Zusammenfassung gängiger klassischer Spezialeffekte von jQuery“ und „Zusammenfassung der jQuery-Animation und Verwendung von Spezialeffekten"
Ich hoffe, dass dieser Artikel allen in der jQuery-Programmierung hilfreich sein wird.
Stellungnahme：
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Vorheriger Artikel：So erfassen und melden Sie JS-Fehler mithilfe von window.onerror_javascript-KenntnissenNächster Artikel：So erfassen und melden Sie JS-Fehler mithilfe von window.onerror_javascript-Kenntnissen
In Verbindung stehende Artikel
Mehr sehen- Eine eingehende Analyse der Bootstrap-Listengruppenkomponente
- Detaillierte Erläuterung des JavaScript-Funktions-Curryings
- Vollständiges Beispiel für die Generierung von JS-Passwörtern und die Erkennung der Stärke (mit Download des Demo-Quellcodes)
- Angularjs integriert WeChat UI (weui)
- Wie man mit JavaScript schnell zwischen traditionellem Chinesisch und vereinfachtem Chinesisch wechselt und wie Websites den Wechsel zwischen vereinfachtem und traditionellem Chinesisch unterstützen – Javascript-Kenntnisse