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]);
    }
    }

点击开始 开始刷新,点击结束结束刷新;

         

posted @ 2017-05-24 16:50  零语言  阅读(120)  评论(0编辑  收藏  举报