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>

 

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

转载于:https://www.cnblogs.com/liuyubin0629/p/6896005.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/252633.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

分享自己针对Automation做的两个成熟的框架(QTP 和Selenium)

自己在google code中开源了自己一直以来做的两个自动化的框架&#xff0c;一个是针对QTP的一个是针对Selenium的&#xff0c;显而易见&#xff0c;一个是商业的UI automation工具&#xff0c;一个是开源的自动化工具。 只是代码&#xff0c;可能你直接看的话&#xff0c;有点不…

全景视频拼接关键技术

一、原理介绍 图像拼接(Image Stitching)是一种利用实景图像组成全景空间的技术&#xff0c;它将多幅图像拼接成一幅大尺度图像或360度全景图&#xff0c;图像拼接技术涉及到计算机视觉、计算机图形学、数字图像处理以及一些数学工具等技术。图像拼接其基本步骤主要包括以下几…

Part8 多态性 8.1运算符重载

1运算符重载的规则C 几乎可以重载全部的运算符&#xff0c;而且只能够重载C中已经有的。不能重载的运算符&#xff1a;“.”、“.*”、“::”、“?:”重载之后运算符的优先级和结合性都不会改变。 重载的两种形式&#xff1a;   1 重载为类的非静态成员函数&#xff1b;   …

H面试程序(29):求最大递增数

要求&#xff1a;求最大递增数 如&#xff1a;1231123451 输出12345 #include<stdio.h> #include<assert.h> void find(char *s) {int maxleng 0;int length 1;int pos 0;int i 0;while(s[i] !\0){ if((s[i])<0||(s[i]>9)){assert(0);}if((s[i1]-0) &g…

reorder-list

/*** Definition for singly-linked list.* class ListNode {* int val;* ListNode next;* ListNode(int x) {* val x;* next null;* }* }*///思路:通过不同的首结点获取到不同的尾结点,然后拼接public class Solution {public ListNode get…

四大主流芯片架构(X86、ARM、RISC-V和MIPS)

目前市场上主流的芯片架构有 X86、ARM、RISC-V和MIPS四种&#xff1a; 序号架构特点代表性的厂商运营机构发明时间1X86性能高&#xff0c;速度快&#xff0c;兼容性好英特尔&#xff0c;AMD英特尔1978年2ARM成本低&#xff0c;低功耗苹果&#xff0c;谷歌&#xff0c;IBM&…

微博预计要火一阵的SleepSort之Shell及C实现

今日在微博看到如此奇妙的代码。竟然还有新的sort算法&#xff0c;对于我这样的渣渣必须研究一下&#xff0c;代码例如以下&#xff1a; #!/bin.bash function f() {sleep "$1" //sleep 这么多secho "$1" }while [ -n "$1" ] //第一个參数不为空…

相关类以及常用方法

1、system&#xff1a;(系统相关类&#xff09; 常用方法&#xff1a; a) : system.arraycopy(制定数组&#xff0c;开始复制的位置&#xff0c;目标数组&#xff0c;开始粘贴的位置&#xff0c;需要复制的长度) 。 将指定源数组中的数组从指定位置复制到目标数组的指定位…

2021-11-15

本文将重点围绕国产CPU的发展历程与当前产业链各领军企业的布局情况作详尽解读&#xff08;并包含特大号独家整理的最新进展&#xff09;&#xff0c;具体如下&#xff1a; 1、国产CPU发展历程回溯 2、飞腾&#xff1a;PK生态的主导者 3、鲲鹏&#xff1a;快速崛起的领导者 …

关于在ubuntu下配置AMD显卡驱动的总结

同样先卸载先前版本 代码:sudo sh /usr/share/ati/fglrx-uninstall.sh代码:sudo apt-get remove --purge fglrx fglrx_* fglrx-amdcccle* fglrx-dev*重启 代码:sudo reboot下载驱动&#xff0c;右边直接有ubuntu32位和64位驱动链接&#xff1a;http://support.amd.com/en-us/do…

Python3中的hasattr()

Python3已经将此内置函数移除了。查阅Python v3.0 documentation发现可以使用 hasattr(object, name)内置函数来完成callable的功能&#xff0c;方式如下&#xff1a; 3.0之前&#xff1a;callable(func) 3.0之后&#xff1a;hasattr(func, __call__) 这两者结果是相同的。 转载…

计算机结构简图

北桥,南桥是主板上芯片组中最重要的两块了.它们都是总线控制器.他们是总线控制芯片.相对的来讲,北桥要比南桥更加重要.北桥连接系统总线,担负着cpu访问内存的重任.同时连接这AGP插口,控制PCI总线,割断了系统总线和局部总线,在这一段上速度是最快的.南桥不和CPU连接通常用来作I/…

原始Ajax

var $ { request:function(obj){ //1. 获得xmlhttprequest对象兼容性处理 var xhr; //undefined未定义 try{ //主流浏览器里面的ajax对象 xhr new XMLHttpRequest(); }catch(e){ //IE低版本的浏览器 xhr new ActiveXObject("Microsoft.XMLHTTP"); } //2. 建立和…

Servlet 与 Ajax 交互一直报status=parsererror

Servlet 与 Ajax 交互一直报statusparsererror 原因&#xff1a;servlet 返回的数据不是 Json 格式 1、JS代码为&#xff1a; 1 var jsonStr {clusterNum:2,iterationNum:3,runTimes:4};2 $.ajax({3 type: "post",4 //http://172.2…

25LINQ拾遗及实例

投影 □ 遍历数组索引&#xff0c;Select获取 int[] indexes {0, 2}; string[] strs {"a", "b", "c", "d"}; var result from i in indexes select strs[i]; foreach (string str in result) { Console.Write(str " &quo…

国产CPU的6大品牌,3大路线对比

这些年来&#xff0c;中国最想发展的科技产品是什么&#xff1f;那必须是芯片&#xff0c;特别是2018年中兴事件、2019年华为事件之后&#xff0c;国内的芯片产业就彻底地火爆了起来。 按照数据显示&#xff0c;截止至2020年10月份&#xff0c;国内已经有27万家芯片企业&#…

BluePrint和ORM

一、蓝图创建 1 #引入库文件2 from flask import Blueprint,request,jsonify3 4 user Blueprint(5 "site",6 __name__,7 template_floder"templates_folder_path",8 static_floder"static" 9 ) #创建蓝图 10 1…

【js实例】Array类型的9个数组方法,Date类型的41个日期方法,Function类型

前文提要:【js实例】js中的5种基本数据类型和9种操作符 Array类型的9个数组方法 Array中有9个数组方法: 1.检测数组 2.转换方法 3.栈方法 4.队列方法 5.冲排序方法6.操作方法 7.位置方法 8.迭代方法 9.归并方法 在实例中介绍,实例如下 /* Array类型 js数组中的每一项可以用来保…

调用咏南中间件插件演示

function GetSvrData(const accountNo, defineId: WideString; inParams: OleVariant): OleVariant; virtual; abstract; // accountNo&#xff0c;帐套编号 // defineId3位插件编号2位自定义编号&#xff0c;defineId必须是唯一的 // inParams&#xff0c;TDataSet.Params的OL…

龙芯与飞腾roadmap

飞腾roadmap 龙芯roadmap 龙芯系列处理器芯片是龙芯中科技术有限公司研发的具有自主知识产权的处理器芯片&#xff0c;产品以32位和64位单核及多核CPU/SOC为主&#xff0c;主要面向国家安全、高端嵌入式、个人电脑、服务器和高性能机等应用。产品线包括龙芯1号小CPU、龙芯2号中…