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>

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

  • 相关阅读:
    sqlserver 行转列 语文,数学,物理,化学
    除去字符串中不相临的重复的字符 aabcad 得 aabcd
    Mvc项目实例 MvcMusicStore 五
    c# 计算两日期的工作时间间隔(排除非工作日)及计算下一个工作时间点.
    html-----016---HTTP 状态消息
    html-----015---HTML ASCII 参考手册
    html-----014---统一资源定位器
    html-----013----实体字符/HTML URL 编码
    html-----012---颜色的改变
    html-----011--子窗体iframe
  • 原文地址:https://www.cnblogs.com/liuyubin0629/p/6896005.html
Copyright © 2011-2022 走看看