zoukankan      html  css  js  c++  java
  • 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>

      还是得多看看,必须多写代码。

  • 相关阅读:
    集合的代数运算
    集合的代数运算
    poj1639 Picnic Planning,K度限制生成树
    C/C++学习站点资源
    Mustache 使用心得总结
    PostgreSQL服务端监听设置及client连接方法
    【线性规划与网络流24题】汽车加油行驶问题 分层图
    linux系统下信号具体解释2
    【数据结构】栈-数组的实现
    EJB究竟是什么,真的那么神奇吗??
  • 原文地址:https://www.cnblogs.com/liuyubin0629/p/6896005.html
Copyright © 2011-2022 走看看