[Часы с компасом (версия для звездного неба) — написаны с использованием html, js, css. (Приложены все исходные коды + эффекты)】[Легко понять]
Всем привет, мы снова встретились, я ваш друг Цюаньчжаньцзюнь.
Оглавление
Эффект
Измените фон:
исходный код
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CSDN---охотник за мечтами</title>
<link rel="stylesheet" href="css/clock.css">
</head>
<body>
<ul class="clock" id="helang-clock">
<hr>
</ul>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/clock.js"></script>
<script type="text/javascript"> $("#helang-clock").clock(); </script>
</body>
</html>clock.css
body{
font-size: 14px;
color: #ffffff;
font-family: 'Microsoft YaHei', 'Times New Roman', Times, serif;
background: url(../image/bg2.jpg) no-repeat;
padding: 0;
margin: 0;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;
}
.clock{
list-style: none;
margin: auto;
padding: 0;
width: 700px;
height: 700px;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
line-height: 20px;
user-select: none;
}
.clock .date{
position: absolute;
z-index: 1;
width: 100%;
height: 20px;
text-align: center;
top: 340px;
left: 0;
}
.clock .hour{
position: absolute;
z-index: 3;
width: 360px;
height: 20px;
top: 340px;
left: 170px;
transition: transform 0.3s ease-in-out 0s;
transform:rotate(0deg);
}
.clock .hour>div{
position: absolute;
width: 100%;
right: 0;
top: 0;
transition: transform 1s ease-in-out 0s;
transform:rotate(0deg);
}
.clock .hour>div>div{
float: right;
width: 60px;
text-align: right;
}
.clock .minute{
position: absolute;
z-index: 4;
width: 520px;
height: 20px;
top: 340px;
left: 90px;
}
.clock .sec{
position: absolute;
z-index: 5;
width: 680px;
height: 20px;
top: 340px;
left: 10px;
}
.clock>hr{
height: 0;
width: 0%;
position: absolute;
z-index: 1;
border: #ffffff solid 0;
border-bottom-width: 1px;
margin: 10px 0 0 0;
left: 50%;
top: 50%;
transition: width 0.3s ease-in-out 0s;
overflow: visible;
}
.clock>hr.active:before{
content: '';
display: block;
width: 5px;
height: 5px;
border-radius: 50%;
background-color: #ffffff;
top: -2px;
left: 0;
position: absolute;
}clock.js
$.fn.extend({
/* часы */
clock:function () {
var HL={
};
HL.$el=$(this);
HL.ZHCNArr=['ноль','один','два','три','четыре','пять','шесть','семь','восемь','девять','десять'];
/* Преобразовать в упрощенный китайский */
HL.changeZHCN=function (value) {
/* меньше, чем 10 */
if(value<10){
return this.ZHCNArr[value];
}
var val=value.toString(),str='';
/* все 10 */
if(val.charAt(1)==0){
if(val.charAt(0)!=1){
str=this.ZHCNArr[parseInt(val.charAt(0),10)];
}
str+=this.ZHCNArr[10];
return str;
}
/* меньше, чем 20 */
if(value<20){
str=this.ZHCNArr[10]+this.ZHCNArr[parseInt(val.charAt(1),10)];
return str;
}
str=this.ZHCNArr[parseInt(val.charAt(0),10)]+this.ZHCNArr[10]+this.ZHCNArr[parseInt(val.charAt(1),10)];
return str;
};
/* Установить дату */
HL.setDate=function(){
var yearStr='',monthStr='',dayStr='';
var y=this.dateInfo.year.toString();
for(var i=0;i<y.length;i++){
yearStr+=this.changeZHCN(parseInt(y.charAt(i),10));
}
monthStr=this.changeZHCN(this.dateInfo.month);
dayStr=this.changeZHCN(this.dateInfo.day);
if(this.els){
this.els.date.html(yearStr+'year'+monthStr+'month'+dayStr+'day');
}else {
this.$el.append('<li class="date">'+(yearStr+'Год'+monthStr+'луна'+dayStr+'день')+'</li>');
}
};
/* Установить час */
HL.setHour=function(){
var str='',rotateArr=[];
for(var i=1;i<=24;i++){
rotateArr.push(r=360/24*(i-1)*-1);
str+='<div><div>'+(this.changeZHCN(i))+'час</div></div>';
}
this.$el.append('<li class="hour on-hour">'+str+'</li>');
setTimeout(function () {
HL.$el.find(".on-hour>div").each(function (index,el) {
$(el).css({
"transform":"rotate("+rotateArr[index]+"deg)"
})
});
setTimeout(function () {
HL.setMinute();
},300);
},100)
};
/* Установить минуты */
HL.setMinute=function(){
var str='',rotateArr=[];
for(var i=1;i<=60;i++){
rotateArr.push(360/60*(i-1)*-1);
str+='<div><div>'+(this.changeZHCN(i))+'точка</div></div>';
}
this.$el.append('<li class="hour minute on-minute">'+str+'</li>');
setTimeout(function () {
HL.$el.find(".on-minute>div").each(function (index,el) {
$(el).css({
"transform":"rotate("+rotateArr[index]+"deg)"
})
});
setTimeout(function () {
HL.setSec();
},300)
},100);
};
/* Установить секунды */
HL.setSec=function(){
var str='',rotateArr=[];
for(var i=1;i<=60;i++){
rotateArr.push(360/60*(i-1)*-1);
str+='<div><div>'+(this.changeZHCN(i))+'Второй</div></div>';
}
this.$el.append('<li class="hour sec on-sec">'+str+'</li>');
setTimeout(function () {
HL.$el.find(".on-sec>div").each(function (index,el) {
$(el).css({
"transform":"rotate("+rotateArr[index]+"deg)"
})
});
setTimeout(function () {
HL.initRotate();
},1300);
},100);
};
/* Инициализировать положение прокрутки */
HL.initRotate=function(){
this.rotateInfo={
"h":360/24*(this.dateInfo.hour-1),
"m":360/60*(this.dateInfo.minute-1),
"s":360/60*(this.dateInfo.sec-1),
};
this.els={
"date":this.$el.find(".date"),
"hour":this.$el.find(".on-hour"),
"minute":this.$el.find(".on-minute"),
"sec":this.$el.find(".on-sec")
};
this.els.hour.css({
"transform":"rotate("+this.rotateInfo.h+"deg)"
});
this.els.minute.css({
"transform":"rotate("+this.rotateInfo.m+"deg)"
});
this.els.sec.css({
"transform":"rotate("+this.rotateInfo.s+"deg)"
});
setTimeout(function () {
HL.$el.find("hr").addClass("active").css({
"width":"49%"
});
HL.start();
},300);
};
/* запускать */
HL.start=function(){
setTimeout(function () {
if(HL.dateInfo.sec<=60){
HL.dateInfo.sec++;
var r=360/60*(HL.dateInfo.sec-1);
HL.els.sec.css({
"transform":"rotate("+r+"deg)"
});
HL.minuteAdd();
HL.start();
}else {
console.log(HL.dateInfo.sec)
}
},1000);
};
/* Добавлено минут */
HL.minuteAdd=function(){
if(HL.dateInfo.sec==60+1){
setTimeout(function () {
HL.els.sec.css({
"transform":"rotate(0deg)",
"transition-duration": "0s"
});
HL.dateInfo.sec=1;
setTimeout(function () {
HL.els.sec.attr("style","transform:rotate(0deg)");
},100);
HL.dateInfo.minute++;
var r=360/60*(HL.dateInfo.minute-1);
HL.els.minute.css({
"transform":"rotate("+r+"deg)"
});
HL.hourAdd();
},300);
}
};
/* Увеличенные часы */
HL.hourAdd=function(){
if(HL.dateInfo.minute==60+1){
setTimeout(function () {
HL.els.minute.css({
"transform":"rotate(0deg)",
"transition-duration": "0s"
});
HL.dateInfo.minute=1;
setTimeout(function () {
HL.els.minute.attr("style","transform:rotate(0deg)");
},100);
HL.dateInfo.hour++;
var r=360/24*(HL.dateInfo.hour-1);
HL.els.hour.css({
"transform":"rotate("+r+"deg)"
});
HL.dayAdd();
},300);
}
};
/* дни увеличились */
HL.dayAdd=function(){
if(HL.dateInfo.hour==24+1){
setTimeout(function () {
HL.els.hour.css({
"transform":"rotate(0deg)",
"transition-duration": "0s"
});
HL.dateInfo.hour=1;
setTimeout(function () {
HL.els.hour.attr("style","transform:rotate(0deg)");
},100);
var nowDate=new Date();
HL.dateInfo.year=nowDate.getFullYear();
HL.dateInfo.month=nowDate.getMonth()+1;
HL.dateInfo.day=nowDate.getDate();
HL.setDate();
},300);
}
};
/* инициализация */
HL.init=function(){
var nowDate=new Date();
this.dateInfo={
"year":nowDate.getFullYear(),
"month":nowDate.getMonth()+1,
"day":nowDate.getDate(),
"hour":nowDate.getHours(),
"minute":nowDate.getMinutes(),
"sec":nowDate.getSeconds()
};
console.log(this.dateInfo);
this.setDate();
this.setHour();
};
HL.init();
}
});jquery.min.js
Это небольшой плагин,Тоже похоже на сумку,Код слишком длинный,Я не буду помещать это здесь. . .
Вы можете скачать его с Baidu.,Найти легко~~Логика хранения кода：
Создайте новую папку, назовите ее «Часы компаса», а затем создайте в ней следующую папку:
Затем дайте коду, который я отправил выше, соответствующее имя и вставьте его в него.
Добавьте фоновое изображение самостоятельно!
позже,Я также загружу все файлы этого небольшого спецэффекта на“ресурс”середина,Друзья, которым это нужно, также могут скачать его прямо с него~~
Издатель: Лидер стека программистов полного стека, укажите источник для перепечатки: https://javaforall.cn/154113.html Исходная ссылка: https://javaforall.cn
Неразрушающее увеличение изображений одним щелчком мыши, чтобы сделать их более четкими артефактами искусственного интеллекта, включая руководства по установке и использованию.
Копикодер: этот инструмент отлично работает с Cursor, Bolt и V0! Предоставьте более качественные подсказки для разработки интерфейса (создание навигационного веб-сайта с использованием искусственного интеллекта).
Новый бесплатный RooCline превосходит Cline v3.1? ! Быстрее, умнее и лучше вилка Cline! (Независимое программирование AI, порог 0)
Разработав более 10 проектов с помощью Cursor, я собрал 10 примеров и 60 подсказок.
Я потратил 72 часа на изучение курсорных агентов, и вот неоспоримые факты, которыми я должен поделиться!
Идеальная интеграция Cursor и DeepSeek API
DeepSeek V3 снижает затраты на обучение больших моделей
Артефакт, увеличивающий количество очков: на основе улучшения характеристик препятствия малым целям Yolov8 (SEAM, MultiSEAM).
DeepSeek V3 раскручивался уже три дня. Сегодня я попробовал самопровозглашенную модель «ChatGPT».
Open Devin — инженер-программист искусственного интеллекта с открытым исходным кодом, который меньше программирует и больше создает.
Эксклюзивное оригинальное улучшение YOLOv8: собственная разработка SPPF | SPPF сочетается с воспринимаемой большой сверткой ядра UniRepLK, а свертка с большим ядром + без расширения улучшает восприимчивое поле
Популярное и подробное объяснение DeepSeek-V3: от его появления до преимуществ и сравнения с GPT-4o.
9 основных словесных инструкций по доработке академических работ с помощью ChatGPT, эффективных и практичных, которые стоит собрать
Вызовите deepseek в vscode для реализации программирования с помощью искусственного интеллекта.
Познакомьтесь с принципами сверточных нейронных сетей (CNN) в одной статье (суперподробно)
50,3 тыс. звезд! Immich: автономное решение для резервного копирования фотографий и видео, которое экономит деньги и избавляет от беспокойства.
Cloud Native｜Практика: установка Dashbaord для K8s, графика неплохая
Краткий обзор статьи — использование синтетических данных при обучении больших моделей и оптимизации производительности
MiniPerplx: новая поисковая система искусственного интеллекта с открытым исходным кодом, спонсируемая xAI и Vercel.
Конструкция сервиса Synology Drive сочетает проникновение в интрасеть и синхронизацию папок заметок Obsidian в облаке.
Центр конфигурации————Накос
Начинаем с нуля при разработке в облаке Copilot: начать разработку с минимальным использованием кода стало проще
[Серия Docker] Docker создает мультиплатформенные образы: практика архитектуры Arm64
Обновление новых возможностей coze | Я использовал coze для создания апплета помощника по исправлению домашних заданий по математике
Советы по развертыванию Nginx: практическое создание статических веб-сайтов на облачных серверах
Feiniu fnos использует Docker для развертывания личного блокнота Notepad
Сверточная нейронная сеть VGG реализует классификацию изображений Cifar10 — практический опыт Pytorch
Начало работы с EdgeonePages — новым недорогим решением для хостинга веб-сайтов
[Зона легкого облачного игрового сервера] Управление игровыми архивами
