1.外部引用的js文件

①jquery版本：jquery-3.3.1.js（可以自己找一个jQuery版本，不要太旧就行）

<script type="text/javascript" src="js/jquery-3.3.1.js"></script>

②vue引入：vue.js

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

③cheshi9.js

const vm = new Vue({el: '#sum',data() {return {flag: ['零秒','一秒','二秒','三秒','四秒','五秒','六秒','七秒','八秒','九秒','十秒','十一秒','十二秒','十三秒','十四秒','十五秒','十六秒','十七秒','十八秒','十九秒','二十秒','二十一秒','二十二秒','二十三秒','二十四秒','二十五秒','二十六秒','二十七秒','二十八秒','二十九秒','三十秒','三十一秒','三十二秒','三十三秒','三十四秒','三十五秒','三十六秒','三十七秒','三十八秒','三十九秒','四十秒','四十一秒','四十二秒','四十三秒','四十四秒','四十五秒','四十六秒','四十七秒','四十八秒','四十九秒','五十秒','五十一秒','五十二秒','五十三秒','五十四秒','五十五秒','五十六秒','五十七秒','五十八秒','五十九秒'],flag_minute: ['零分','一分','二分','三分','四分','五分','六分','七分','八分','九分','十分','十一分','十二分','十三分','十四分','十五分','十六分','十七分','十八分','十九分','二十分','二十一分','二十二分','二十三分','二十四分','二十五分','二十六分','二十七分','二十八分','二十九分','三十分','三十一分','三十二分','三十三分','三十四分','三十五分','三十六分','三十七分','三十八分','三十九分','四十分','四十一分','四十二分','四十三分','四十四分','四十五分','四十六分','四十七分','四十八分','四十九分','五十分','五十一分','五十二分','五十三分','五十四分','五十五分','五十六分','五十七分','五十八分','五十九分'],flag_hour: ['十二时','一时','二时','三时','四时','五时','六时','七时','八时','九时','十时','十一时'],flag_mouth: [{name: '一月',flag: false},{name: '二月',flag: false},{name: '三月',flag: false},{name: '四月',flag: false},{name: '五月',flag: false},{name: '六月',flag: false},{name: '七月',flag: false},{name: '八月',flag: false},{name: '九月',flag: false},{name: '十月',flag: false},{name: '十一月',flag: false},{name: '十二月',flag: false}],flag_solar: [{name: '立春',flag: false,msg:'公历2月03－05日交节立春，二十四节气之首，是春季的第一个节气。立春，意味着新的一个轮回已开启，乃万物起始、一切更生之义也。立，是“开始”之意；春，代表着温暖、生长。立春后阳气开始上升，日照增加，风和日暖，意味着万物闭藏的冬季已过去，开始进入生长的季节，万物至此渐次复苏.'},{name: '雨水',flag: false,msg:'公历2月18－20日交节雨水节气标示着降雨开始，雨量渐增。雨雨水和谷雨、小满、小雪、大雪等节气一样，都是反映降水现象的节气，是古代农耕文化对于节令的反映。进入雨水节气，我国北方阴寒未尽，一些地方仍下雪，尚未入春，仍是很冷；南方大多数地方则是春意盎然，一幅早春的景象。'},{name: '惊蛰',flag: false,msg:'公历3月05－07日交节惊蛰的意思是天气回暖，春雷始鸣，惊醒蛰伏于地下冬眠的昆虫。“惊蛰”标志着仲春卯月的开始。作为全年气温回升最快的节气，我国北方大部分地区平均气温已升至0℃以上。南方沿江江南地区为8℃以上，而西南和华南已达10至15℃以上，早已是一派融融春光了，日照时数也有了明显的增加。'},{name: '春分',flag: false,msg:'公历3月20－22日交节春分时，太阳直射点在赤道上，此后太阳直射点继续北移，故春分也称“升分”。古时又称为“日中”、“日夜分”、“仲春之月”。南北半球昼夜平分，这天以后太阳直射位置继续由赤道向北半球推移，北半球开始昼长夜短。春分的意义，一是指一天时间白天黑夜平分，各为12小时；二是古时以立春至立夏为春季，春分正当春季三个月之中，平分了春季。'},{name: '清明',flag: false,msg:'公历4月04－06日交节“清明”的含义是气候暖和，草木萌动，杏桃开花，处处给人以清新明朗、欣欣向荣的感觉。此时气候清爽温暖，万物“吐故纳新”，草木始发新枝芽，万物开始生长，大地呈现春和景明之象。'},{name: '谷雨',flag: false,msg:'公历4月19－21日交节谷雨，是春季最后一个节气,顾名思义也就是播谷降雨的意思。在谷雨时节雨水会增多，大大有利于谷类农作物的生长。由于雨谷雨，这时田中的秧苗初插、作物新种，最需要雨水的滋润，所以说“春雨贵如油”。'},{name: '立夏',flag: false,msg:'公历5月05－07日交节夏季的第一个节气，表示盛夏时节的正式开始。万物至此皆长大，故名立夏也。从此进入夏天，万物生长旺盛。习惯上把立夏当作是气温显著升高，炎暑将临，雷雨增多，农作物进入旺季生长的一个最重要节气。'},{name: '小满',flag: false,msg:'公历5月20－22日交节“小满”节气，天气渐渐由暖变热，并且降水也会逐渐增多，小满节气意味着进入了大幅降水的雨季，雨水开始增多，往往会出现持续大范围的强降水。进入小满节气后，我国南方地区一般会降雨多、雨量大;北方，小满节气期间降雨很少，气温上升很快，与南方的温差进一步缩小。'},{name: '芒种',flag: false,msg:'公历6月21－22日交节芒种，谐音“忙种”，芒种的“种”字，是指谷黍类作物播种的节令。“芒种”到来预示着农民开始了忙碌的田间生活。气候特点：节雨量充沛，气温显著升高。农事：作物栽培。'},{name: '夏至',flag: false,msg:'公历6月21－22日交节夏至这天，太阳直射地面的位置到达一年的最北端，几乎直射北回归线，此时，北半球各地的白昼时间达到全年最长。夏至是太阳的转折点，这天过后它将走“回头路”，阳光直射点开始从北回归线向南移动，北半球白昼将会逐日减短。同时，夏至到来后，夜空星象也逐渐变成夏季星空。'},{name: '小暑',flag: false,msg:'公历7月06－08日交节小暑，是夏季的第五个节气，表示盛夏正式开始。暑，表示炎热的意思，小暑为小热，还不十分热。意指天气开始炎热，但还没到最热。此时，已是初伏前后。各地也进入雷暴最多的季节，常伴随着大风、暴雨。'},{name: '大暑',flag: false,msg:'公历7月22－24日交节大暑是一年中最热的节气，这时正值中伏前后，"湿热交蒸"在此时到达顶点。在我国很多地区，经常会出现摄氏40度的高温天气。大暑期间为一年最热时期，也是喜热作物生长速度最快的时期。这个时期气温最高，农作物生长最快，同时，很多地区的旱、涝、风灾等各种气象灾害也最为频繁。'},{name: '立秋',flag: false,msg:'公历8月07－09日交节进入秋季，意味着降雨、风暴、湿度等，处于一年中的转折点，趋于下降或减少；在自然界，万物开始从繁茂成长趋向萧索成熟。立秋并不代表酷热天气就此结束，初秋期间天气仍然很热。按照“三伏”的推算方法，“立秋”这天往往还处在中伏期间，也就是说，酷暑并没有过完，真正凉爽一般要到白露节气之后。酷热与凉爽的分水岭并不是在立秋节气。'},{name: '处暑',flag: false,msg:'公历8月22－24日交节“处”是终止的意思，处暑是表示炎热的酷暑结束，这时三伏已过或近尾声。由于受短期回热天气影响，处暑过后仍有持续高温，会感到闷热，天气由炎热向闷热转变。处暑节气处在短期回热天气期内，真正凉爽一般要到白露前后。'},{name: '白露',flag: false,msg:'公历9月07－09日交节白露是一个反映自然界气温变化的重要节令。古人以四时配五行，秋属金，金色白，故以白形容秋露。白露前后，夏日残留的暑气逐渐消失，天地的阴气上升扩散，天气渐渐转凉。白露节气基本结束了暑天的闷热，是秋季由闷热转向凉爽的转折点。 白露过后，天高云淡、气爽风凉。'},{name: '秋分',flag: false,msg:'公历9月22－24日交节秋分这一天同春分一样，阳光几乎直射赤道，昼夜几乎相等。从这一天起，阳光直射位置继续由赤道向南半球推移，北半球开始昼短夜长，南半球相反。秋分时节，我国大部分地区已经进入凉爽的秋季。'},{name: '寒露',flag: false,msg:'公历10月08－09交节寒露是一个反映气候变化特征的节气，寒露节气后，昼渐短，夜渐长，日照减少，热气慢慢退去，寒气渐生，昼夜的温差较大，晨晚略感丝丝寒意。古人将寒露作为寒气渐生的表征。从气候特点上看，寒露时节，南方秋意渐浓，气爽风凉，少雨干燥；北方广大地区已从深秋进入或即将进入冬季。'},{name: '霜降',flag: false,msg:'公历10月23－24交节霜降是秋季的最后一个节气，是秋季到冬季的过渡。霜降节气特点是早晚天气较冷、中午则比较热，昼夜温差大，秋燥明显。由于“霜”是天冷、昼夜温差变化大的表现，故以“霜降”命名这个表示“气温骤降、昼夜温差大”的节令。霜降时节，万物毕成，毕入于戌，阳下入地，阴气始凝。霜降过后，植物渐渐失去生机，大地一片萧索,气温骤降、昼夜温差大。霜降节气后，深秋景象明显，冷空气南下越来越频繁。'},{name: '立冬',flag: false,msg:'公历11月07－8日交节立冬是季节类节气，表示自此进入了冬季，意味着风雨、干湿、光照、气温等，处于转折点上，开始从秋季向冬季气候过渡。“秋收冬藏”，万物在冬季闭藏，冬季是享受丰收、休养生息的季节。白昼时间缩短，北半球获得太阳的辐射量越来越少，但由于此时地表在下半年贮存的热量还有一定的能量，所以还不很冷。'},{name: '小雪',flag: false,msg:'公历11月22－23交节小雪和大雪、雨水、谷雨、小满等节气一样，都是直接反映降水的节气。小雪节气是一个气候概念，它代表的是小雪节小雪节气是寒潮和强冷空气活动频数较高的节气。'},{name: '大雪',flag: false,msg:'公历12月6－08日交节大雪是直接反映降水的节气。节气大雪的到来，意味着天气会越来越冷，降水量渐渐增多。大雪节气最常见的就是降温、下雨或下雪。大雪节气是一个气候概念，它代表的是大雪节气期间的气候特征，即气温与降水量。'},{name: '冬至',flag: false,msg:'公历12月21－23交节冬至标示着北半球的太阳高度最小，白昼时间最短，但是冬至日的温度不是最低。冬至日是北半球各地一年中白昼最短的一天，并且越往北白昼越短。而冬至以后，阳光直射位置逐渐向北移动，北半球的白天就逐渐变长了。天文学上把立冬作为冬季的开始，冬至作为寒冷气候的开始。冬至之前通常不会很冷，冬季的真正寒天是在冬至之后。'},{name: '小寒',flag: false,msg:'公历1月05－07日交节小寒，标志着寒冬正式开始。冷气积久而寒，小寒是天气寒冷但还没有到极点的意思。它与大寒、小暑、大暑及处暑一样，都是表示气温冷暖变化的节气。小寒的天气特点是：天渐寒，尚未大冷。俗话有讲：“冷在三九”，由于隆冬“三九”也基本上处于该节气之内，因此有“小寒胜大寒”之讲法。'},{name: '大寒',flag: false,msg:'公历1月20－21日交节大寒同小寒一样，也是表示天气寒冷程度的节气。在我国部分地区，大寒不如小寒冷，但在某些年份和沿海少数地方，全年最低汽温仍然会出在大寒节气内。小寒、大寒是一年中雨水最少的时段。大寒以后，立春接着到来，天气渐暖。至此地球绕太阳公转了一周，完成了一个循环。'}],Arrays: [],flag_data: [{name: '一号',flag: false},{name: ' 二号',flag: false},{name: '三号',flag: false},{name: ' 四号',flag: false},{name: '五号',flag: false},{name: '六号',flag: false},{name: '七号',flag: false},{name: '八号',flag: false},{name: '九号',flag: false},{name: ' 十号',flag: false},{name: '十一号',flag: false},{name: '  十二号',flag: false},{name: '   十三号',flag: false},{name: '    十四号',flag: false},{name: '   十五号',flag: false},{name: ' 十六号',flag: false},{name: '  十七号',flag: false},{name: '   十八号',flag: false},{name: '    十九号',flag: false},{name: '     二十号',flag: false},{name: '二十一号',flag: false},{name: ' 二十二号',flag: false},{name: '  二十三号',flag: false},{name: '   二十四号',flag: false},{name: '二十五号',flag: false},{name: ' 二十六号',flag: false},{name: ' 二十七号',flag: false},{name: '  二十八号',flag: false},{name: '   二十九号 ',flag: false},{name: '   三十号 ',flag: false},{name: '   三十一号 ',flag: false}],flag_AP: [{name: '上午'},{name: '下午'}],NllNumber: []}},methods: {showMsg: function(index) {var this_ = thisvar sum = this_.flag_solarvar a = 0var b = 12// 处理后合格的字符串var newObject// 确保拿到需要的字符串var strings = sum[index].msg// 字符串分割var arrayy = strings.split('')var length = arrayy.length// 获取到的数组（循环中）var arrayOne// 获取数组转换的字符串（带','需要处理的）var stringOne = ''// 获取字符串并添加for (var i = 0; i < 10; i++) {arrayOne = arrayy.slice(a, b)// console.log(arrayOne.length)if (arrayOne.length !== 0) {stringOne = arrayOne.join()// console.log(stringOne)newObject = stringOne.replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '').replace(',', '')// 添加数组元素this.Arrays.push(newObject)}// 第一列个数和别的列字数不一样if (i === 0) {a += 12b += 20} else {a += 20b += 20}// if (this.Arrays[i] == 0) {//   this.NllNumber.push(i)// }}// console.log(this.NllNumber)// mmm = this.NllNumber// if (mmm !== undefined) {//   mmm.forEach(function(item, index) {//     document.getElementsByClassName('msg')[item].style.border = '0'//   })// }// console.log(mmm.length)// for (let j = 0; j < mmm.length; j++) {//   document.getElementsByClassName('msg')[mmm[0]].style.border = '0'// }},hideMsg: function() {this.Arrays = []this.NllNumber = []}}
})// 秒数圈动作控制
var number = 0
//  window.onload =
function sell() {var data = new Date()var second = data.getSeconds() + 1number = second * -6document.getElementById('second').setAttribute('style', '-webkit-transform:rotate' + '(' + number + 'deg)')var myVar = setInterval(function() {sell_one()}, 1000)
}function sell_one() {document.getElementById('second').setAttribute('style', '-webkit-transform:rotate' + '(' + number + 'deg)')number += -6
}
sell()// 分数圈控制// var number_minute = 0
// function minutes() {
//   var data = new Date()
//   var minute = data.getMinutes()
//   number_minute = minute * -6
//   document
//     .getElementById('minute')
//     .setAttribute(
//       'style',
//       'transform:rotate' + '(' + number_minute + 'deg)'
//     )
//   var myVar = setInterval(function() {
//     sell_two()
//   }, 1000)
// }// function sell_two() {
//   document
//     .getElementById('minute')
//     .setAttribute(
//       'style',
//       'transform:rotate' + '(' + number_minute + 'deg)'
//     )
//   number_minute += -6
// }// minutes()var number_minute = 0
function minutes() {var myVar = setInterval(function() {sell_two()}, 1000)
}function sell_two() {var data = new Date()var minute = data.getMinutes()number_minute = minute * -6document.getElementById('minute').style.webkitTransform ='rotate' + '(' + number_minute + 'deg)'
}
minutes()// 小时控制
var number_hour = 0
function hours() {var myVar = setInterval(function() {sell_three()}, 1000)
}function sell_three() {var data = new Date()var hour = data.getHours()// console.log(hour)number_hour = hour * -30document.getElementById('hour').style.webkitTransform ='rotate' + '(' + number_hour + 'deg)'
}
hours()// 年分控制
function year() {var data = new Date()var year = data.getFullYear()document.getElementById('yearAll').innerHTML = year + '年'
}year()// 节气控制
function solarAndMouth() {var data = new Date()var mouth = data.getMonth()var number_mouth = mouth * -30document.getElementById('mouth').style.webkitTransform ='rotate' + '(' + number_mouth + 'deg)'document.getElementById('solar').style.webkitTransform ='rotate' + '(' + number_mouth + 'deg)'
}
solarAndMouth()// data控制
function dates() {var data = new Date()var date = data.getDate()var number_date = date * -11.25 + 11.25document.getElementById('data').style.webkitTransform ='rotate' + '(' + number_date + 'deg)'
}
dates()// AP控制
function APS() {var data = new Date()var ap = data.getHours()if (ap > 12) {document.getElementById('AP').style.webkitTransform = 'rotate(180deg)'} else {document.getElementById('AP').style.webkitTransform = 'rotate(0deg)'}
}
APS()

2.外部引用的css文件

①ceshi9_1.css

* {padding: 0;margin: 0;
}
/* 此部分样式包括总，时，分,秒 */
body {background: rgba(14, 0, 8, 1);overflow: hidden;/* color: #fff !important; */color: #fff;font-size: 14px;/* perspective: 100px; */
}#sum {width: 730px;height: 730px;position: absolute;top: 50%;left: 50%;margin-left: -365px;margin-top: -365px;/* border: 1px dotted white; */box-sizing: border-box;display: flex;justify-content: center;align-items: center;/* transform: rotate(45deg);transform-origin: 50% 50%; */
}li {text-align: center;list-style-type: none;/* z-index: 10; *//* display: flex;justify-content: center;align-items: center; */
}#second {/* opacity: 0; */position: absolute;width: 600px;height: 600px;/* border: 1px solid white; */box-sizing: border-box;display: flex;justify-content: center;align-items: center;transition: all 1s;
}#second li {position: absolute;width: 80px;/* inline-size: auto; */height: 20px;
}#second ul {position: relative;left: -40px;top: -10px;/* background: transparent; */
}#minute {/* opacity: 0; */position: absolute;width: 500px;height: 500px;/* border: 1px solid #fff; */box-sizing: border-box;display: flex;justify-content: center;align-items: center;transition: all 1s;
}#minute li {position: absolute;width: 80px;height: 20px;/* z-index: 7; */
}#minute ul {position: relative;left: -40px;top: -10px;
}#hour {position: absolute;width: 400px;height: 400px;/* border: 1px solid white; */box-sizing: border-box;display: flex;justify-content: center;align-items: center;transition: all 1s;
}#hour li {position: absolute;width: 50px;height: 20px;
}#hour ul {position: relative;left: -25px;top: -10px;
}/* 遮罩 */
#shade {position: absolute;list-style-type: none;background: rgba(11, 87, 187, 0.7);width: 430px;height: 28px;left: 366px;/* z-index: 10; */
}
/* 秒数控制样式 */
#second ul li:nth-child(1) {transform: rotate(0) translateX(400px);
}#second ul li:nth-child(2) {transform: rotate(6deg) translateX(400px);
}#second ul li:nth-child(3) {transform: rotate(12deg) translateX(400px);
}#second ul li:nth-child(4) {transform: rotate(18deg) translateX(400px);
}#second ul li:nth-child(5) {transform: rotate(24deg) translateX(400px);
}#second ul li:nth-child(6) {transform: rotate(30deg) translateX(400px);
}#second ul li:nth-child(7) {transform: rotate(36deg) translateX(400px);
}#second ul li:nth-child(8) {transform: rotate(42deg) translateX(400px);
}#second ul li:nth-child(9) {transform: rotate(48deg) translateX(400px);
}#second ul li:nth-child(10) {transform: rotate(54deg) translateX(400px);
}#second ul li:nth-child(11) {transform: rotate(60deg) translateX(400px);
}#second ul li:nth-child(12) {transform: rotate(66deg) translateX(400px);
}
/* ===================================400============= */
#second ul li:nth-child(13) {transform: rotate(72deg) translateX(400px);
}#second ul li:nth-child(14) {transform: rotate(78deg) translateX(400px);
}#second ul li:nth-child(15) {transform: rotate(84deg) translateX(400px);
}
#second ul li:nth-child(16) {transform: rotate(90deg) translateX(400px);
}
#second ul li:nth-child(17) {transform: rotate(96deg) translateX(400px);
}
#second ul li:nth-child(18) {transform: rotate(102deg) translateX(400px);
}
#second ul li:nth-child(19) {transform: rotate(108deg) translateX(400px);
}
#second ul li:nth-child(20) {transform: rotate(114deg) translateX(400px);
}#second ul li:nth-child(21) {transform: rotate(120deg) translateX(400px);
}#second ul li:nth-child(22) {transform: rotate(126deg) translateX(400px);
}
/* ====================================400======== */
#second ul li:nth-child(23) {transform: rotate(132deg) translateX(400px);
}
#second ul li:nth-child(24) {transform: rotate(138deg) translateX(400px);
}
#second ul li:nth-child(25) {transform: rotate(144deg) translateX(400px);
}
#second ul li:nth-child(26) {transform: rotate(150deg) translateX(400px);
}
#second ul li:nth-child(27) {transform: rotate(156deg) translateX(400px);
}
#second ul li:nth-child(28) {transform: rotate(162deg) translateX(400px);
}#second ul li:nth-child(29) {transform: rotate(168deg) translateX(400px);
}#second ul li:nth-child(30) {transform: rotate(174deg) translateX(400px);
}#second ul li:nth-child(31) {transform: rotate(180deg) translateX(400px);
}
#second ul li:nth-child(32) {transform: rotate(186deg) translateX(400px);/* ==================================400======== */
}
#second ul li:nth-child(33) {transform: rotate(192deg) translateX(400px);
}
#second ul li:nth-child(34) {transform: rotate(198deg) translateX(400px);
}
#second ul li:nth-child(35) {transform: rotate(204deg) translateX(400px);
}
#second ul li:nth-child(36) {transform: rotate(210deg) translateX(400px);
}#second ul li:nth-child(37) {transform: rotate(216deg) translateX(400px);
}#second ul li:nth-child(38) {transform: rotate(222deg) translateX(400px);
}#second ul li:nth-child(39) {transform: rotate(228deg) translateX(400px);
}
#second ul li:nth-child(40) {transform: rotate(234deg) translateX(400px);
}
#second ul li:nth-child(41) {transform: rotate(240deg) translateX(400px);
}
#second ul li:nth-child(42) {transform: rotate(246deg) translateX(400px);
}
/* ====================================400====== */
#second ul li:nth-child(43) {transform: rotate(252deg) translateX(400px);
}
#second ul li:nth-child(44) {transform: rotate(258deg) translateX(400px);
}#second ul li:nth-child(45) {transform: rotate(264deg) translateX(400px);
}#second ul li:nth-child(46) {transform: rotate(270deg) translateX(400px);
}#second ul li:nth-child(47) {transform: rotate(276deg) translateX(400px);
}
#second ul li:nth-child(48) {transform: rotate(282deg) translateX(400px);
}
#second ul li:nth-child(49) {transform: rotate(288deg) translateX(400px);
}
#second ul li:nth-child(50) {transform: rotate(294deg) translateX(400px);
}
#second ul li:nth-child(51) {transform: rotate(300deg) translateX(400px);
}
#second ul li:nth-child(52) {transform: rotate(306deg) translateX(400px);
}
/* =========================== */
#second ul li:nth-child(53) {transform: rotate(312deg) translateX(400px);
}
#second ul li:nth-child(54) {transform: rotate(318deg) translateX(400px);
}#second ul li:nth-child(55) {transform: rotate(324deg) translateX(400px);
}#second ul li:nth-child(56) {transform: rotate(330deg) translateX(400px);
}#second ul li:nth-child(57) {transform: rotate(336deg) translateX(400px);
}
#second ul li:nth-child(58) {transform: rotate(342deg) translateX(400px);
}
#second ul li:nth-child(59) {transform: rotate(348deg) translateX(400px);
}
#second ul li:nth-child(60) {transform: rotate(354deg) translateX(400px);
}/* 分针样式 */#minute ul li:nth-child(1) {transform: rotate(0) translateX(340px);
}#minute ul li:nth-child(2) {transform: rotate(6deg) translateX(340px);
}#minute ul li:nth-child(3) {transform: rotate(12deg) translateX(340px);
}#minute ul li:nth-child(4) {transform: rotate(18deg) translateX(340px);
}#minute ul li:nth-child(5) {transform: rotate(24deg) translateX(340px);
}#minute ul li:nth-child(6) {transform: rotate(30deg) translateX(340px);
}#minute ul li:nth-child(7) {transform: rotate(36deg) translateX(340px);
}#minute ul li:nth-child(8) {transform: rotate(42deg) translateX(340px);
}#minute ul li:nth-child(9) {transform: rotate(48deg) translateX(340px);
}#minute ul li:nth-child(10) {transform: rotate(54deg) translateX(340px);
}#minute ul li:nth-child(11) {transform: rotate(60deg) translateX(340px);
}#minute ul li:nth-child(12) {transform: rotate(66deg) translateX(340px);
}
/* ===================================340============= */
#minute ul li:nth-child(13) {transform: rotate(72deg) translateX(340px);
}#minute ul li:nth-child(14) {transform: rotate(78deg) translateX(340px);
}#minute ul li:nth-child(15) {transform: rotate(84deg) translateX(340px);
}
#minute ul li:nth-child(16) {transform: rotate(90deg) translateX(340px);
}
#minute ul li:nth-child(17) {transform: rotate(96deg) translateX(340px);
}
#minute ul li:nth-child(18) {transform: rotate(102deg) translateX(340px);
}
#minute ul li:nth-child(19) {transform: rotate(108deg) translateX(340px);
}
#minute ul li:nth-child(20) {transform: rotate(114deg) translateX(340px);
}#minute ul li:nth-child(21) {transform: rotate(120deg) translateX(340px);
}#minute ul li:nth-child(22) {transform: rotate(126deg) translateX(340px);
}
/* ====================================340======== */
#minute ul li:nth-child(23) {transform: rotate(132deg) translateX(340px);
}
#minute ul li:nth-child(24) {transform: rotate(138deg) translateX(340px);
}
#minute ul li:nth-child(25) {transform: rotate(144deg) translateX(340px);
}
#minute ul li:nth-child(26) {transform: rotate(150deg) translateX(340px);
}
#minute ul li:nth-child(27) {transform: rotate(156deg) translateX(340px);
}
#minute ul li:nth-child(28) {transform: rotate(162deg) translateX(340px);
}#minute ul li:nth-child(29) {transform: rotate(168deg) translateX(340px);
}#minute ul li:nth-child(30) {transform: rotate(174deg) translateX(340px);
}#minute ul li:nth-child(31) {transform: rotate(180deg) translateX(340px);
}
#minute ul li:nth-child(32) {transform: rotate(186deg) translateX(340px);/* ==================================340*/
}
#minute ul li:nth-child(33) {transform: rotate(192deg) translateX(340px);
}
#minute ul li:nth-child(34) {transform: rotate(198deg) translateX(340px);
}
#minute ul li:nth-child(35) {transform: rotate(204deg) translateX(340px);
}
#minute ul li:nth-child(36) {transform: rotate(210deg) translateX(340px);
}#minute ul li:nth-child(37) {transform: rotate(216deg) translateX(340px);
}#minute ul li:nth-child(38) {transform: rotate(222deg) translateX(340px);
}#minute ul li:nth-child(39) {transform: rotate(228deg) translateX(340px);
}
#minute ul li:nth-child(40) {transform: rotate(234deg) translateX(340px);
}
#minute ul li:nth-child(41) {transform: rotate(240deg) translateX(340px);
}
#minute ul li:nth-child(42) {transform: rotate(246deg) translateX(340px);
}
/* ====================================340 */
#minute ul li:nth-child(43) {transform: rotate(252deg) translateX(340px);
}
#minute ul li:nth-child(44) {transform: rotate(258deg) translateX(340px);
}#minute ul li:nth-child(45) {transform: rotate(264deg) translateX(340px);
}#minute ul li:nth-child(46) {transform: rotate(270deg) translateX(340px);
}#minute ul li:nth-child(47) {transform: rotate(276deg) translateX(340px);
}
#minute ul li:nth-child(48) {transform: rotate(282deg) translateX(340px);
}
#minute ul li:nth-child(49) {transform: rotate(288deg) translateX(340px);
}
#minute ul li:nth-child(50) {transform: rotate(294deg) translateX(340px);
}
#minute ul li:nth-child(51) {transform: rotate(300deg) translateX(340px);
}
#minute ul li:nth-child(52) {transform: rotate(306deg) translateX(340px);
}
/* =========================== */
#minute ul li:nth-child(53) {transform: rotate(312deg) translateX(340px);
}
#minute ul li:nth-child(54) {transform: rotate(318deg) translateX(340px);
}#minute ul li:nth-child(55) {transform: rotate(324deg) translateX(340px);
}#minute ul li:nth-child(56) {transform: rotate(330deg) translateX(340px);
}#minute ul li:nth-child(57) {transform: rotate(336deg) translateX(340px);
}
#minute ul li:nth-child(58) {transform: rotate(342deg) translateX(340px);
}
#minute ul li:nth-child(59) {transform: rotate(348deg) translateX(340px);
}
#minute ul li:nth-child(60) {transform: rotate(354deg) translateX(340px);
}/* 时针控制样式 */#hour ul li:nth-child(1) {transform: rotate(0deg) translateX(290px);
}#hour ul li:nth-child(2) {transform: rotate(30deg) translateX(290px);
}#hour ul li:nth-child(3) {transform: rotate(60deg) translateX(290px);
}#hour ul li:nth-child(4) {transform: rotate(90deg) translateX(290px);
}#hour ul li:nth-child(5) {transform: rotate(120deg) translateX(290px);
}#hour ul li:nth-child(6) {transform: rotate(150deg) translateX(290px);
}#hour ul li:nth-child(7) {transform: rotate(180deg) translateX(290px);
}#hour ul li:nth-child(8) {transform: rotate(210deg) translateX(290px);
}#hour ul li:nth-child(9) {transform: rotate(240deg) translateX(290px);
}#hour ul li:nth-child(10) {transform: rotate(270deg) translateX(290px);
}#hour ul li:nth-child(11) {transform: rotate(300deg) translateX(290px);
}#hour ul li:nth-child(12) {transform: rotate(330deg) translateX(290px);
}

②ceshi9-2.css

/* 此部分样式写年，月，节气，日 *//* 字体引入 */
@font-face {font-family: fontOne;src: url(../font/文悦古典明朝.otf);
}/* 年分控制 */#year {position: absolute;display: flex;justify-content: center;align-items: center;transition: all 1s;
}/* 月份控制 */#mouth {/* opacity: 0; */position: absolute;width: 200px;height: 200px;/* border: 1px solid white; */box-sizing: border-box;display: flex;justify-content: center;align-items: center;transition: all 1s;
}#mouth li {position: absolute;width: 80px;/* inline-size: auto; */height: 20px;
}#mouth ul {position: relative;left: -40px;top: -10px;
}#mouth ul li:nth-child(1) {transform: rotate(0deg) translateX(100px);
}#mouth ul li:nth-child(2) {transform: rotate(30deg) translateX(100px);
}#mouth ul li:nth-child(3) {transform: rotate(60deg) translateX(100px);
}#mouth ul li:nth-child(4) {transform: rotate(90deg) translateX(100px);
}#mouth ul li:nth-child(5) {transform: rotate(120deg) translateX(100px);
}#mouth ul li:nth-child(6) {transform: rotate(150deg) translateX(100px);
}#mouth ul li:nth-child(7) {transform: rotate(180deg) translateX(100px);
}#mouth ul li:nth-child(8) {transform: rotate(210deg) translateX(100px);
}#mouth ul li:nth-child(9) {transform: rotate(240deg) translateX(100px);
}#mouth ul li:nth-child(10) {transform: rotate(270deg) translateX(100px);
}#mouth ul li:nth-child(11) {transform: rotate(300deg) translateX(100px);
}#mouth ul li:nth-child(12) {transform: rotate(330deg) translateX(100px);
}#solar {/* opacity: 0; */position: absolute;width: 300px;height: 300px;/* border: 1px solid white; */box-sizing: border-box;display: flex;justify-content: center;align-items: center;transform: rotate(0);transition: all 5s;z-index: 50;
}#solar li {position: absolute;width: 80px;/* inline-size: auto; */height: 20px;cursor:pointer;
}#solar ul {position: relative;left: -40px;top: -10px;
}#solar ul li:nth-child(1) {transform: rotate(22.5deg) translateX(210px);
}#solar ul li:nth-child(2) {transform: rotate(37.5deg) translateX(210px);
}#solar ul li:nth-child(3) {transform: rotate(52.5deg) translateX(210px);
}#solar ul li:nth-child(4) {transform: rotate(67.5deg) translateX(210px);
}#solar ul li:nth-child(5) {transform: rotate(82.5deg) translateX(210px);
}#solar ul li:nth-child(6) {transform: rotate(97.5deg) translateX(210px);
}#solar ul li:nth-child(7) {transform: rotate(112.5deg) translateX(210px);
}#solar ul li:nth-child(8) {transform: rotate(127.5deg) translateX(210px);
}#solar ul li:nth-child(9) {transform: rotate(142.5deg) translateX(210px);
}#solar ul li:nth-child(10) {transform: rotate(157.5deg) translateX(210px);
}#solar ul li:nth-child(11) {transform: rotate(172.5deg) translateX(210px);
}#solar ul li:nth-child(12) {transform: rotate(187.5deg) translateX(210px);
}
/* ===================================150200========== */
#solar ul li:nth-child(13) {transform: rotate(202.5deg) translateX(210px);
}#solar ul li:nth-child(14) {transform: rotate(217.5deg) translateX(210px);
}#solar ul li:nth-child(15) {transform: rotate(232.5deg) translateX(210px);
}
#solar ul li:nth-child(16) {transform: rotate(247.5deg) translateX(210px);
}
#solar ul li:nth-child(17) {transform: rotate(262.5deg) translateX(210px);
}
#solar ul li:nth-child(18) {transform: rotate(277.5deg) translateX(210px);
}
#solar ul li:nth-child(19) {transform: rotate(292.5deg) translateX(210px);
}
#solar ul li:nth-child(20) {transform: rotate(307.5deg) translateX(210px);
}#solar ul li:nth-child(21) {transform: rotate(322.5deg) translateX(210px);
}#solar ul li:nth-child(22) {transform: rotate(337.5deg) translateX(210px);
}
/* ======================================220====== */
#solar ul li:nth-child(23) {transform: rotate(352.5deg) translateX(210px);
}
#solar ul li:nth-child(24) {transform: rotate(367.5deg) translateX(210px);
}/* 日期控制 */#data {position: absolute;width: 300px;height: 300px;box-sizing: border-box;display: flex;justify-content: center;align-items: center;transition: all 1s;
}#data li {position: absolute;width: 80px;/* inline-size: auto; */height: 20px;
}#data ul {position: relative;left: -40px;top: -10px;/* background: transparent; */
}#data ul li:nth-child(1) {transform: rotate(0) translateX(160px);
}#data ul li:nth-child(2) {transform: rotate(11.25deg) translateX(160px);
}#data ul li:nth-child(3) {transform: rotate(22.5deg) translateX(160px);
}#data ul li:nth-child(4) {transform: rotate(33.75deg) translateX(160px);
}#data ul li:nth-child(5) {transform: rotate(45deg) translateX(160px);
}#data ul li:nth-child(6) {transform: rotate(56.25deg) translateX(160px);
}#data ul li:nth-child(7) {transform: rotate(67.5deg) translateX(160px);
}#data ul li:nth-child(8) {transform: rotate(78.75deg) translateX(160px);
}#data ul li:nth-child(9) {transform: rotate(90deg) translateX(160px);
}#data ul li:nth-child(10) {transform: rotate(101.25deg) translateX(160px);
}#data ul li:nth-child(11) {transform: rotate(112.5deg) translateX(160px);
}#data ul li:nth-child(12) {transform: rotate(123.75deg) translateX(160px);
}
/* ===================================150============= */
#data ul li:nth-child(13) {transform: rotate(135deg) translateX(160px);
}#data ul li:nth-child(14) {transform: rotate(146.25deg) translateX(160px);
}#data ul li:nth-child(15) {transform: rotate(157.5deg) translateX(160px);
}#data ul li:nth-child(16) {transform: rotate(168.75deg) translateX(160px);
}
#data ul li:nth-child(17) {transform: rotate(180deg) translateX(160px);
}#data ul li:nth-child(18) {transform: rotate(191.25deg) translateX(160px);
}
#data ul li:nth-child(19) {transform: rotate(202.5deg) translateX(160px);
}
#data ul li:nth-child(20) {transform: rotate(213.75deg) translateX(160px);
}#data ul li:nth-child(21) {transform: rotate(225deg) translateX(160px);
}#data ul li:nth-child(22) {transform: rotate(236.25deg) translateX(160px);
}
/* =============================================== */
#data ul li:nth-child(23) {transform: rotate(247.5deg) translateX(160px);
}
#data ul li:nth-child(24) {transform: rotate(258.75deg) translateX(160px);
}
#data ul li:nth-child(25) {transform: rotate(270deg) translateX(160px);
}
#data ul li:nth-child(26) {transform: rotate(281.25deg) translateX(160px);
}
#data ul li:nth-child(27) {transform: rotate(292.5deg) translateX(160px);
}
#data ul li:nth-child(28) {transform: rotate(303.75deg) translateX(160px);
}#data ul li:nth-child(29) {transform: rotate(315deg) translateX(160px);
}#data ul li:nth-child(30) {transform: rotate(326.25deg) translateX(160px);
}#data ul li:nth-child(31) {transform: rotate(337.5deg) translateX(160px);
}/* AP */
#AP {position: absolute;width: 400px;height: 400px;box-sizing: border-box;display: flex;justify-content: center;align-items: center;transition: all 1s;
}#AP li {position: absolute;width: 80px;/* inline-size: auto; */height: 20px;
}#AP ul {position: relative;left: -40px;top: -10px;/* background: transparent; */
}
#AP ul li:nth-child(1) {transform: rotate(0deg) translateX(250px);
}#AP ul li:nth-child(2) {transform: rotate(180deg) translateX(250px);
}

③ceshi9_3.css

/* 节气信息 框*/
#message {position: absolute;width: 240px;height: 500px;right: -310px;font-size: 18px;color: #b4eeb4;font-family: fontOne;/* display: inline; *//* border: 1px solid white; *//* display: flex;align-items: center; */box-sizing: border-box;
}#message ul li {position: absolute;/* display: block; */margin: 25px 3px;width: 18px;text-align: center;word-wrap: break-word;border: 1px solid white;/* display: flex;justify-content: center; *//* border: 0; */
}
#message ul li:nth-child(1) {/* top: 100px; */right: 5px;
}
#message ul li:nth-child(2) {right: 30px;
}
#message ul li:nth-child(3) {right: 55px;
}
#message ul li:nth-child(4) {right: 80px;
}
#message ul li:nth-child(5) {right: 105px;
}
#message ul li:nth-child(6) {right: 130px;
}
#message ul li:nth-child(7) {right: 155px;
}
#message ul li:nth-child(8) {right: 180px;
}
#message ul li:nth-child(9) {right: 205px;
}
#message ul li:nth-child(10) {right: 230px;
}

3.html代码

<!DOCTYPE html>
<html><head><meta charset="utf-8" /><title>jQuery+vue带实时节气创意圆形罗盘时钟动画特效</title><link rel="stylesheet" href="css/ceshi9_1.css" /><link rel="stylesheet" href="css/ceshi9_2.css" /><link rel="stylesheet" href="css/ceshi9_3.css" /></head><body><div id="sum"><!-- 节气信息 --><div id="message"><ul><li class="msgs" v-for="(item,index) in Arrays">{{item}}</li></ul></div><!-- 遮罩 --><li id="shade"></li><!-- 秒 --><div id="second"><ul><li v-for="item in flag">{{item}} </li></ul></div><!-- 分 --><div id="minute"><ul><li v-for="item in flag_minute">{{item}} </li></ul></div><!-- 时 --><div id="hour"><ul><li v-for="item in flag_hour">{{item}} </li></ul></div><!-- 年 --><div id="year"><ul><li id="yearAll">天祈</li></ul></div><!-- 月 --><div id="mouth"><ul><li v-for="item in flag_mouth">{{item.name}} </li></ul></div><!-- 节气 --><div id="solar"><ul><li v-for="(item,index) in flag_solar" :key="index" v-on:mouseover="showMsg(index)" v-on:mouseout="hideMsg()" class="mm">{{item.name}} </li></ul></div><!-- 日 --><div id="data"><ul><li v-for="item in flag_data">{{item.name}} </li></ul></div><!-- 上下午 --><div id="AP"><ul><li v-for="item in flag_AP">{{item.name}} </li></ul></div></div><!-- jquery3  --><script type="text/javascript" src="js/jquery-3.3.1.js"></script><!-- vue引入 --><script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script><script type="text/javascript" src="js/ceshi9.js"></script></body>
</html>

VUE jQuery+VUE带实时节气创意圆形罗盘时钟动画特效相关推荐

  1. html5 svg画钟表,html5 svg创意卡通粒子时钟动画特效

    非常简单可爱的一款html5 svg绘制的创意卡通粒子时钟动画特效,时钟走动指针动画非常有意思. 查看演示 下载资源: 12 次 下载资源 下载积分: 20 积分 js代码 // Utilities ...

  2. jQuery+css3实现极具创意的罗盘旋转时钟效果源码

    效果 HTML代码 <!DOCTYPE html> <html><head><meta charset="UTF-8"><ti ...

  3. 字 掉落 炫酷 网站_16个富有创意的HTML5 Canvas动画特效集合

    本文作者html5tricks,转载请注明出处 1.HTML5 Canvas高空瀑布下落湖面动画 HTML5 Canvas是一个神奇的网页技术,我们在Canvas画布上可以做任何有趣的事情.今天要分享 ...

  4. jQuery和CSS3炫酷滚动页面内容元素动画特效

    jquery-smoove是一款jQuery和CSS3炫酷滚动页面内容元素动画特效插件.该内容元素动画插件在页面滚动到指定位置时,该位置的HTML元素会执行指定的CSS3动画特效,如旋转.翻转.放大缩 ...

  5. css圆背景,css3圆形旋转背景动画特效

    特效描述:css3 圆形旋转 背景动画特效.css3 animation和transform属性制作圆形旋转背景动画. 代码结构 1. HTML代码 var followers = document. ...

  6. html进度条圆圈渐变色,HTML5 canvas带渐变色的圆形进度条动画

    jquery-circle-progress是一款带渐变色的圆形进度条动画特效jQuery插件.该圆形进度条使用的是HTML5 canvas来绘制圆形进度条及其动画效果,进度条使用渐变色来填充,效果非 ...

  7. html页面飘落花瓣不是全屏,jQuery css3全屏花瓣飘落动画特效

    特效描述:jQuery css3 全屏花瓣飘落 动画特效.jQuery css3从上往下飘落爱心花瓣动画特效.(不兼容IE6,7,8) 代码结构 1. 引入JS 2. HTML代码 $(functio ...

  8. HTML5动态圆形导航,jQuery带动画特效的圆形导航菜单特效

    这是一款jQuery带动画特效的圆形导航菜单特效.该导航菜单在被点击时,会以动画的方式移动到屏幕中间,并展开为一个圆形菜单,效果非常炫酷. 使用方法 在页面中引入jquery和TweenMax.js的 ...

  9. jQuery Vue的CDN

    参考:https://blog.csdn.net/weixin_38465623/article/details/80599449 jQuery: <script src="https ...

最新文章

  1. 日周月筛选器_天谕2.09月3日周版本更新维护内容预告
  2. all方法 手写promise_实现Promise.allSettled
  3. LINUx打包命令汇总
  4. 数据结构与算法--二叉树第k个大的节点
  5. 阿里云机器学习怎么玩？这本新手入门指南揭秘了！
  6. Markdown绘制UML图
  7. dcdc转换器计算机显示,DC-DC转换器的问题
  8. 无路可逃java攻略_《生化危机2：重制版》幽灵生还者无路可逃流程攻略
  9. 欧拉公式matlab
  10. 在戴尔游匣7559上安装win10和Ubuntu16.04双系统
  11. 计算机专业必读哪两本经典书籍？
  12. vim学习笔记-常用命令
  13. EventListener
  14. 转：别把赌注压在明天:如何了解自己，提高自控力
  15. [Jquery]实现三个盒子两两交换的考眼力游戏
  16. [Hadoop基础]--HDFS的读写流程和原理
  17. 视频压缩转码FFmpegFrameRecorder
  18. 九齐新型单片机NY8A051F
  19. HTA程序：VBS/JS脚本GUI
  20. VM虚拟机：找不到文件解决办法

热门文章

  1. 像素游戏的动态图设计01
  2. WIFI6 TWT机制介绍
  3. 写给想创业的朋友，向敢于创业的朋友致敬
  4. Windows XP/2003 系统进程速查表
  5. 福建水仙花，美名扬天下
  6. 信用评分卡（A卡/B卡/C卡）模型简介
  7. 移动端商城开发（一）
  8. 网课里一个无聊的猜数游戏
  9. TypeScript_面向对象
  10. devenv命令行编译项目