javaweb学习day03(JS+DOM)

一、javascript入门

1 官方文档

  • 地址: https://www.w3school.com.cn/js/index.asp
  • 离线文档: W3School 离线手册(2017.03.11 版).chm

2 基本说明

  • JavaScript 能改变 HTML 内容，能改变 HTML 属性，能改变 HTML 样式 (CSS)，能完成 页面的数据验证。【D:\idea_java_projects\hspedu_javascript\js 演示 1.html, 把图片拷贝到 位置,演示效果】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><h2>JavaScript 能做什么？</h2><p>JavaScript 能够改变 HTML 属性值。</p><p>在本例中，JavaScript 改变了图像的 src 属性值。</p><button onclick="document.getElementById('myImage').src='./img/eg_bulbon.gif'"> 开 灯</button><img id="myImage" border="0" src="./img/eg_bulboff.gif" style="text-align:center;"><button onclick="document.getElementById('myImage').src='./img/eg_bulboff.gif'"> 关 灯</button>
</body>
</html>
  • JS 需要运行浏览器来解析执行 JavaScript 代码
  • JS 是 Netscape 网景公司的产品，最早取名为 LiveScript ，后更名为 JavaScript 。和 Java 没 有关系
  • JavaScript 简写 JS

3 JavaScript 特点! 

  • JavaScript 是一种解释型的脚本语言，C、C++等语言先编译后执行，而 JavaScript 是在程序 的运行过程中逐行进行解释。
  • JavaScript 是一种基于对象的脚本语言，可以创建对象，也能使用现有的对象(有对象)。
  • JavaScript 是弱类型的，对变量的数据类型不做严格的要求，变量的数据类型在运行过程可以变化。【创建 js 弱类型.html】
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>JavaScript 是弱类型的</title><!-- 老师解释1. js 代码可以写在 script 标签中2. type="text/javascript" 表示这个脚本(script)类型是 javascript3. type="text/javascript" 可以不写，但是建议写上4. js 语句可以不写 ; 建议写上5. var--><script type="text/javascript">//弱类型//var name="林然"// //输出 alert() 使用弹框方式// //输出 console.log() 在调试输出//alert("name=" + name);// //输出变量的类型 typeof, 输出变量的类型// alert(typeof name);// name = 100; //给 name 重新赋值//alert(typeof(name));// 类型 numbervar age = 10;//数值console.log("age=" + age)console.log(typeof age);age = "北京";console.log("age=" + age)console.log(typeof age);//老师那如果输出字符串+数字的话会把数字转成 string 吗  可以var n = 123 + "abc";console.log(n);console.log(typeof n);</script>
</head>
<body></body>
</html>

 4JavaScript 快速入门

4.1 script 标签 写 JS 代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>script 标签中 写 JS 代码</title><!--老师解读1. 可以在 head 和 body 嵌入 script2. 执行顺序 从上到下3. 建议放在 head--><script type="text/javascript">//在 head 内使用 script 写 jswindow.alert("hello, Javascript");</script>
</head>
<body><script type="text/javascript">// alert 是 JavaScript 语言提供的一个警告框函数。// 它可以输出指定的内容, 变量等信息//scrpt 标签的位置，可以在 head 中，也可以在 body 体window.alert("hello, 林然");</script>
</body>
</html>

4.2 使用 script 标签引入 JS 文件

my.js

alert("欢迎学习js")

html

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>script 标签中 写 JS 代码</title><!--老师解读1. 可以在 head 和 body 嵌入 script2. 执行顺序 从上到下3. 建议放在 head--><script type="text/javascript" src="./js/my.js"></script>
</head>
<body><script type="text/javascript" src="./js/my.js"></script>
</body>
</html>

5 查看 JS 错误信息 

5.1 执行 JS，chrome 浏览器如何查看错误信息

5.2 执行 JS，ff 浏览器如何查看错误信息 

二、javascript变量 

1 JavaScript 变量

1.1 JavaScript 变量表示存储数据的容器

1.2 应用实例 

 2 JavaScript 数据类型

  • String 字符串 [可以双引号括起来，也可以单引号括起来]"a book of JavaScript"、'abc'、 "a"、""

3 运算符

3.1 算术运算符

3.2 赋值运算符 

 3.3 关系运算符

3.4 关系运算符注意事项 

  • 等于： == 是简单的做字面值的比较
  • 全等于： === 除了做字面值的比较之外，还会比较两个变量的数据类型
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>关系运算符</title><script type="text/javascript">var a = "100";var b = 100;console.log(a == b);//trueconsole.log(a === b);//false</script>
</head>
<body></body>
</html>

 3.5 逻辑运算符

3.5.1· 介绍 
  • 逻辑运算符用于测定变量或值之间的逻辑
  • 给定 x=6 以及 y=3，下表解释了逻辑运算符
3.5.2 逻辑符运算注意事项和细节 

3.6 条件符运算 

  • JavaScript 还可以使用 类似 Java 的三元运算符

 4 数组

4.1 定义

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组定义</title><script type="text/javascript">//"Audi", "BMW", "Volvo";//数组定义方式 1var cars1 = ["Audi", "BMW", "Volvo"];console.log("cars1=" + cars1);console.log(cars1[1]);//表示访问 cars1 数组的第 2 个元素, 1 表示下标/索引，//从 0 开始编号//数组定义方式 2var cars2 = [];//空数组//添加元素cars2[0] = "奥迪";cars2[1] = "宝马";cars2[2] = "奔驰";console.log("cars2=" + cars2);console.log("cars2[2]=" + cars2[2]);//奔驰console.log("cars2[10]=" + cars2[10]);// 如 果 该 元 素 不 存 在 ， 返 回 的 就 是//undefined//数组定义方式 3var cars3 = new Array("Audi", "BMW", "Volvo");console.log("cars3=" + cars3);console.log("cars3[0]=" + cars3[0]);//Audi//数组定义方式 4var cars4 = new Array();//空数组console.log(typeof cars4);cars4[0] = "法拉利";cars4[1] = "保时捷";cars4[2] = "yy";//相当于是给数组扩容cars4[0] = "zz";//替换cars4[8] = "红旗";//扩容, 如果是跳过了下标给赋值，那么中间没有赋值的元素//为 undefinedconsole.log("cars4[3]=" + cars4[3]);//undefinedconsole.log("cars4= " + cars4);</script>
</head>
<body></body>
</html>

 4.2 数组使用和遍历

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>数组的使用和遍历</title><script type="text/javascript">var cars = ["Audi", "BMW", "Volvo", 100, 1.1, true];//遍历console.log("数组的长度= " + cars.length)//6for (i = 0; i < cars.length; i++) {console.log(cars[i]); //log 方法会自动换行}</script>
</head>
<body></body>
</html>

三、函数

1 函数快速入门 

1 .1 JS 函数介绍 

  • 函数是由事件驱动的，或者当它被调用时，执行的可重复使用的代码块

1.2 快速入门案例 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数快速入门</title><script>//定义一个简单的函数//解读：如果不调用函数，那么该函数时不会执行//在 js 中如果要执行函数，有两种方式 1.主动调用 hi(); 2. 通过事件去触发该//函数function hi() {alert('hi')}</script>
</head>
<body>
<!-- 这里表示给 button 绑定了 onclick 事件
当用户点击了该 button，就会触发 hi() 函数
--><button onclick="hi()">点击这里</button>
</body>
</html>

2 JavaScript 函数定义方式

2.1 function 关键字来定义函数 

2.2 将函数赋给变量 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>使用函数的第二种方式</title><script type="text/javascript">//可以理解成 f1 指向了函数var f1 = function () {alert("hi 老韩");}console.log(typeof f1);f1();//调用函数//老韩这样玩一把var f3 = f1;f3();var f2 = function (name) {alert("hi " + name);}f2("小米");var f4 = function (n1, n2) {return n1 + n2;}alert("res= " + f4(10, 50));</script>
</head>
<body></body>
</html>

 3 函数注意事项和细节

  • JS 中函数的重载会覆盖掉上一次的定义

函数的 arguments 隐形参数 

  • 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参数的变量。 
  • 隐形参数特别像 java 的可变参数一样。 public void fun( int ... args )
  • js 中的隐形参数跟 java 的可变参数一样。操作类似数组
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>函数使用注意事项和细节</title><script type="text/javascript">//1. JS 中函数的重载会覆盖掉上一次的定义//2. 当你调用 f1() 时候其实调用的是 f1(name)//3. 调用 f1(name) 如果你没有传入实参, 那么这个 name 就是 undefinedfunction f1() {alert("ok jack~")}function f1(name) {alert("hi " + name);}// 2. 函数的 arguments 隐形参数（作用域在 function 函数内）// (1) 隐形参数: 在 function 函数中不需要定义，可以直接用来获取所有参//数的变量。// (2) 隐形参数特别像 java 的可变参数一样。 public void fun( int ... args )// (3) js 中的隐形参数跟 java 的可变参数一样。操作类似数组function f2() {console.log("arguments= ", arguments);console.log("arguments 长度= " + arguments.length)alert("f2()...")}f2(10, 20, 30, "韩顺平");//3 (1)如果我们的函数有形参，在传入实参的时候，仍然按照顺序匹配// (2)如果有匹配上，就赋给他， 如果没有匹配上，也无所谓// (3)仍然会把所有的实参，赋给 arguments// (4)如果形参个数，大于了实参个数，则该形参的值为 undefinedfunction f3(n) {console.log("n=" + n);//100console.log("arguments= ", arguments);//100, 90, 20}f3(100, 90, 20);</script>
</head>
<body></body>
</html>

 四、JS 自定义对象

1：Object 形式

1.1 对象的定义 

 1.2. 对象访问

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>自定义对象</title><script type="text/javascript">//自定义对象的方式 1//person 是一个空对象，没有自定义的函数和属性var person = new Object();console.log("person 类型=" + typeof(person));//object//增加一个属性 nameperson.name='林然';//增加一个属性person.age = 20;person.say=function () {//这里的 this 就是 personconsole.log("person 的信息 " + this.name + " " + this.age + " " + this.job);}//调用//访问属性console.log("name= " + person.name + " " + person.email);//访问方法person.say();//小细节, 如果没有定义属性，直接使用，就会出现变量提升， 显示 undefinedconsole.log("address= " + person.address);</script>
</head>
<body></body>
</html>

2 {} 形式

2.1 对象的定义

2.2 对象访问 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>>自定义对象方式 2：{} 形式</title><script type="text/javascript">//演示自定义对象方式 2：{} 形式var person={name:'林然',age:24,hi:function () {console.log("person 信息= " + this.name + " " + this.age);},sum:function (n1,n2) {return n1 + n2;}}//使用console.log("外部访问 name= " + person.name + " age=" + person.age);person.hi();console.log("sum=" + person.sum(10, 30));</script>
</head>
<body></body>
</html>

五、事件

1 事件介绍

  • 事件是电脑输入设备与页面进行交互的响应
  • 事件通常与函数配合使用，这样就可以通过发生的事件来驱动函数执行
  • js 事件文档地址: https://www.w3school.com.cn/js/js_events.asp

2 事件一览表

 3 事件分类

4 动态注册事件步骤

  • 获取标签<--->dom 对象
  • dom 对象.事件名 = fucntion(){}

 5 onload 加载完成事件

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onload 加载完成事件</title><script type="text/javascript">//定义了一个函数function sayok() {alert('静态注册 onload事件sayok');}//1. 在 js 中，将页面窗口 映射成 window dom 对象//2. window 对象有很多的函数和属性，可以使用//3. window.onload 表示页面被加载完毕//4. 后面的 function (){} 表示加载完毕后，要执行的函数/代码window.onload=function () {alert('动态注册 onload事件')}</script>
</head>
<!--静态注册-->
<body onload="sayok()">
<!--要是需要演示动态，可把body标签的事件绑定取消-->
</body>
</html>

 6 onclick 单击事件

  • onclick : 鼠标点击某个对象
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onclick 单击事件</title><script type="text/javascript">function sayOK() {alert("你点击了 sayOK 按钮");}// 动态注册 onclick 事件//当页面加载完毕后，我们再进行动态绑定//基本概念和机制一定要清楚window.onload=function () {// 动态注册 onclick 事件//1. 先拿到 id=btn01 的 button 对应 dom 对象//2. 通过 dom 对象动态的绑定 onclick 事件//3. 通过 document 的 getElementById 获取对应的 dom 对象var btn01 = document.getElementById("btn01");btn01.onclick = function () {alert("你点击了 sayHi 按钮");}}</script>
</head>
<body>
<!--静态注册 onClick 事件-->
<button onclick="sayOK()">sayOK 按钮</button>
<button id="btn01">sayHi 按钮</button>
</body>
</html>

 7 onblur 失去焦点事件

光标离开输入框

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onblur 失去焦点事件</title><script type="text/javascript">//静态绑定function upperCase() {//1. 先得到 fname 输入框的 value -> 得到对应 dom 对象var fname = document.getElementById("fname");fname.value = fname.value.toUpperCase();}//在页面加载完毕，完成动态绑定window.onload=function () {//1._得到fname2的dom对象var fname2 = document.getElementById('fname2');fname2.onblur=function () {fname2.value=fname2.value.toUpperCase();}}</script>
</head>
<body>输入英文单词：<input type="text" id="fname" onblur="upperCase()" /><br />输入英文单词：<input type="text" id="fname2" />
</body>
</html>

 8 onchange 内容发生改变事件

  • onchange : 域的内容被改变 
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>内容发生改变事件</title><script type="text/javascript">function mySal() {alert('工资发生了变化')}window.onload=function () {//获取到 sel01 的 dom 对象var sel01=document.getElementById('sel01');sel01.onchange=function () {alert('你的女友已变化')}}</script>
</head>
<body>你当前工资水平： <!--静态注册 onchange 事件--><select onchange="mySal()"><option>--工资范围--</option><option>10k 以下</option><option>10k-30k</option><option>30k 以上</option></select><br>你当前女友是谁：<select id="sel01"> <!-- 动态绑定 onchange--><option>---女友---</option><option>艳红</option><option>春桃</option><option>春花</option></select>
</body>
</html>

9 onsubmit 表单提交事件 

  • . onsubmit : 注册按钮被点击, 提交表单(需求: 如果用户名或密码为空，不能提交表单

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>onsubmit 表单提交事件</title><script type="text/javascript">//静态注册表单提交事件function register() {//先得到输入的用户名和密码var username = document.getElementById("username");var pwd = document.getElementById("pwd");//判断是否为空""if("" == username.value || "" == pwd.value){alert("用户名和密码不能为空, 不能提交");return false;//不提交}//表示要提交return true;}//动态提交表单事件window.onload=function () {//使用折半法, 观察原页面是否真的是最新的, 是不是修改的页面和访//问的页面一致//得到 from2 表单 dom 对象var form2=document.getElementById('form2');// //给 form2 绑定 onsubmit 事件// onsubmit 绑定的函数，会直接将结果(f,t)返回给 onsubmitform2.onsubmit=function () {if(form2.username.value == "" || form2.pwd.value == "") {alert("用户名和密码不能为空, 不能提交");return false;//不提交}return true;}}</script>
</head>
<body><h1>注册用户 1</h1> <!-- 静态注册表单提交事件 --><form action="ok.html" onsubmit="return register()">u: <input type="text" id="username" name="username"/><br/>p: <input type="password" id="pwd" name="pwd"/><br/><input type="submit" value="注册用户"/></form><h1>注册用户 2</h1> <!-- 动态注册表单提交事件 --><form action="ok.html" id="form2">u: <input type="text" name="username"/><br/>p: <input type="password" name="pwd"/><br/><input type="submit" value="注册用户"/></form>
</body>
</html>

六、DOM

1 官方文档

  • 地址: https://www.w3school.com.cn/js/js_htmldom.asp

2 DOM 介绍 

2.1 基本介绍 

  • DOM 全称是 Document Object Model 文档对象模型 
  • 就是把文档中的标签，属性，文本，转换成为对象来管理

 3 HTML DOM

  • 当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。 
  • HTML DOM 树 对象[属性，方法/函数] 

4 document 对象 

4.1 doucment 说明 

  • document 它管理了所有的 HTML 文档内容
  • document 它是一种树结构的文档。
  • 有层级关系 在 dom 中把所有的标签 都 对象化 （得到这个 html 标签的<--->对象--> 操作）
  •  通过 document 可以访问所有的标签对象

 4.2 doucment 对象方法一览

文档地址: https://www.w3school.com.cn/js/js_htmldom_document.asp 

 4.3 应用实例 1

点 击
韩 顺 平 教 育 文 本 ， 弹 出 窗 口 获 内 容 

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementById 的使用</title><!-- 1. 先得到 h1 的 dom 对象, 通过 id 获取2. 对 h1 对应的 dom 对象操作即可--><script type="text/javascript">// function getValue() {//定义函数// //myHeader 就是 dom 对象// var myHeader = document.getElementById("myHeader");// //alert(myHeader);//HTMLHeadingElement// //解读 myHeader.innerText 获取到 myHeader 的包含的文本// //看看 innerText , innerHTML// alert(myHeader.innerText);//文本 韩顺平教育// alert(myHeader.innerHTML);//html <div>韩顺平教育</div>// }//动态绑定,讲过老师，前面老师讲的 js 事件章节//为了让小伙伴，听得明白一点，快速演示->回去看 js 事件window.onload = function () {//1. 获取 myHeader 的 dom 对象var myHeader = document.getElementById("myHeader");//2. 给 myHeader 绑定 onclick 的事件myHeader.onclick = function () {alert("动态绑定 内容是= " + myHeader.innerText);}}</script>
</head>
<body><h1 id="myHeader" onclick="getValue()">韩顺平教育</h1><p>Click on the header to alert its value</p>
</body>
</html>

 4.4 应用实例 2

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementsByName 函数</title><script type="text/javascript">//完成全选function selectAll() {var sport = document.getElementsByName("sport");//sports 是什么? 是 nodeList 即时一个集合//alert(sports);//2. 拿到[dom ,集合]，操作【属性和方法 api】泥瓦匠|工程师 清华// 遍历 sports， 修改for(var i=0;i<sport.length;i++){sport[i].checked=true;//选中}}function selectNone() {var sport = document.getElementsByName("sport");for (var i=0;i<sport.length;i++){sport[i].checked=false;}}function selectReverse() {var sport = document.getElementsByName("sport");for (var i=0;i<sport.length;i++){if(sport[i].checked==true){sport[i].checked=false;}else {sport[i].checked=true;}}}</script>
</head>
<body>你会的运动项目：<input type="checkbox" name="sport" value="zq" checked="checked">足球<input type="checkbox" name="sport" value="tq" >台球<input type="checkbox" name="sport" value="ppq" >乒乓球 <br/><br/><button onclick="selectAll()">全选</button><button onclick="selectNone()">全不选</button><button onclick="selectReverse()">反选</button>
</body>
</html>

4.5 应用实例 3-图片切换案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>getElementsByTagName</title><script type="text/javascript">function changeImage() {//1.得到所有的imgvar imgs=document.getElementsByTagName("img");//imgs 是 HTML****Collections//2 修改srcvar inputs=document.getElementById("123");var index=0;if(inputs.value=="查看多少小狗,并切换成小猫"){   alert("狗狗的数量是："+imgs.length);index=4;inputs.value="查看多少小猫,并切换成小狗";}else {alert("猫猫的数量是："+imgs.length);index=0;inputs.value="查看多少小狗,并切换成小猫";}for (var i=index; i <imgs.length ; i++) {imgs[i].src="./img/"+((i+4)%7)+".png";}}</script>
</head>
<body>
<img src="./img/1.png" height="100">
<img src="./img/2.png" height="100">
<img src="./img/3.png" height="100">
<br/>
<input type="button" onclick="changeImage()" value="查看多少小猫,并切换成小狗" id="123"/>
</body>
</html>

4.6 应用实例 4-添加小猫图片案例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>createElement</title><script type="text/javascript">function addImg() {//创建一个小猫图片img，展示在页面var img = document.createElement("img");//alert(htmlImageElement);img.src="./img/1.png";//展示document.body.append(img);}</script>
</head>
<body>
<input type="button" onclick="addImg()" value="点击创建一只小猫~"/></body>
</html>

七、HTML DOM 节点

1 基本介绍 

在 HTML DOM （文档对象模型）中，每个部分都是节点： 

 2 节点属性和方法一览

  • HTML DOM Element 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_all.asp 
  • HTML DOM Document 对象文档地址: https://www.w3school.com.cn/jsref/dom_obj_document.asp 

3 节点常用方法 

  • 通过具体的元素节点调用 getElementsByTagName() 方法，获取当前节点的指定标签名孩子节点
  • appendChild( oChildNode ) 方法，可添加一个子节点，oChildNode 是要添加的孩子节点

4 节点常用属性

  • childNodes 属性，获取当前节点的所有子节点
  • firstChild 属性，获取当前节点的第一个子节点
  • lastChild 属性，获取当前节点的最后一个子节点
  • parentNode 属性，获取当前节点的父节点
  • nextSibling 属性，获取当前节点的下一个节点 (后一个)
  • previousSibling 属性，获取当前节点的上一个节点 (前一个)
  • className 用于获取或设置标签的 class 属性值
  • innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
  • innerText 属性，表示获取/设置起始标签和结束标签中的文本

 5 应用实例

 6 乌龟吃鸡游戏

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>乌龟游戏</title><script type="text/javascript">function move(obj) {//alert(obj);//编程思想, 技巧--> 不知道是什么就输出，或者日志，或者 debug//编程小技巧: 在不确定情况下，可以输出看看//2.1 拿到wugui dom对象var wugui=document.getElementById("wugui");//获取wugui.style.left 和wugui.style.top 的值，通过修改让乌龟动起来var wugui_left=wugui.style.left;//拿到的是字符串而不是数字var wugui_top=wugui.style.top;// 分析: wugui_left 和 wugui_top 是 string '100px' -> nubmer 100// 类型转换是靠 apiwugui_left = parseInt(wugui_left.substring(0, wugui_left.indexOf("p")));wugui_top = parseInt(wugui_top.substring(0, wugui_top.indexOf("p")));//根据obj的value进行处理if(obj.value=="向上走"){wugui_top=wugui_top-10;wugui.style.top=wugui_top+"px";}if(obj.value=="向右走"){wugui_left+=10;wugui.style.left=wugui_left+"px"}if(obj.value=="向下走"){wugui_top+=10;wugui.style.top=wugui_top+"px";}if(obj.value=="向左走"){wugui_left-=10;wugui.style.left=wugui_left+"px"}var cock=document.getElementById("cock");var cock_top=cock.style.top;var cock_left=cock.style.left;cock_top=parseInt(cock_top.substring(0,cock_top.indexOf('p')));cock_left=parseInt(cock_left.substring(0,cock_left.indexOf('p')));var y=Math.abs(wugui_top-cock_top);var x=Math.abs(wugui_left-cock_left);var yy=0;//默认没有碰撞var xx=0;//默认没有碰撞//定义乌龟，公鸡高度和宽度var wugui_heght=67;var wugui_width=94;var cock_heght=73;var cock_width=76;if(wugui_top<cock_top){//如果乌龟在公鸡上面if(y<wugui_heght){yy=1;}}else {//乌龟在下面if(y<cock_heght){yy=1;}}if(wugui_left<cock_left){//乌龟在左边if(x<wugui_width){xx=1}}else {if(x<cock_width){xx=1}}if(xx==1&&yy==1){alert("乌龟好厉害呀");wugui.style.top="120px";wugui.style.left="100px";}}</script>
</head>
<body>
<table border="1"><tr><td></td><!--1.this表示的是点击的这个button,而且是一个dom对象2.可以使用属性和方法--><td><input type="button" value="向上走" onclick="move(this)"/></td><td></td></tr><tr><td><input type="button" value="向左走" onclick="move(this)"/></td><td></td><td><input type="button" value="向右走" onclick="move(this)"/></td></tr><tr><td></td><td><input type="button" value="向下走" onclick="move(this)"/></td><td></td></tr>
</table>
<!--把乌龟放在一个div-->
<!--1.style 的position:absolute 是绝对定位，参考页面左上角2.left:100表示图片距离窗口原点横坐标的距离3.top :表示图片距离窗口原点的纵坐标的距离4.针对图片而言，定位的参考点是图片的左上角-->
<div id="wugui" style="position: absolute ;left:100px;top:120px;"><img src="1.bmp" border="1" alt=""/>
</div>
<!--公鸡图片div-->
<div id="cock" style="left:200px;position:absolute;top:200px;"><img src="2.bmp" border="1" alt=""/>
</div>
</body>
</html>

@CHARSET "UTF-8";body {width: 800px;margin-left: auto;margin-right: auto;
}button {width: 200px;margin-bottom: 10px;text-align: left;
}#btnList {float:left;
}#total{width: 450px;float:left;
}ul{list-style-type: none;margin: 0px;padding: 0px;
}.inner li{border-style: solid;border-width: 1px;padding: 5px;margin: 5px;float:left;
}.inner{width:400px;border-width: 1px;margin-bottom: 10px;padding: 10px;float: left;
}

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

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

相关文章

基于Java SSM框架实现疫情防控系统项目【项目源码】

基于Java SSM框架实现疫情防控系统项目【项目源码】

基于java的SSM框架实现疫情防控系统演示 Java技术 Java技术它是一个容易让人学会和使用的一门服务器语言。它在编程的过程当中只需要很少的知识就能建立起一个真正的交互站点。对于这个教程来说它并不需要你完全去了解这种语言&#xff0c;只要能快速融入web站点就可以&#x…
阅读更多...
2024春日营销三大内容趋势，种草爆文轻松get丨小红书数据分析

2024春日营销三大内容趋势，种草爆文轻松get丨小红书数据分析

春季是市场迎来消费焕活的新周期&#xff0c;也是新一年品牌实现生意高速起步的必争节点。一年之“计”在于春&#xff0c;春日营销&#xff0c;吹响品牌营销第一声号角。那么&#xff0c;春日营销在小红书上有何内容趋势&#xff0c;跟着小编的脚步一起来看看~ 内容趋势 1、亲…
阅读更多...
34461A 数字万用表，六位半，Truevolt DMM

34461A 数字万用表，六位半，Truevolt DMM

01 34461A 数字万用表&#xff0c;六位半 产品综述&#xff1a; 34461A 六位半万用表是替代 Keysight 34401A 数字万用表&#xff08;此前为 Agilent 34401A&#xff09;的新一代产品。 34461A 拥有 Truevolt 系列数字万用表的全新图形显示界面、先进的分析模式和内置数学函…
阅读更多...
JAVA JDK1.8下载安装

JAVA JDK1.8下载安装

1、官网下载地址Java Downloads | Oracle 2、双击运行该文件 3、 4、 5、 6、安装完成后&#xff0c;现在来设置 环境变量 7、新建系统变量 8、修改Path变量 9、配置完成安装完成
阅读更多...
6.s081 学习实验记录（九）lock parallelism

6.s081 学习实验记录（九）lock parallelism

文章目录 一、Memory allocator简介提示实验代码实验结果 二、Buffer cache简介提示实验代码实验结果 该实验将重构某些代码以提高并发度。 首先切换到lock分支&#xff1a; git fetchgit checkout lockmake clean 一、Memory allocator 简介 user/kalloctest 这个程序会对…
阅读更多...
Unity 2D Spine 外发光实现思路

Unity 2D Spine 外发光实现思路

Unity 2D Spine 外发光实现思路 前言 对于3D骨骼&#xff0c;要做外发光可以之间通过向法线方向延申来实现。 但是对于2D骨骼&#xff0c;各顶点的法线没有向3D骨骼那样拥有垂直于面的特性&#xff0c;那我们如何做2D骨骼的外发光效果呢&#xff1f; 理论基础 我们要知道&a…
阅读更多...
Spring Boot 笔记 010 创建接口_更新用户头像

Spring Boot 笔记 010 创建接口_更新用户头像

1.1.1 usercontroller中添加updateAvatar&#xff0c;校验是否为url PatchMapping("updateAvatar")public Result updateAvatar(RequestParam URL String avatarUrl) {userService.updateAvatar(avatarUrl);return Result.success();} 1.1.2 userservice //更新头像…
阅读更多...
2.18通过字符设备驱动分步注册过程实现LED驱动的编写，编写应用程序测试

2.18通过字符设备驱动分步注册过程实现LED驱动的编写，编写应用程序测试

应用程序&#xff1a; #include<stdlib.h> #include<stdio.h> #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> #include<unistd.h> #include<string.h> #include<sys/ioctl.h> #include"myled.h&quo…
阅读更多...
JVM-JVM调优基础（理论）

JVM-JVM调优基础（理论）

申明&#xff1a;文章内容是本人学习极客时间课程所写&#xff0c;作为笔记进行记录&#xff0c;文字和图片基本来源于课程资料&#xff0c;在某些地方会插入一点自己的理解&#xff0c;未用于商业用途&#xff0c;侵删。 原资料地址&#xff1a;课程资料 JVM参数 标准参数 …
阅读更多...
蓝桥杯：C++排序

蓝桥杯：C++排序

排序 排序和排列是算法题目常见的基本算法。几乎每次蓝桥杯软件类大赛都有题目会用到排序或排列。常见的排序算法如下。 第(3)种排序算法不是基于比较的&#xff0c;而是对数值按位划分&#xff0c;按照以空间换取时间的思路来排序。看起来它们的复杂度更好&#xff0c;但实际…
阅读更多...
ADC--模拟量转换成数字量

ADC--模拟量转换成数字量

目录 一、ADC硬件组成七大部分&#xff1a; 二、单次转换&#xff0c;连续转换&#xff0c;不连续采样模式&#xff0c;扫描模式区别 1、举例(5种组合情况) 2、模拟看门狗中断的作用&#xff1a; 三、MCU使用ADC步骤 一、ADC硬件组成七大部分&#xff1a; ①输入电压&#…
阅读更多...
Java数字孪生智慧工地数据大屏APP项目源码

Java数字孪生智慧工地数据大屏APP项目源码

目录 智慧工地云平台核心功能 1.劳务管理 2.视频监控 3.安全教育 4.进度管理 5.环境监测 6.塔吊监控 7.升降机监控 8.工地广播 9.深基坑高支模 10.AI识别 11.安全质量 智慧工地建设的价值和意义 危大工程管理 智慧工地聚焦施工现场一线生产活动&#xff0c;利用物…
阅读更多...
使用Python生成二维码的完整指南

使用Python生成二维码的完整指南

无边落木萧萧下&#xff0c;不如跟着可莉一起游~ 可莉将这篇博客收录在了&#xff1a;《Python》 可莉推荐的优质博主首页&#xff1a;Kevin ’ s blog 本文将介绍如何使用Python中的qrcode库来生成二维码。通过简单的代码示例和详细解释&#xff0c;读者将学习如何在Python中轻…
阅读更多...
数据结构-双指针法

数据结构-双指针法

介绍 双指针法是一种可以在O&#xff08;n&#xff09;时间复杂度内解决数组、链表、字符串等数据结构相关的问题的方法。核心思想为使用两个指针在不同位置遍历数组或链表&#xff0c;从而实现特定操作。 常见的双指针法有 1.快慢指针&#xff1a;快指针每次移动两步&…
阅读更多...
单测的思路

单测的思路

文章目录 单测的分类方法的单测生成工具的对比生成步骤 接口的单测mock步骤部分依赖mock的方式 场景的单测参考 单测的分类 单元测试&#xff08;Unit Testing&#xff09;是一种软件开发中的测试方法&#xff0c;它的主要目的是确保软件中的最小可测试单元&#xff08;通常是…
阅读更多...
(07)Hive——窗口函数详解

(07)Hive——窗口函数详解

一、 窗口函数知识点 1.1 窗户函数的定义 窗口函数可以拆分为【窗口函数】。窗口函数官网指路&#xff1a; LanguageManual WindowingAndAnalytics - Apache Hive - Apache Software Foundationhttps://cwiki.apache.org/confluence/display/Hive/LanguageManual%20Windowing…
阅读更多...
英文论文（sci）解读复现【NO.21】一种基于空间坐标的轻量级目标检测器无人机航空图像的自注意

英文论文（sci）解读复现【NO.21】一种基于空间坐标的轻量级目标检测器无人机航空图像的自注意

此前出了目标检测算法改进专栏&#xff0c;但是对于应用于什么场景&#xff0c;需要什么改进方法对应与自己的应用场景有效果&#xff0c;并且多少改进点能发什么水平的文章&#xff0c;为解决大家的困惑&#xff0c;此系列文章旨在给大家解读发表高水平学术期刊中的 SCI论文&a…
阅读更多...
红队笔记Day3--＞隧道上线不出网机器

红队笔记Day3--＞隧道上线不出网机器

昨天讲了通过代理的形式&#xff08;端口转发&#xff09;实现了上线不出网的机器&#xff0c;那么今天就来讲一下如何通过隧道上线不出网机器 目录 1.网络拓扑 2.开始做隧道&#xff1f;No&#xff01;&#xff01;&#xff01; 3.icmp隧道 4.HTTP隧道 5.SSH隧道 1.什么…
阅读更多...
探索未来科技前沿：深度学习的进展与应用

探索未来科技前沿：深度学习的进展与应用

深度学习的进展 摘要&#xff1a;深度学习作为人工智能领域的重要分支&#xff0c;近年来取得了巨大的进展&#xff0c;并在各个领域展现出惊人的应用潜力。本文将介绍深度学习的发展历程、技术原理以及在图像识别、自然语言处理等领域的应用&#xff0c;展望深度学习在未来的…
阅读更多...
RunnerGo：UI自动化测试神器！

RunnerGo：UI自动化测试神器！

UI自动化测试已经成为现代软件开发过程中不可或缺的一部分。它能够提供诸多优势&#xff0c;包括提高测试效率、减少人力成本、提升软件质量等。同时&#xff0c;可视化工具为UI自动化测试带来了更多便利和灵活性。RunnerGo近期上线脚本录制器&#xff0c;根据你的测试操作直接…
阅读更多...
最新文章
推荐文章

Copyright @ 2022~2023