首页 > 代码库 > dom和bom
dom和bom
先看几个两个例题：
星座对应日期：
<select id="s1">
<option>a</option>
<option>b</option>
<option>c</option>
<option>d</option>
</select>
<select id="s2">
<option class="opt2">1</option>
<option class="opt2">2</option>
<option class="opt2">3</option>
<option class="opt2">4</option>
</select>
<script>
var s1 = document.getElementById("s1");
var s2 = document.getElementById("s2");
var s2_opt = document.getElementsByClassName("opt2");
s1.onchange = function(){
var s1_slt = s1.selectedIndex;
s2.options[s1_slt].selected = true;
很简单的一个题，想了一上午没想出来。
点一个多选，下面全部选上:
<body>
<input type="checkbox" name="all" id="all" />
<label for="all">全选</label>
<br />
<input type="checkbox" name="c1" id="c1" class="ccc" />
<label for="c1">1</label>
<br />
<input type="checkbox" name="c2" id="c2" class="ccc" />
<label for="c2">2</label>
<br />
<input type="checkbox" name="c3" id="c3" class="ccc" />
<label for="c3">3</label>
<br />
<input type="checkbox" name="c4" id="c4" class="ccc" />
<label for="c4">4</label>
</body>
<script>
var all = document.getElementById("all");
var ccc = document.getElementsByClassName("ccc");
all.onchange = function() {
if(all.checked == true) {
for(var i = 0; i < ccc.length; i++) {
ccc[i].checked = true;
}
else {
for(var i = 0; i < ccc.length; i++) {
ccc[i].checked = false;
}
}
}
for(var i = 0; i < ccc.length; i++) {
ccc[i].onchange = function(){
if(all.checked == true)
all.checked = false;
}
}
</script>
今天讲了一下bom
<script>
var d1 = document.getElementById("d1");
function move() {
if(d1.offsetLeft < 500) {
d1.style.marginLeft = d1.offsetLeft + 1 + "px";
}else{
window.clearInterval(x);
}
}
var x = window.setInterval("move()", 10);
</script>
还是得多看看，必须多写代码。
dom和bom