DOW联动及Bom
首先建两个下拉框:
<body>
<select id="s1">
<option>一</option>
<option>二</option>
<option>三</option>
<option>四</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>
</body>
然后在下面建立要发生的事件,首先先赋值。
<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;
第一种方法是取s1的索引值,然后让s2数组的结果=true;
第二种方法:
var s1_slt = s1.selectedOptions[0].innerText;
if(s1_slt == "二"){
for(var x in s2_opt){
if(s2_opt[x].innerText == "2"){
s2_opt[x].selected = true;
}
}
}
}
</script>
今天还做了一个让一个<div>移动的bom,代码如下:
首先先建立一个div:
div {
width: 100px;
height: 100px;
background-color: red;
}
<div id="d1"></div>
然后给div取值:
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);
其中window.clearInterval(x);是刷新停止,var x = window.setInterval("move()", 10);是刷新的频率。
然后就是两个按钮,刷新弹框的内容:
<input type="button" value="开始" onclick="start()" />
<input type="button" value="结束" onclick="end()" />
在进行事件:
window.setTimeout("alert('123')",1000);
var x = [];
function start() {
x.push(window.setInterval("alert(x)", 1000));
}
function end() {
for(var i = 0; i < x.length; i++) {
window.clearInterval(x[i]);
}
}
点击开始 开始刷新,点击结束结束刷新;