数组和Json的小总结
- Json的用法有点像数组,但是数组的下标是整数,而Json的下标是字符串
- 在循环方面也有所不同,数组不仅可以使用for循环也可以使用for in 循环(但是一般推荐使用for循环), 而只有Json遍历的时候才会使用for in循环
在给Json赋值的时候,(一个变量名:所赋的值,一个变量名:所赋的值,·····)`
<script> var arr=[12,5,7]; var json={a:12,b:5,c:'woshijson'}; /* alert(arr[1]); alert(json['a']) */ for(var i=0;i<arr.length;i++){ alert(arr[i]); } /*for in 是专门给Json准备的遍历方式*/ for(var i in json ){ alert(json[i]); } </script>
`
用JS写的日历的小总结(先放代码,下次写思路)
- 用到了innerHTML()
- 用到了字符串的链接的优先级
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<h1>日历的小总结</h1>
<h2>1. 用到了innerHTML()</h2>
<style>
* {margin:0;padding:0;}
.com {cursor: pointer;width:400px;background:corchid;margin:0 auto;}
.com li {list-style:none;width:100px;height:100px; background:cornflowerblue;color:white;text-align:center;
line-height:50px;float:left;margin-left:20px;margin-top:20px;}
.box1 {width:380px;margin:auto;background:mistyrose;}
ul {width:380px;height:510px; background:lightgoldenrodyellow; margin:auto;}
.com ul .li1 {background:white; color:red;}//这个是对列表里面的字体的颜色设置
</style>
<script>
window.onload=function(){
var arr = ["快过年了,大家可以商量着去哪里玩~", "222", "333", "444", "555", "666", "777", "888", "999", "1000", "11111111", "12222121212"]
var oLis = document.getElementsByTagName("li");
var oDiv = document.getElementsByClassName("box1")[0];
for (var i = 0; i < oLis.length; i++) {
oLis[i].index = i;
oLis[i].onmouseover = function() {
for (var i = 0; i < oLis.length; i++) {
oLis[i].className = ""
}
oLis[this.index].className = "li1"
oDiv.innerHTML = '<h1>' + [this.index + 1] + '月活动</h1><p>' + arr[this.index] + '</p>'
}
}
}
</script>
</head>
<body>
<div class="com">
<ul>
<li class="li1">
<h1>1</h1>
<p>JAN</p>
</li>
<li>
<h1>2</h1>
<p>FER</p>
</li>
<li>
<h1>3</h1>
<h1>MAR</h1>
</li>
<li>
<h1>4</h1>
<h1>APR</h1>
</li>
<li>
<h1>5</h1>
<h1>MAY</h1>
</li>
<li>
<h1>6</h1>
<h1>JUN</h1>
</li>
<li>
<h1>7</h1>
<h1>JUL</h1>
</li>
<li>
<h1>8</h1>
<h1>AUR</h1>
</li>
<li>
<h1>9</h1>
<h1>SEP</h1>
</li>
<li>
<h1>10</h1>
<h1>OCT</h1>
</li>
<li>
<h1>11</h1>
<h1>NOV</h1>
</li>
<li>
<h1>12</h1>
<h1>DEC</h1>
</li>
</ul>
<div class="box1">
<h1>一月活动</h1>
<p>快过年了,大家可以商量着去哪里玩~</p>
</div>
</div>
</body>
</html>