利用原生js我们可以做一个简易的年历。
效果如下图所示：
文章图片
css代码如下：
* { padding: 0;
margin: 0;
}
li { list-style: none;
}
body { background: #f6f9fc;
font-family: arial;
}.calendar { width: 210px;
margin: 0 auto;
padding: 10px 10px 20px 20px;
background: #eae9e9;
}
.calendar ul { width: 210px;
overflow: hidden;
padding-bottom: 10px;
}
.calendar li { float: left;
width: 58px;
height: 54px;
margin: 10px 10px 0 0;
border: 1px solid #fff;
background: #424242;
color: #fff;
text-align: center;
cursor: pointer;
}
.calendar li h2 { font-size: 20px;
padding-top: 5px;
}
.calendar li p { font-size: 14px;
}.calendar .active { border: 1px solid #424242;
background: #fff;
color: #e84a7e;
}
.calendar .active p { font-weight: bold;
}.calendar .text { width: 178px;
padding: 0 10px 10px;
border: 1px solid #fff;
padding-top: 10px;
background: #f1f1f1;
color: #555;
}
.calendar .text h2 {font-size: 14px;
margin-bottom: 10px;
}
.calendar .text p { font-size: 12px;
line-height: 18px;
}html 结构如下：
- 1JAN
- 2FER
- 3MAR
- 4APR
- 5MAY
- 6JUN
- 7JUL
- 8AUG
- 9SEP
- 10OCT
- 11NOV
- 12DEC
1月活动快过年了，大家可以商量着去哪玩吧～
JS代码如下：
// 把每个月的日历内容放到数组里，动态添加
var arr=['快过年了，大家可以商量着去哪玩吧～',
'大家好好学习吧222222~~~',
'大家好好学习吧222222333~~~',
'大家好好学习吧222444222~~~',
'大家好好学习555吧222222~~~',
'大家好好学习吧666222222~~~',
'大家好好学习吧227772222~~~',
'大家好好学习吧28888822222~~~',
'大家好好学习吧99999222222~~~',
'大家好好学习10000000吧222222~~~',
'大家好好学习吧111111222222~~~',
'大家好好学习吧22222200000000000~~~']
//获取dom元素，
var oUl=document.getElementById('box');
var aLi=oUl.children;
var oDiv=document.getElementById('txt');
//遍历每一个li
for(var i = 0 ;
i < aLi.length;
i++){
//在遍历每一个li对象时给它添加一个属性，用来保存这个li的下标
aLi[i].ee=i;
//给每一个li添加点击事件
aLi[i].οnclick=function(){
//点击每一个li时将当前点击对象的ee属性的值赋值给xiabiao这个变量来保存
var xiabiao=this.ee;
//在点击事件发生后再次遍历每一个li目的是让每一个li的类名为空
for(var j=0;
j【简易年历】转载于:https://www.cnblogs.com/MikePan/p/9123182.html
