日期特效
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>日期特效</title> <style type="text/css"> *{ padding: 0; margin: 0; } #date{ width: 450px; height: 300px; background-color: darkorange; border-radius: 10px; margin: 100px auto; } #nowDate{ width: 450px; height: 60px; line-height: 60px; text-align: center; color: #fff; font-size: 26px; } #day{ width: 200px; height: 200px; line-height: 200px; background-color: orchid; margin: 0 auto; text-align: center; color:#fff; font-weight: bold; font-size: 60px; } </style> </head> <body> <div id="date"> <p id="nowDate"></p> <p id="day"></p> </div> <script type="text/javascript"> // 1.获取标签 var nowDate = document.getElementById('nowDate'); var day = document.getElementById('day'); // 用定时器 更新时间的变化 setInterval(nowNumTime, 10); function nowNumTime(){ var now = new Date(); var hour = now.getHours(); //0 ~ 23. //19 var minute = now.getMinutes(); var second = now.getSeconds(); var year = now.getFullYear(); var month = now.getMonth(); var d = now.getDate(); var week = now.getDay(); //console.log(week); //索引 var weeks = ['星期天','星期一','星期二','星期叁','星期肆','星期伍','星期六']; // 18 > 12 ? 18-12 : 8 var temp = '' + (hour > 12 ? hour - 12 : hour); if(hour === 0){ temp = '12'; } temp = temp +(minute < 10 ? ':0': ":")+ minute; temp = temp +(second < 10 ? ':0': ":")+ second; temp = temp + (hour >= 12 ? ' P.M.': " A.M."); temp = `${year}年${month}月${d}日 ${temp} ${weeks[week]}`; nowDate.innerHTML = temp; } </script> </body> </html>
长图滚动
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>transform的运用</title> <style type="text/css"> #box{ margin-top: 10px; height: 50px; width: 50px; background-color: #ff6700; /*transform: translate(100px,100px);*/ } </style> </head> <body> <button id="btn">move it</button> <div id="box"></div> <script type="text/javascript"> var btn = document.getElementById('btn'); var box = document.getElementById('box'); var index = 1; window.onload = function () { btn.onclick = function () { box.style.transform = `translate(${10*index}px,${5*index}px) rotate(${0.2*index}deg) scale(2.0) skew(${0.1*index}deg)`; index++; } } </script> </body>