您的位置：首页 > Web前端 > JavaScript

H5中使用JS实现简易日历

2016-08-02 16:20 776 查看

1、this：当前发生事件的元素

2、value：改变标签里的内容（给input使用）

innerHTML：也改变标签里的内容（但是针对div、span等标签）

3、数组的定义与使用

-定义：arr=[1,2,3]

-使用：arr[0]

4、字符串连接

-作用：连接两个字符串

-问题：连接中的优先级（从前往后相加）

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
/*div{*/
/*width: 200px;*/
/*height: 150px;*/
/*border: 1px solid #ccc;*/
/*}*/
*{
padding: 0;
margin: 0px;
}
#div1{
width: 190px;
height: 320px;
background: #ccc;
padding: 20px;
}
ul{
list-style: none;
width: 190px;
height: 240px;
clear: both;
}
ul li{
width: 50px;
height: 50px;
background: #434343;
color: #fff;
float: left;
text-align: center;
margin: 6px;
}
#div1 div{
background: #fff;
padding: 5px;
margin: 10px 5px 0 5px;
}
.active{
background: #ffffff;
color: red;
}
/*p{*/
/*line-height: 20px;*/
/*}*/
</style>
<script>
//        window.onload = function(){
//            var otxt = document.getElementById('txt');
//            var obtn = document.getElementById('btn');
//            var odiv = document.getElementById('div1');
//            obtn.onclick = function(){
//                odiv.innerHTML = otxt.value;
//            }
//        }
window.onload = function(){
var arr = [
'这是一月份的活动',
'这是二月份的活动',
'这是三月份的活动',
'这是四月份的活动',
'这是五月份的活动',
'这是六月份的活动',
'这是七月份的活动',
'这是八月份的活动',
'这是九月份的活动',
'这是十月份的活动',
'这是十一月份的活动',
'这是十二月份的活动',
];
var odiv = document.getElementById('div1');
var oli = odiv.getElementsByTagName('li');
var adiv = odiv.getElementsByTagName('div')[0];
for(var i = 0; i < oli.length; i++){
oli[i].index = i;
oli[i].onclick = function(){
for(var i = 0; i < oli.length; i++)
{
oli[i].style.background = '#343434'
oli[i].style.color = '#fff'
}
this.style.background = 'white';
this.style.color = "red";
adiv.innerHTML = '<h2>'+ (this.index + 1) + '月的活动</h2>' + arr[this.index];
}
}
}
</script>
</head>
<body>
<!--<input id="txt" type="text"/>-->
<!--<input id="btn" type="button" value="改变"/>-->
<!--<div id="div1"></div>-->
<div id="div1">
<ul>
<li class="active"><b>1</b><p>JAN</p></li>
<li><b>2</b><p>FER</p></li>
<li><b>3</b><p>MAR</p></li>
<li><b>4</b><p>ARP</p></li>
<li><b>5</b><p>MAY</p></li>
<li><b>6</b><p>JUN</p></li>
<li><b>7</b><p>JUL</p></li>
<li><b>8</b><p>AUG</p></li>
<li><b>9</b><p>SEP</p></li>
<li><b>10</b><p>OCT</p></li>
<li><b>11</b><p>NOV</p></li>
<li><b>12</b><p>DEC</p></li>
</ul>
<div>
<h2>1月活动</h2>
<p>快过年了，大家快乐健康会很好看</p>
</div>
</div>
</body>
</html>

分析：利用js，每点击一个月份，下边div出现不同的内容提示

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签： javascript

相关文章推荐

新的分享

章节导航