html js日历制作视频,时间轴、纯js日历特效

在制作页面的过程中，时长遇到要按时间顺序显示一些事件信息的需求，时间轴便是展示这类信息的最佳显现方式。

时间轴实例

首先时间基础结构

="timeLine">

2018-12-25

事件题目一

内容一。。。。。。。。。。。

2018-12-25

事件题目二

内容二。。。。。。。。。。。

2018-12-25

事件题目三

内容三。。。。。。。。。。。

2018-12-25

事件题目四

内容四。。。。。。。。。。。

以下是css样式

*{

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;

}

除了时间轴，日历也是项目时长用到的内容，网上也很多实用的插件，但是了解里面的原理也是很不错的学习过程。

日历实例

首先编写静态样式

*{

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;

}

Month

Year

<

>

• SUN
• MON
• TUE
• WED
• THU
• FRT
• SAT

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10

编写完静态样式，就可以开始写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();//当前日期

首先处理获取不同月份1号是星期几与闰年的问题

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

str += "

";

}

for(var i=1;i

if(i == myDay && myYear == myDate.getFullYear() && myMonth ==myDate.getMonth()){//如果是当前日期改变样式

myclass = "class='green greenBox'";//当前日期样式

}else{

myclass = "class='green'";//普通日期样式

}

str += "

"+i+"";

}

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();

}

最后附上Data函数内容，详细用法自行百度哈哈。

Date() 获取时间对象

var timeDate = new Date();

timeDate.toLocaleTimeString()  根据本地时间把Date对象的时间部分转换为字符串

timeDate.getYear(); //获取当前年份(2位)

timeDate.getFullYear(); //获取完整的年份(4位,1970-????)

timeDate.getMonth(); //获取当前月份(0-11,0代表1月)

timeDate.getDate(); //获取当前日(1-31)

timeDate.getDay(); //获取当前星期X(0-6,0代表星期天)

timeDate.getTime(); //获取当前时间(从1970.1.1开始的毫秒数)

timeDate.getHours(); //获取当前小时数(0-23)

timeDate.getMinutes(); //获取当前分钟数(0-59)

timeDate.getSeconds(); //获取当前秒数(0-59)

timeDate.getMilliseconds(); //获取当前毫秒数(0-999)

timeDate.toLocaleDateString(); //获取当前日期

var mytime=timeDate.toLocaleTimeString(); //获取当前时间

timeDate.toLocaleString( ); //获取日期与时间