時間：2023-07-21 20:54:02 | 來源：網(wǎng)站運營
時間：2023-07-21 20:54:02 來源：網(wǎng)站運營
時間軸、純js日歷特效： 在制作頁面的過程中，時長遇到要按時間順序顯示一些事件信息的需求，時間軸便是展示這類信息的最佳顯現(xiàn)方式。
在線咨詢
<ul class="timeLine"> <li> <time datetime="2018-12-25">2018-12-25</time> <h1>事件題目一</h1> <p>內(nèi)容一。。。。。。。。。。。</p> </li> <li> <time datetime="2018-12-25">2018-12-25</time> <h1>事件題目二</h1> <p>內(nèi)容二。。。。。。。。。。。</p> </li> <li> <time datetime="2018-12-25">2018-12-25</time> <h1>事件題目三</h1> <p>內(nèi)容三。。。。。。。。。。。</p> </li> <li> <time datetime="2018-12-25">2018-12-25</time> <h1>事件題目四</h1> <p>內(nèi)容四。。。。。。。。。。。</p> </li></ul><style> *{ margin: 0; padding: 0; box-sizing: border-box; } p{ width: 100%; height: auto; word-wrap:break-word; word-break:break-all; overflow: hidden; text-indent: 1em; } .timeLine{ margin-top: 10%; margin-left: 30%; border-left: 10px solid #0e9db6; } .timeLine li{ list-style: none; display: block; width: 90%; clear: both; position: relative; background-color: cornflowerblue; margin-left: 20px; margin-bottom: 20px; padding: 12px 10px; box-sizing: border-box; } .timeLine li:before{ content: ''; display: block; border-radius: 50%; background-color: bisque; width: 25px; height: 25px; border: 4px solid yellowgreen; position: absolute; left: -42px; top:0; } .timeLine li time{ left: -28%; top: 5px; width: 20%; position: absolute; font-size: 21px; color: #AAA; text-align: right; } .timeContent>li h1{ font-size: 24px; margin-bottom: 20px; } .timeContent{ color: white; } .timeContent>li:after{ content: ''; width: 0; height: 0; border-width: 10px; border-style: solid; border-color:transparent cornflowerblue transparent transparent ; position: absolute; top: 6px; left: -16px; }</style> <style> *{ margin: 0; padding: 0; } a{ text-decoration: none; } ol,ul,li{ list-style: none; } .calendar{ width: 450px; height: 360px; background-color: #ffffff ; box-shadow: 0px 1px 1px rgba(0,0,0,.1); border:15px solid gray; padding: 10px; box-sizing: border-box; margin: 0 auto; } .title{ position: relative; } .title h1,.title h2{ text-align: center; } .PrevMonth,.NextMonth{ position: absolute; top:50%; font-size: 38px; line-height: 40px; margin-top: -20px; } .PrevMonth{ left: 0; } .NextMonth{ right: 0; } .bodyList ul{ width: 100%; font-weight: bold; font-size: 14px; } .bodyList ul li{ width: 14.28%; height: 36px; line-height: 36px; list-style-type: none; display: block; box-sizing: border-box; float: left; text-align: center; } .lightgrey{ color: #aa88aa; } .lightgrey>ul>li{ float: left; } .darkgrey{ color: #565656; } .green{ color: #6ac13c; } .greenbox{ border:1px solid #6ac13c; background-color: #e9f8df; } </style></head><body> <div class="calendar"> <div class="title"> <h1 class="green" id="calendarMonth">Month</h1> <h2 class="green" id="calendarYear">Year</h2> <a href="" id="prev" class="PrevMonth"><</a> <a href="" id="next" class="NextMonth">></a> </div> <div class="body"> <div class="lightgrey bodyList"> <ul> <li>MON</li> <li>TUE</li> <li>WED</li> <li>THU</li> <li>FRT</li> <li>SAT</li> <li>SUN</li> </ul> </div> <div class="darkgrey bodyList"> <ul id="days"> <li>1</li><li>2</li><li>3</li><li>4</li><li>5</li> <li>6</li><li>7</li><li>8</li><li>9</li><li>10</li> </ul> </div> </div> </div>編寫完靜態(tài)樣式，就可以開始寫js效果了，首先要先分析需要什么功能var monthNormal = [31,28,31,30,31,30,31,31,30,31,30,31];//閏年與非閏年var monthOlympic = [31,29,31,30,31,30,31,31,30,31,30,31];var monthName = ["January","February","March","April","May","June","July","August","September","October","November","December"];//月份中英文隨意 var holder = document.getElementById("days");var prev = document.getElementById("prev");var next = document.getElementById("next");var cMonth = document.getElementById("calendarMonth");var cYear = document.getElementById("calendarYear"); var myDate = new Date();var myYear = myDate.getFullYear();//當(dāng)前年份var myMonth = myDate.getMonth();//當(dāng)前月份var myDay = myDate.getDate();//當(dāng)前日期function dayStart(month,year){//獲取某年某月第一天是星期幾 var tmpDate = new Date(year,month,1);//一月是0，十二月是11。如果不是要固定取第一天，可以再加一個天數(shù)的參數(shù)。 console.log(tmpDate); return(tmpDate.getDay());//返回0-6，對應(yīng)周日至周六}function dayMonth(month,year){//通過年份除以4是否整除判斷是否為閏年，并返回該月總天數(shù) var tmp = year % 4; if(tmp == 0){ return (monthOlympic[month]);//返回上面monthOlympic數(shù)組對應(yīng)月份的最后一天 }else { return(monthNormal[month]);//返回上面monthNormal數(shù)組對應(yīng)月份的最后一天 }} function refreshDate(){ var str = ""; var totalDay = dayMonth(myMonth,myYear);//獲取該月總天數(shù) var firstDay = dayStart(myMonth,myYear);//獲取該月第一天是星期幾 var myclass; for(var i=0;i<firstDay;i++){//創(chuàng)建空白節(jié)點 str += "<li></li>"; } for(var i=1;i<totalDay;i++){ if(i == myDay && myYear == myDate.getFullYear() && myMonth ==myDate.getMonth()){//如果是當(dāng)前日期改變樣式 myclass = "class='green greenBox'";//當(dāng)前日期樣式 }else{ myclass = "class='green'";//普通日期樣式 } str += "<li "+ myclass + ">"+i+"</li>"; } holder.innerHTML = str;//渲染日期 cMonth.innerHTML = monthName[myMonth];//渲染月份 cYear.innerHTML = myYear;//渲染年份}refreshDate(); prev.onclick = function(e){//上一個月 e.preventDefault(); myMonth--; if(myMonth<0){ myYear--; myMonth =11; } refreshDate();}next.onclick = function(e){//下一個月 e.preventDefault(); myMonth++; if(myMonth>11){ myYear++; myMonth = 0; } refreshDate();}關(guān)鍵詞：日歷
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
