js+css实现星球大战倒计时效果代码
代码语言:html
所属分类:布局界面
代码描述:js+css实现星球大战倒计时效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <style> @import url("https://fonts.googleapis.com/css2?family=Major+Mono+Display&display=swap"); body { background: whitesmoke; font-family: "Major Mono Display", monospace; font-size: 62.5%; } section { min-width: 500px; } .wrapper { color: whitesmoke; height: 500px; margin-top: 20px; position: relative; } .ui { margin: 20px auto; text-align: center; width: 160px; } input[type=checkbox] { vertical-align: middle; } .centered { position: absolute; text-align: center; width: 100%; } .timeOutput { font-size: 1.2rem; font-weight: bold; line-height: 1.8rem; top: 50%; transform: translateY(-50%); } .timeOutput .small { display: inline-block; font-size: 0.6rem; font-weight: normal; line-height: 0.7rem; margin-bottom: 5px; max-width: 143px; } </style> </head> <body > <section class="wrapper"> <div class="canvas centered"></div> <div class="timeOutput centered"></div> </section> <section class="ui"> <label>Animated edge:<input id="toggle" type="checkbox" checked></label> </section> <script > // Respect user System animation preference const mediaQuery = window.matchMedia('(prefers-reduced-motion: reduce)'); let userAllowsAnimation = !mediaQuery || mediaQuery.matches ? false : true; mediaQuery.addEventListener('change', () => { userAllowsAnimation = mediaQuery.matches ? false : true; setAnimationOption(); }); const toggle = document.querySelector('#toggle'); const setAnimationOption = () => { toggle.disabled = !userAllowsAnimation; }; setAnimationOption(); // We are waiting for Star Wars "Visions" to arrive!! let targetDate = 'September 22, 2021 09:00:00 GMT'; let targetAquiredMessage = 'acquired'; const output = document.querySelector('.timeOutput'); const canvasWrapper = document.querySelector('.canvas'); const mPI = Math.PI; const mfloor = Math.floor; const mrandom = Math.random; const mcos = Math.cos; const msin = Math.sin; const height = width = 500; const midX = midY = height * .5; let canvas, ctx; let lineWeights,arcs,colours,radius,centerRadius = 80; const bgCol = 'whitesmoke'; let edgeCol = '#a00'; let achievedCol = '#3b3'; const shellSets = [ { lineWeights: [1], colours: ['#888'], min: [10], variance: [10], radius: 250 }, { lineWeights: [3], colours: ['#aaa'], min: [10], variance: [10], radius: 249 }, { lineWeights: [4], colours: ['#ddd'], min: [10], variance: [10], radius: 246 }, { lineWeights: [1, 3], colours: ['#aaa', edgeCol], min: [10, 3], variance: [20, 30], radius: 247 }, { lineWeights: [1, 3], colours: ['#ddd', edgeCol], min: [15], variance: [50, 10], radius: 245 }, { lineWeights: [1, 8], colours: [bgCol, edgeCol], min: [10], variance: [20], radius: 242 }, { lineWeights: [2, 8, 15, 8], colours: [edgeCol], min: [10, 8, 2], variance: [30, 8, 4], radius: 234 }, { lineWeights: [1, 25], colours: [bgCol, edgeCol], min: [10, 3], variance: [30, 10], radius: 234 }, { lineWeights: [1, 2], colours: [bgCol, edgeCol], min: [3], variance: [50], radius: 209 }, { lineWeights: [1, 10], colours: [bgCol, edgeCol], min: [10, 3], variance: [30, 10], radius: 209 }]; const lineSets = [ { aStart: 0, aEnd: 20, rInner: centerRadius + 2, rOuter: 229 }, { aStart: 21, aEnd: 40, rInner: 150, rOuter: 229 }, { aStart: 41, aEnd: 60, rInner: 150, rOuter: 229 }, { aStart: 61, aEnd: 115, rInner: centerRadius + 2, rOuter: 229 }, { aStart: 140, aEnd: 150, rInner: centerRadius + 2, rOuter: 229 }, { aStart: 151, aEnd: 180, rInner: 150, rOuter: 229 }, { aStart: 181, aEnd: 205, rInner: centerRadius + 2, rOuter: 229 }, { aStart: 240, aEnd: 270, rInner: centerRadius + 2, rOuter: 229 }, { aStart: 271, aEnd: 290, rInner: 150, rOuter: 229 }, { aStart: 291, aEnd: 325, rInner: centerRadius + 2, rOuter: 229 }, { aStart: 326, aEnd: 338, rInner: 150, rOuter: 229 }, { aStart: 339, aEnd: 359, rInner: 150, rOuter: 229 }, // horizontal triplet { aStart: 21, aEnd: 35, rInner: 130, rOuter: 132 }, { aStart: 21, aEnd: 35, rInner: 133, rOuter: 135 }, { aStart: 21, aEnd: 35, rInner: 136, rOuter: 138 }, // vertical triplet { aStart: 43, aEnd: 43.5, rInner: 150, rOuter: 175 }, { aStart: 44, aEnd: 44.5, rInner: 150, rOuter: 175 }, { aStart: 45, aEnd: 45.5, rInner: 150, rOuter: 175 }, // { aStart: 142.5, aEnd: 143.5, rInner: 82, rOuter: 120 }, { aStart: 144.5, aEnd: 145.5, rInner: 82, rOuter: 120 }, { aStart: 146.5, aEnd: 147.5, rInner: 82, rOuter: 120 }, // { aStart: 170, aEnd: 180, rInner: 193, rOuter: 195 }, { aStart: 170, aEnd: 180, rInner: 196, rOuter: 198 }, { aStart: 170, aEnd: 180, rInner: 199, rOuter: 201 }, // { aStart: 181, aEnd: 191, rInner: 193, rOuter: 195 }, { aStart: 181, aEnd: 191, rInner: 196, rOuter: 198 }, { aStart: 181, aEnd: 191, rInner: 199, rOuter: 201 }, // { aStart: 243, aEnd: 243.5, rInner: 185, rOuter: 229 }, { aStart: 244, aEnd: 244.5, rInner: 185, rOuter: 229 }, { aStart: 245, aEnd: 245.5, rInner: 185, rOuter: 229 }, // { aStart: 320, aEnd: 320.5, rInn.........完整代码请登录后点击上方下载按钮下载查看
网友评论0