原生 js小案例

1效果图

点击12个月份中的任意一个，底部就会显示对应月份

2html

<div id="dv1">
			<div id="dv2"></div>
		</div>

3js

<script type="text/javascript">
			var mydv1 = document.getElementById("dv1");
			var xd = document.getElementsByClassName("mind");
			var mydv2 = document.getElementById("dv2");
			var arr=[1,2,3,4,5,6,7,8,9,10,11,12];
			var arr1=["Jan","Feb","Mar","Apr","May","Jun","Jul","Aug","Sept","Oct","Nov","Dec"]
			for(var i = 0; i < arr1.length; i++) {
				mindiv = document.createElement("div");
				mindiv.className = "mind";
				mindiv.innerHTML = arr[i]+"<br/>"+arr1[i];
				mydv1.appendChild(mindiv);
			}
			//排他事件
			for(var i = 0; i < xd.length; i++) {
				xd[i].onclick = function() {
					for(var j = 0; j < xd.length; j++) {
						xd[j].style.backgroundColor = "#0000FF";
					}
					this.style.backgroundColor = "#9ACD32";
					mydv2.innerHTML = this.innerHTML;
					console.log(this.innerHTML)
				}
			}
		</script>

4css

<style type="text/css">
			#dv1 {
				width: 350px;
				height: 550px;
				position: relative;
				background-color: #00FFFF;
				margin-left: 500px;
			}
			.mind {
				width: 100px;
				height: 80px;
				margin-top: 10px;
				margin-left: 13px;
				float: left;
				line-height: 40px;
				padding-top:20px ;
				text-align: center;
				color: #fff;
				background-color: #0000FF;
			}
			#dv2 {
				width: 350px;
				height: 100px;
				line-height: 50px;
				text-align: center;
				position: absolute;
				bottom: 0px;
				color: #fff;
				font-weight: 700;
				font-size: 30px;
				background-color: #FF1E32;
			}
		</style>