js制作简易日历

_kirakira_

于 2020-03-14 15:45:14 发布

阅读量401

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_43212582/article/details/104860004

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

innerHTML的使用：

<div id="test">
   <span style="color:red">index</span> saxibuli
</div>

在上面代码中使用test.innerHTML,test.innerText,test.outerHTML：

语句	解释	举例
innerHTML	从对象的起始位置到终止位置的全部内容,包括HTML标签	<span style=“color:red”>index</span> saxibuli
innerText	从起始位置到终止位置的内容, 但它去除HTML标签	index saxibuli
outerHTML	除了包含innerHTML的全部内容外, 还包含对象标签本身	<div id=“test”><span style=“color:red”>index</span> saxibuli</div>

日历.css:

<style>
body{background:skyblue;}
#div1 {height:700px;width:440px;background:gray;margin-left:400px;margin-top:10px;position:absolute;}
#div1 ul{margin-top:20px;}
#div1 ul li{list-style:none;height:100px;width:100px;background:black;float:left;margin:10px;text-align:center;border:1px solid #000;color:white;}
#div1 .active{background:white;color:red;}

.text{background:white;height:150px;width:335px;font-size:15px;margin-top:520px;margin-left:50px;position:relative;border:2px solid blue;padding-left:10px;}
</style>

制作日历.html:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>简易日历</title>
		<link href="日历.css" rel="stylesheet" type="text/css" />
		<script>
			window.onload=function  () {
				var arr=[
					'异度侵入',
					'某科学的超电磁炮T',
					'刀剑神域',
					'神的记事本',
					'我们无法一起学习！',
					'关于我转生变成史莱姆这件事',
					'埃罗芒阿老师',
					'这个勇者明明超强却过分慎重',
					'魔法少女小圆',
					'路人女主的养成方法',
					'擅长捉弄的高木同学',
					'月色真美'
				]
				var oDiv=document.getElementById('div1');
				var aLi=oDiv.getElementsByTagName('li');
				var oTxt=oDiv.getElementsByTagName('div')[0];
				
				for(var i=0;i<aLi.length;++i)
				{
					aLi[i].index=i+1;
					aLi[i].onmouseover=function()
					{
						for(var i=0;i<aLi.length;++i)
						{
							aLi[i].className='';
						}
						this.className='active';
						oTxt.innerHTML='<h2>'+this.index+'月安排</h2><p>' + arr[(this.index-1)]+'</p>';
					};
				}
			};
		</script>
	</head>
	<body>
		<div id="div1" class="calendar">
			<ul>
				<li class="active"><h2>1</h2><p>1月</p></li>
				<li><h2>2</h2><p>2月</p></li>
				<li><h2>3</h2><p>3月</p></li>
				<li><h2>4</h2><p>4月</p></li>
				<li><h2>5</h2><p>5月</p></li>
				<li><h2>6</h2><p>6月</p></li>
				<li><h2>7</h2><p>7月</p></li>
				<li><h2>8</h2><p>8月</p></li>
				<li><h2>9</h2><p>9月</p></li>
				<li><h2>10</h2><p>10月</p></li>
				<li><h2>11</h2><p>11月</p></li>
				<li><h2>12</h2><p>12月</p></li>
			</ul>
			<div class="text">
				<h2>1月安排</h2>
				<p>异度侵入</p>
			</div>
		</div>
	</body>
</html>

效果：

_kirakira_

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
js制作简易日历

innerHTML的使用：<div id="test"> <span style="color:red">index</span> saxibuli</div>在上面代码中使用test.innerHTML,test.innerText,test.outerHTML：语句解释举例innerHTML从对象的起始位置...
复制链接

扫一扫

专栏目录