这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟代码,非常好看,里面充分的利用了对jq+css的使用,希望对于各位程序猿有帮助
展示效果
项目目录展示
html代码
css部分代码
* {
margin: 0;
padding: 0;
}
body {
background-attachment: fixed;
color: #F5F4F6;
font-size: 12px;
font-weight: bold;
overflow: hidden;
width: 1000px;
height: 900px;
font-family: "微软雅黑";
background: url(1.jpg);
}
audio {
position: absolute;
right: 0;
opacity: 0.1;
transition: all 1s;
}
audio:hover {
opacity: 1;
}
.current {
color: #D1A3F7;
}
video {
z-index: -1;
/* object-fit: fill; */
position: fixed;
/* right: 0px;
bottom: 0px; */
min-width: 100%;
min-height: 100%;
/* height: auto;
width: auto; */
}
.main-content {
position: absolute;
top: 50%;
left: 50%;
}
.main-content .year {
position: relative;
top: -13px;
left: -38px;
text-align: center
}
.main-content .year span {
position: absolute;
width: 80px;
}
.main-content .month {
position: relative;
top: -13px;
left: 40px;
}
.month span {
position: absolute;
width: 60px;
}
.main-content .day {
position: relative;
top: -13px;
left: 85px;
}
.day span {
position: absolute;
width: 65px;
}
.main-content .week {
position: relative;
top: -13px;
left: 145px;
}
.week span {
position: absolute;
width: 65px;
}
.main-content .shichen {
position: relative;
top: -13px;
left: 200px;
}
.shichen span {
position: absolute;
width: 125px;
}
.main-content .hour {
position: relative;
top: -13px;
left: 240px;
}
.hour span {
position: absolute;
width: 60px;
}
.main-content .minute {
position: relative;
top: -13px;
left: 300px;
}
.minute span {
position: absolute;
width: 60px;
}
.main-content .second {
position: relative;
top: -13px;
left: 370px;
}
.second span {
position: absolute;
width: 60px;
}
js部分代码
config.js
var config={
'language_type':2,
'font_color':'#fff',
'pointer_color':'#fff',
/*'sound':0,
'sound_name':'cc.mp3',
'background_style':1,
'background_picture':'bg.jpg',
'background_video':'3.mp4',
'background_color':'#000000',*/
}
common.js
//这里显示简体字体
function numToSimp(n){
var str = "";
var units=parseInt(n%10);
var tens=parseInt(n/10);
var trans="零一二三四五六七八九十";
if(tens>1){
str=trans.charAt(tens);
}
if(tens!=0){
str+="十";
}
if(units!=0){
str += trans.charAt(units);
}
if(tens==0&&units==0){
str=trans[0];
}
return str;
}
//繁体字更玄学
function numToTrad(n){
var str = "";
var units=parseInt(n%10);
var tens=parseInt(n/10);
var trans="零一二三四五六七八九";
if(tens>1){
str=trans.charAt(tens);
}
if(tens!=0){
str+="十";
}
if(units!=0){
str += trans.charAt(units);
}
if(tens==0&&units==0){
str=trans[0];
}
return str;
}
//展示英文出来
function numToEng(n){
var str = "";
var units=parseInt(n%10);
var tens=parseInt(n/10);
var trans=[
["zero", "one", "two", "three", "four", "five", "six", "seven", "eight", "nine","ten", "eleven", "twelve", "thirteen", "fourteen", "fifteen", "sixteen", "seventeen", "eighteen", "nineteen"],
["twenty", "thirty", "forty", "fifty", "sixty", "seventy", "eighty", "ninety"],
];
if(n<20)
{
str=trans[0][n];
}else{
str=trans[1][tens-2];
if(units!=0){
str+=trans[0][units];
}
}
if(tens==0&&units==0){
str=trans[0][0];
}
return str;
}
function isLeapYear(year){
if(year % 4 == 0 && year %100 != 0 ||year % 400 == 0)
{
return true;
}else{
return false;
}
}
function getYear(type,year){
var res=""
var units=parseInt(year/1%10);
var tens=parseInt(year/10%10);
var hund=parseInt(year/100%10);
var thou=parseInt(year/1000%10);
switch(type){
case 0:
case 3:
res=year;
break;
case 1:
res=numToSimp(thou)+numToSimp(hund)+numToSimp(tens)+numToSimp(units);
break;
case 2:
res=numToTrad(thou)+numToTrad(hund)+numToTrad(tens)+numToTrad(units);
break;
}
return res;
}
/*
获取月份
参数:0 阿拉伯数字 1简体 2繁体 3英文
*/
function getMonths(type,month){
var months=new Array();
var monthsEng=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
var i=1;
switch (type) {
case 0:
for(i=month;i<=12;i++)
{
months.push(i);
}
for(i=1;i<month;i++)
{
months.push(i);
}
break;
case 1:
for(i=month;i<=12;i++)
{
months.push(numToSimp(i));
}
for(i=1;i<month;i++)
{
months.push(numToSimp(i));
}
break;
case 2:
for(i=month;i<=12;i++)
{
months.push(numToTrad(i));
}
for(i=1;i<month;i++)
{
months.push(numToTrad(i));
}
break;
case 3:
for(i=month-1;i<12;i++)
{
months.push(monthsEng[i]);
}
for(i=0;i<month-1;i++)
{
months.push(monthsEng[i]);
}
break;
}
return months;
}
function getdays(type,year,month,day){
var days=new Array();
var j=1;
var isLeap=isLeapYear(year);
switch (type) {
case 0:
case 3:
for(j=day;j<=31;j++)
{
days.push(j)
if(month==2&&isLeap&&j==29){
break;
}
if(month==2&&!isLeap&&j==28){
break;
}
if((month==2||month==4||month==6||month==9||month==11)&&j==30){
break;
}
}
for(j=1;j<day;j++){
days.push(j)
}
break;
case 1:
for(j=day;j<=31;j++)
{
days.push(numToSimp(j))
if(month==2&&isLeap&&j==29){
break;
}
if(month==2&&!isLeap&&j==28){
break;
}
if((month==2||month==4||month==6||month==9||month==11)&&j==30){
break;
}
}
for(j=1;j<day;j++){
days.push(numToSimp(j))
}
break;
case 2:
for(j=day;j<=31;j++)
{
days.push(numToTrad(j))
if(month==2&&isLeap&&j==29){
break;
}
if(month==2&&!isLeap&&j==28){
break;
}
if((month==2||month==4||month==6||month==9||month==11)&&j==30){
break;
}
}
for(j=1;j<day;j++){
days.push(numToTrad(j))
}
break;
}
return days;
}
function getShiChen(type,hour){
var shichen={
index:0,
str:""
};
switch(type){
case 0:
if(hour>=23||hour<1){
shichen.index=0;
shichen.str="23:00-1:00";
}
else if(hour>=1&&hour<3){
shichen.index=1;
shichen.str="1:00-3:00";
}
else if(hour>=3&&hour<5){
shichen.index=2;
shichen.str="3:00-5:00";
}
else if(hour>=5&&hour<7){
shichen.index=3;
shichen.str="5:00-7:00";
}
else if(hour>=7&&hour<9){
shichen.index=4;
shichen.str="7:00-9:00";
}
else if(hour>=9&&hour<11){
shichen.index=5;
shichen.str="9:00-11:00";
}
else if(hour>=11&&hour<13){
shichen.index=6;
shichen.str="11:00-13:00";
}
else if(hour>=13&&hour<15){
shichen.index=7;
shichen.str="13:00-15:00";
}
else if(hour>=15&&hour<17){
shichen.index=8;
shichen.str="15:00-17:00";
}
else if(hour>=17&&hour<19){
shichen.index=9;
shichen.str="17:00-19:00";
}
else if(hour>=19&&hour<21){
shichen.index=10;
shichen.str="19:00-21:00";
}
else if(hour>=21&&hour<23){
shichen.index=11;
shichen.str="21:00-23:00";
}
break;
case 1:
case 2:
if(hour>=23||hour<1){
shichen.index=0;
shichen.str="子时"
}
else if(hour>=1&&hour<3){
shichen.index=1;
shichen.str="丑时";
}
else if(hour>=3&&hour<5){
shichen.index=2;
shichen.str="寅时";
}
else if(hour>=5&&hour<7){
shichen.index=3;
shichen.str="卯时";
}
else if(hour>=7&&hour<9){
shichen.index=4;
shichen.str="辰时";
}
else if(hour>=9&&hour<11){
shichen.index=5;
shichen.str="巳时";
}
else if(hour>=11&&hour<13){
shichen.index=6;
shichen.str="午时";
}
else if(hour>=13&&hour<15){
shichen.index=7;
shichen.str="未时";
}
else if(hour>=15&&hour<17){
shichen.index=8;
shichen.str="申时";
}
else if(hour>=17&&hour<19){
shichen.index=9;
shichen.str="酉时";
}
else if(hour>=19&&hour<21){
shichen.index=10;
shichen.str="戌时";
}
else if(hour>=21&&hour<23){
shichen.index=11;
shichen.str="亥时";
}
break;
case 3:
if(hour>=23||hour<1){
shichen.index=0;
shichen.str="23pm to 1am"
}
else if(hour>=1&&hour<3){
shichen.index=1;
shichen.str="1am to 3am"
}
else if(hour>=3&&hour<5){
shichen.index=2;
shichen.str="3am to 5am"
}
else if(hour>=5&&hour<7){
shichen.index=3;
shichen.str="5pm to 7am"
}
else if(hour>=7&&hour<9){
shichen.index=4;
shichen.str="7pm to 9am"
}
else if(hour>=9&&hour<11){
shichen.index=5;
shichen.str="9pm to 11am"
}
else if(hour>=11&&hour<13){
shichen.index=6;
shichen.str="11am to 13pm"
}
else if(hour>=13&&hour<15){
shichen.index=7;
shichen.str="13pm to 15pm"
}
else if(hour>=15&&hour<17){
shichen.index=8;
shichen.str="15pm to 17pm"
}
else if(hour>=17&&hour<19){
shichen.index=9;
shichen.str="17pm to 19pm"
}
else if(hour>=19&&hour<21){
shichen.index=10;
shichen.str="19pm to 21pm"
}
else if(hour>=21&&hour<23){
shichen.index=11;
shichen.str="21pm to 23pm"
}
break;
}
return shichen;
}
function getShiChens(type,shichen){
var shichens=new Array();
var i=0;
var shichen0=["23:00-1:00","1:00-3:00","3:00-5:00","5:00-7:00","7:00-9:00","9:00-11:00","11:00-13:00","13:00-15:00","15:00-17:00","17:00-19:00","19:00-21:00","21:00-23:00"];
var shichen1=["子时","丑时","寅时","卯时","辰时","巳时","午时","未时","申时","酉时","戌时","亥时"];
var shichen3=["23pm to 1am","1am to 3am","3am to 5am","5pm to 7am","7pm to 9am","9pm to 11am","11am to 13pm","13pm to 15pm","15pm to 17pm","17pm to 19pm","19pm to 21pm","21pm to 23pm"];
switch(type){
case 0:
for(i=shichen.index;i<12;i++){
shichens.push(shichen0[i]);
}
for(i=0;i<shichen.index;i++){
shichens.push(shichen0[i]);
}
break;
case 1:
case 2:
for(i=shichen.index;i<12;i++){
shichens.push(shichen1[i]);
}
for(i=0;i<shichen.index;i++){
shichens.push(shichen1[i]);
}
break;
case 3:
for(i=shichen.index;i<12;i++){
shichens.push(shichen3[i]);
}
for(i=0;i<shichen.index;i++){
shichens.push(shichen3[i]);
}
break;
}
return shichens;
}
function getMonthEng(month){
var monthsEng=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sep","Oct","Nov","Dec"];
return monthsEng[month-1];
}
function getWeeks(type,week){
weeks=[];
weeksEng=["Sun","Mon","Tues","Wed","Thur","Fri","Sat"];
var i=0;
switch(type){
case 0:
case 1:
case 2:
for(i=week;i<7;i++){
weeks[i]="星期"+numToSimp(i);
if(i==0){
weeks[i]="星期日"
}
}
for(i=0;i<week;i++){
weeks[i]="星期"+numToSimp(i);
}
break;
case 3:
for(i=week;i<7;i++)
{
weeks.push(weeksEng[i]);
}
for(i=0;i<week;i++)
{
weeks.push(weeksEng[i]);
}
break;
}
return weeks;
}
function getWeek(type,week){
weekEng=["Sun","Mon","Tues","Wed","Thur","Fri","Sat"];
res="";
switch(type){
case 0:
case 1:
case 2:
if(week==0){
res="日"
}else{
res=numToSimp(week);
}
break;
case 3:
res=weekEng[week];
break;
}
return res;
}
function getHours(type,hour){
var hours=new Array();
var i=0;
switch(type){
case 0:
case 3:
for(i=hour;i<24;i++){
hours.push(i);
}
for(i=0;i<hour;i++){
hours.push(i);
}
break;
case 1:
for(i=hour;i<24;i++){
hours.push(numToSimp(i));
}
for(i=0;i<hour;i++){
hours.push(numToSimp(i));
}
break;
case 2:
for(i=hour;i<24;i++){
hours.push(numToTrad(i));
}
for(i=0;i<hour;i++){
hours.push(numToTrad(i));
}
break;
}
return hours;
}
function getMinutes(type,minute){
var minutes=new Array();
var i=0;
switch(type){
case 0:
case 3:
for(i=minute;i<60;i++){
minutes.push(i);
}
for(i=0;i<minute;i++){
minutes.push(i);
}
break;
case 1:
for(i=minute;i<60;i++){
minutes.push(numToSimp(i));
}
for(i=0;i<minute;i++){
minutes.push(numToSimp(i));
}
break;
case 2:
for(i=minute;i<60;i++){
minutes.push(numToTrad(i));
}
for(i=0;i<minute;i++){
minutes.push(numToTrad(i));
}
break;
}
return minutes;
}
function getSeconds(type,second){
var seconds=new Array();
var i=0;
switch(type){
case 0:
case 3:
for(i=second;i<60;i++){
seconds.push(i);
}
for(i=0;i<second;i++){
seconds.push(i);
}
break;
case 1:
for(i=second;i<60;i++){
seconds.push(numToSimp(i));
}
for(i=0;i<second;i++){
seconds.push(numToSimp(i));
}
break;
case 2:
for(i=second;i<60;i++){
seconds.push(numToTrad(i));
}
for(i=0;i<second;i++){
seconds.push(numToTrad(i));
}
break;
}
return seconds;
}
function isShichen(hour){
if(hour=="one h"||hour=="three h"||hour=="five h"||hour=="seven h"||hour=="nine h"||hour=="eleven h"||hour=="thirteen h"||hour=="fifteen h"||hour=="seventeen h"||hour=="nineteen h"||hour=="twentyone h"||hour=="twentythree h"
||hour=="1时"||hour=="3时"||hour=="5时"||hour=="7时"||hour=="9时"||hour=="11时"||hour=="13时"||hour=="15时"||hour=="17时"||hour=="19时"||hour=="21时"||hour=="23时"
||hour=="一时"||hour=="三时"||hour=="五时"||hour=="七时"||hour=="九时"||hour=="十一时"||hour=="十三时"||hour=="十五时"||hour=="十七时"||hour=="十九时"||hour=="二十一时"||hour=="二十三时"
||hour=="壹时"||hour=="叁时"||hour=="伍时"||hour=="柒时"||hour=="玖时"||hour=="拾壹时"||hour=="拾叁时"||hour=="拾伍时"||hour=="拾柒时"||hour=="拾玖时"||hour=="贰拾壹时"||hour=="贰拾叁时"
||hour=="1 h"||hour=="3 h"||hour=="5 h"||hour=="7 h"||hour=="9 h"||hour=="11 h"||hour=="13 h"||hour=="15 h"||hour=="17 h"||hour=="19 h"||hour=="21 h"||hour=="23 h"){
return true;
}
return false;
}
function updateDays(type,year,month,day){
var days=new Array();
var j=1;
var isLeap=isLeapYear(year);
switch (type) {
case 0:
case 3:
for(j=day;j<=31;j++)
{
days.push(j)
if(month==2&&isLeap&&j==29){
break;
}
if(month==2&&!isLeap&&j==28){
break;
}
if((month==2||month==4||month==6||month==9||month==11)&&j==30){
break;
}
}
for(j=1;j<day;j++){
days.push(j)
}
break;
case 1:
for(j=1;j<=31;j++)
{
days.push(numToSimp(j))
if(month==2&&isLeap&&j==29){
break;
}
if(month==2&&!isLeap&&j==28){
break;
}
if((month==2||month==4||month==6||month==9||month==11)&&j==30){
break;
}
}
for(j=1;j<day;j++){
days.push(numToSimp(j))
}
break;
case 2:
for(j=1;j<=31;j++)
{
days.push(numToTrad(j))
if(month==2&&isLeap&&j==29){
break;
}
if(month==2&&!isLeap&&j==28){
break;
}
if((month==2||month==4||month==6||month==9||month==11)&&j==30){
break;
}
}
for(j=1;j<day;j++){
days.push(numToTrad(j))
}
break;
}
return days;
}
function getFirstDay(type){
day=1;
switch (type) {
case 1:
day=numToSimp(day);
break;
case 2:
day=numToTrad(day);
break;
}
return day;
}
源码下载地址
https://download.csdn.net/download/qq_27939089/86052867
这是基于HTML+CSS+JQ做的一款炫酷的旋转时钟网页代码相关推荐
- Web前端——用CSS的常用样式制作一个炫酷的按钮
文章目录 笔记:CSS的常用样式 炫酷按钮效果实现 笔记:CSS的常用样式 边框以及弧度样式 border-width:边框的线条宽度. border-style:边框的样式,例如 solid实现 d ...
- 【每日一练】103—纯CSS实现的一款炫酷卡片效果
作者 | 杨小爱 写在前面 我们经常会在各大平台看到很多产品的卡片效果,以及一些个人单页网站上的个人资料介绍时,也会用到各种卡片效果来展示信息,这种卡片式的设计,可以帮助我们分门别类的归类各种信息,让 ...
- 【每日一练】36—CSS实现一款炫酷的3D 文本旋转效果
写在前面 关于CSS 3D的效果,我之前也分享过一些,在视频号上也有,当然,视频号上没有源码,有兴趣的小伙伴,可以跟着视频自己敲代码,当然,这些代码,我后面也会分享到我们的网站上,大家可以直接到网站上 ...
- 资源 | 做一款炫酷的机器人需要哪些学习资源(机器人资源Awesome系列)
翻译 | AI科技大本营 参与 | 赵博 SuiSui 为什么要制作机器人呢?想参加各种机器人大赛?看起来很炫酷?不过从学习角度说,机器人综合了信息技术.电子工程.机械学.程序设计.控制系统以及认知等 ...
- HTML+CSS+JS 实现抖音3D炫酷相册? 创意网页小礼物了解一下呗?(纪念日的小浪漫)
为心爱的人做一个超具创意的网页生日祝福吧❤(飘动爱心3D相册)HTML+CSS+JavaScript 是不是还没有给心爱的人准备小礼物呀,但是别担心,精心创作了一个"飘动爱心3D相册&quo ...
- python androidhelper 播放 音频_基于外置UAC音频设备做的一款录音Android Demo
UAC音频设备测试 1,使用BuildLibUSB项目编译libusb为so文件 2,在Android Studio 4.1.1中,新建一个项目,选择empty activity 3,在app目录中, ...
- CSS 3D炫酷的 旋转魔方
最近在复习HTML 和 CSS,把以前做的一些小例子拿出来分享一下,也加深自己的印象 css 是通过 transform 来实现3D旋转的,看代码之前,先复习一下相关知识 transform-orig ...
- 推荐几款炫酷的基于jquery的页面特效
1.基于jquery实现的带按钮的图片左右滚动切换 jquery带按钮的图片滚动切换代码是一款jquery制作带按钮的图片左右滚动切换特效代码 2.基于jQuery的图片上下左右无缝连续循环滚动 im ...
- 几款炫酷的CSS代码样式
目录 1.Neumorphism.io css 2.透明玻璃态生成器 3.盒子阴影 4.CSS 发光 5.渐变颜色按钮 6.3D旋转木马 7.CSS 发光图标 8.动画标签栏 1.Neumorphis ...
最新文章
- 不会但一定要了解的方面,python列表解析方式
- 可视化神器背后的奥秘
- Ant Design Vue 中 Tree 树形控件 defaultExpandAll 设置无效
- 困难是成功路上的垫脚石_Java是开发的垫脚石。 学习吧!
- 利用子网掩码划分子网
- r语言 运算符_R语言运算符
- python高效办公_Python高效办公|自动分发任务
- MySQL高级知识(八)——ORDER BY优化
- c# 如何调用非托管函数 (转)
- 如何将XDF转换成PDF(内容可编辑)
- 华为p8刷linux系统,华为手机助手ROM一键刷机
- java开发微信公众号支付全流程
- surface pro 写php,surface pro7尺寸
- python入侵手机_Python-Iocextract:高级入侵威胁标识符IoC提取工具
- 深入浅出深度学习Pytroch
- OpenCV总结6——stitcher
- 工作十年之感悟 -- 兼谈生活与人生
- 如何将Chrome设为iPhone和iPad上的默认Web浏览器
- 月嫂证考试试题及答案
- 解决chrome自动填充白色背景(input:-internal-autofill-previewed)问题