时间：2023-07-21 20:54:02 | 来源：网站运营
时间：2023-07-21 20:54:02 来源：网站运营
时间轴、纯js日历特效： 在制作页面的过程中，时长遇到要按时间顺序显示一些事件信息的需求，时间轴便是展示这类信息的最佳显现方式。
在线咨询
<ul class="timeLine"> <li> <time datetime="2018-12-25">2018-12-25</time> <h1>事件题目一</h1> <p>内容一。。。。。。。。。。。</p> </li> <li> <time datetime="2018-12-25">2018-12-25</time> <h1>事件题目二</h1> <p>内容二。。。。。。。。。。。</p> </li> <li> <time datetime="2018-12-25">2018-12-25</time> <h1>事件题目三</h1> <p>内容三。。。。。。。。。。。</p> </li> <li> <time datetime="2018-12-25">2018-12-25</time> <h1>事件题目四</h1> <p>内容四。。。。。。。。。。。</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>编写完静态样式，就可以开始写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();//当前年份var myMonth = myDate.getMonth();//当前月份var myDay = myDate.getDate();//当前日期function dayStart(month,year){//获取某年某月第一天是星期几 var tmpDate = new Date(year,month,1);//一月是0，十二月是11。如果不是要固定取第一天，可以再加一个天数的参数。 console.log(tmpDate); return(tmpDate.getDay());//返回0-6，对应周日至周六}function dayMonth(month,year){//通过年份除以4是否整除判断是否为闰年，并返回该月总天数 var tmp = year % 4; if(tmp == 0){ return (monthOlympic[month]);//返回上面monthOlympic数组对应月份的最后一天 }else { return(monthNormal[month]);//返回上面monthNormal数组对应月份的最后一天 }} function refreshDate(){ var str = ""; var totalDay = dayMonth(myMonth,myYear);//获取该月总天数 var firstDay = dayStart(myMonth,myYear);//获取该月第一天是星期几 var myclass; for(var i=0;i<firstDay;i++){//创建空白节点 str += "<li></li>"; } for(var i=1;i<totalDay;i++){ if(i == myDay && myYear == myDate.getFullYear() && myMonth ==myDate.getMonth()){//如果是当前日期改变样式 myclass = "class='green greenBox'";//当前日期样式 }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();}关键词：日历
