码迷,mamicode.com
首页 > 其他好文 > 详细

dom和bom

时间:2017-05-23 21:43:38      阅读:139      评论:0      收藏:0      [点我收藏+]

标签:dom   index   elements   bsp   sel   nts   get   option   i++   

  先看几个两个例题:

  星座对应日期:

  

  <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

标签:dom   index   elements   bsp   sel   nts   get   option   i++   

原文地址:http://www.cnblogs.com/liuyubin0629/p/6896005.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!