Home Explore Help
Sign In
lovecoding
/
VIP35
10
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

33

fjl123 9 months ago
parent
71035cba1b
commit
ddfe055168
15 changed files with 674 additions and 0 deletions
Split View Show Diff Stats
  1. 68 0
      src/main/java/com/sf/day33/01-BOM 操作.html
  2. 54 0
      src/main/java/com/sf/day33/02-BOM 练习添加数据.html
  3. 27 0
      src/main/java/com/sf/day33/03-BOM 练习弹框.html
  4. 58 0
      src/main/java/com/sf/day33/04-BOM 练习抽奖.html
  5. 18 0
      src/main/java/com/sf/day33/05-BOM 练习更换图片.html
  6. 47 0
      src/main/java/com/sf/day33/06-location.html
  7. 12 0
      src/main/java/com/sf/day33/07-DOM 操作.html
  8. 52 0
      src/main/java/com/sf/day33/08-获取界面当中DOM 元素.html
  9. 33 0
      src/main/java/com/sf/day33/09-DOM 操作属性和内容.html
  10. 45 0
      src/main/java/com/sf/day33/10-DOM 的其他的属性和方法.html
  11. 43 0
      src/main/java/com/sf/day33/11-DOM 的练习隔行变色.html
  12. 29 0
      src/main/java/com/sf/day33/12-DOM 当中操作属性.html
  13. 59 0
      src/main/java/com/sf/day33/13.JS对象-DOM-综合实战.html
  14. 47 0
      src/main/java/com/sf/day33/14 JS 事件.html
  15. 82 0
      src/main/java/com/sf/day33/15- JS 事件练习.html

+ 68 - 0
src/main/java/com/sf/day33/01-BOM 操作.html
View File 

@@ -0,0 +1,68 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<button onclick="alert(123)">按钮</button>
 
+<img src="" alt="">
 
+</body>
 
+<script>
 
+    /**
 
+     * BOM 对象: JS 为了更方便操作浏览器, 他把浏览器各个部分封装成了对象
 
+     * History: 历史对象
 
+     * location: 地址栏对象
 
+     * Navigator : 浏览器对象
 
+     * Screen: 屏幕对象
 
+     * window :  一个浏览器标签窗口
 
+     *
 
+     * window 当中他是提供了获取其他BOM 对象属性
 
+     * 比如我想要获取locationBOM 对象
 
+     * window.location   由于window 是全局对象你可以简写 location
 
+     *
 
+     */
 
+    console.log(window)
 
+    console.log(window.location)
 
+    console.log(location)
 
+
 
+    // window 当中常见的方法
 
+    // var flag=  confirm("是否要删除呀?")
 
+    // console.log(flag)
 
+
 
+
 
+    // setInterval 定时器
 
+    /**
 
+     * var 定时器 = setInterval(function(){} , 毫秒值 1000)
 
+     * 如果你了1000 , 表示每隔1s 中去执行function 的函数的内容
 
+     *
 
+     * clearInterval(定时器): 取消定时器
 
+     *
 
+     * 由于这两个函数都是window  的函数那么window 可以省略不写
 
+     */
 
+    // 需求: 当count 到5 的时候我们要停止定时器
 
+    // var count = 0
 
+    // var timers = setInterval(function () {
 
+    //     console.log(123123)
 
+    //     count++
 
+    //     if(count == 5){
 
+    //         clearInterval(timers)
 
+    //     }
 
+    // },1000)
 
+
 
+
 
+    /**
 
+     * setTimeout(function 函数,3000)
 
+     * 
+     * 延时当中代码, 不会立马执行而是在指定的时间之后去执行
 
+     */
 
+
 
+
 
+    setTimeout(function () {
 
+        console.log(123123)
 
+    },3000)
 
+
 
+
 
+
 
+</script>
 
+</html>

+ 54 - 0
src/main/java/com/sf/day33/02-BOM 练习添加数据.html
View File 

@@ -0,0 +1,54 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<div id="div"></div>
 
+<hr>
 
+<form action="">
 
+    id: <input type="text" id="id"> <br><br>
 
+    name: <input type="text" id="name"> <br><br>
 
+    age: <input type="text" id="age"> <br><br>
 
+    email: <input type="text" id="email"> <br><br>
 
+    <input type="button" value="添加" onclick="fun()">
 
+</form>
 
+</body>
 
+<script>
 
+    //需求:
 
+    // 界面当中有一个按钮: 点击按钮是否要添加,如果点击确定就进行添加
 
+    //  最上面
 
+    //   1     zhangsan    10   123@qq.com
 
+    //   1     lisi    20   123@qq.com
 
+    //  --------------------------------
 
+    //   姓名:  xx
 
+    //  年龄: xx
 
+    //...   添加
 
+    var arr = [{id:1,name: "zhangsan",age:10,email:"!23@qq.com"}]
 
+
 
+    var str = arr[0].id  +" " + arr[0].name +"  " +arr[0].age +"  " +arr[0].email
 
+    // 把str 内容设置div 标签中
 
+    document.getElementById("div").innerText = str
 
+
 
+    function fun() {
 
+        var flag = confirm("确定要添加吗")
 
+        if(flag){
 
+            var id = document.getElementById("id").value
 
+            var name = document.getElementById("name").value
 
+            var email = document.getElementById("email").value
 
+            var age = document.getElementById("age").value
 
+            // 把内容要添加到数组中
 
+            arr.push({id:id,name:name,email:email,age:age})
 
+
 
+            // 拼接字符串, 然后把内容重新放到str 当中
 
+            // 遍历数组
 
+            var st = ""
 
+            arr.forEach(function (item,index) {
 
+                st +=  arr[index].id  +" " + arr[index].name +"  " +arr[index].age +"  " +arr[index].email + "<br>"
 
+            })
 
+            document.getElementById("div").innerHTML = st;
 
+        }
 
+    }
 
+</script>
 
+</html>

+ 27 - 0
src/main/java/com/sf/day33/03-BOM 练习弹框.html
View File 

@@ -0,0 +1,27 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<button onclick="fun()">生日礼物</button>
 
+</body>
 
+<script>
 
+    // 需求2 : 界面当中有一个按钮 生日礼物
 
+    //         点击确定: 弹框出新框中显示送你一个屁
 
+    //         在新弹出框中: 点击确定在弹出一个框你获得了一个屁
 
+    //         在新弹出框中: 点击取消在弹出一个框恭喜你失去了一个屁 -> 在点取消在弹出来你又失去一个屁
 
+    function fun() {
 
+        var f = confirm("上当了 送你一个屁")
 
+        if(f){
 
+            confirm("恭喜你获得了一个屁")
 
+        }else{
 
+           var f1 =  confirm("很遗憾你失去了一个屁")
 
+            if(!f1){
 
+                confirm("你真的想失去这个屁吗")
 
+            }
 
+        }
 
+    }
 
+</script>
 
+</html>

+ 58 - 0
src/main/java/com/sf/day33/04-BOM 练习抽奖.html
View File 

@@ -0,0 +1,58 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<div id="div"></div>
 
+<h1 id="h1"></h1>
 
+获奖人: <span id="sp"> </span> <br>
 
+<h1 id="time"></h1>
 
+<button onclick="fun()">抽奖</button>
 
+
 
+</body>
 
+<script>
 
+    function getRandomInt(min, max) {
 
+        min = Math.ceil(min);
 
+        max = Math.floor(max);
 
+        return Math.floor(Math.random() * (max - min + 1)) + min;
 
+    }
 
+
 
+    // 使用方法:
 
+    var randomInteger = getRandomInt(1,5);
 
+    console.log(randomInteger)
 
+
 
+    //需求: 抽奖需求
 
+    // 在网页当中要显示 抽奖人有 [张三, lisi , 王五 , 赵六 , 王八]
 
+    // 抽奖按钮: 点击抽奖按钮 在网页中看到倒计时 , 倒计时5秒钟, 当到0的时候显示出来抽奖结果是那个人
 
+    // 自己找如何去创建一个随机数
 
+    var arr = ["张三","lisi","王五","赵六","王八"]
 
+    var st = "";
 
+    arr.forEach(function (item,index) {
 
+        st += item + "  "
 
+    })
 
+    //把拼完以后内容设置div 里面
 
+    document.getElementById("div").innerText = "抽奖人:" + st;
 
+
 
+    function fun() {
 
+        // 让我们时间进行从5 减少到0
 
+        var a = 5;
 
+        var timer = setInterval(function () {
 
+            // 把剪完以后设置到界面中
 
+            document.getElementById("time").innerText=a
 
+
 
+            a--;
 
+            // 如果值到0 我们要停止定时器
 
+            if(a == -1){
 
+                clearInterval(timer)
 
+                // 随机上我们数组当中获取一个数据
 
+                var random = getRandomInt(0,arr.length-1);
 
+                // 根据我们这个随机数上数组中获取数据
 
+                document.getElementById("sp").innerText = arr[random]
 
+            }
 
+
 
+        },1000)
 
+    }
 
+</script>
 
+</html>

+ 18 - 0
src/main/java/com/sf/day33/05-BOM 练习更换图片.html
View File 

@@ -0,0 +1,18 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<img  id="img" src="img/92321886gy1hs473d900bj20xc1cln6y.jpg" height="1006" width="690"/>
 
+</body>
 
+<script>
 
+    // 如何做到在5秒以后把路径更换成凤姐
 
+    // 要利用演示器, 元时期可以让我们代码在一段时间以后去执行
 
+    setTimeout(function () {
 
+        // 如何去修改img 的src 属性
 
+        document.getElementById("img").src = "img/QQ20240816-111152.png"
 
+    },5000)
 
+</script>
 
+</html>

+ 47 - 0
src/main/java/com/sf/day33/06-location.html
View File 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<!--<button onclick="fun()">按钮</button>-->
 
+<form action="">
 
+    账号 : <input type="text" id="username"> <br><br>
 
+    密码 : <input type="password" id="password"> <br><br>
 
+    <input type="button" value="登录" onclick="fun()">
 
+</form>
 
+</body>
 
+<script>
 
+    /**
 
+     * location : 在浏览器当中是地址栏区域, 主要是负责做地址跳转
 
+     *
 
+     * 如何获取location BOM 对象:  window.location 获取到location 对象
 
+     *
 
+     * location 的常见属性:  href属性 可以帮助我们去做界面跳转
 
+     */
 
+    // function fun(){
 
+    //     location.href = "http://www.taobao.com"
 
+    // }
 
+
 
+    // 做一个登录界面 ,可以输入账号和密码
 
+    // 如果用户输入账号和密码为空 弹出来框提醒用户账号密码不能为空
 
+    // 对比用户输入账号如果为admin, 密码为123 表示登录成功跳转list.html 界面当中
 
+    // 如果对比失败, 弹框账号密码错误
 
+    function fun() {
 
+        var username =document.getElementById("username").value
 
+        var password =document.getElementById("password").value
 
+        if(!(username && password)){
 
+            alert("账号密码不能为空")
 
+            return
 
+        }
 
+
 
+        if("admin" == username && "123"==password){
 
+            // 我这种写法叫做相对路径, 在当前的目录当中去寻找list.html
 
+            location.href = "list.html"
 
+        }else{
 
+            alert("账号密码错误")
 
+        }
 
+    }
 
+</script>
 
+</html>

+ 12 - 0
src/main/java/com/sf/day33/07-DOM 操作.html
View File 

@@ -0,0 +1,12 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<!--html 标签标准属性: id class = 为了定位到这个html元素   title  style-->
 
+<h1>四福科技</h1>
 
+<a href="htt://sss">x</a>
 
+</body>
 
+</html>

+ 52 - 0
src/main/java/com/sf/day33/08-获取界面当中DOM 元素.html
View File 

@@ -0,0 +1,52 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<div id="div1">123</div>
 
+<div id="div2">456</div>
 
+<p>我是p </p>
 
+<h1>我是h1</h1>
 
+<div>234234234</div>
 
+<div name="sss">123</div>
 
+
 
+
 
+<p class="clz">123</p>
 
+<p class="clz">12123123</p>
 
+</body>
 
+<script>
 
+    // 需求: 想要获取界面当中id = div2 元素
 
+    var div2 = document.getElementById("div2")
 
+    // console.log(div2)
 
+
 
+    var div1 = document.getElementById("div1")
 
+    // console.log(div1)
 
+
 
+    // 需求: 要获取界面当中所有的div 标签
 
+    var divs = document.getElementsByTagName("div")
 
+    console.log(divs)
 
+    console.log(typeof divs)
 
+    // for(var i=0; i<divs.length;i++){
 
+    //     var item = divs[i];
 
+    //     item.style.backgroundColor = "red"
 
+    // }
 
+    // 额外需求: 想要把界面当中所有的div 背景颜色变成红色
 
+    var div1s = document.getElementsByName("sss")
 
+    console.log(div1s)
 
+
 
+    /**
 
+     * 需求: 让class 的值为clz 的p 标签字体颜色变成绿色
 
+     * 1 获取class 值为clz 的元素
 
+     * 2 设置字体颜色
 
+     */
 
+
 
+    var arr1 = document.getElementsByClassName("clz")
 
+    for(var i=0; i<arr1.length;i++){
 
+        var item = arr1[i];
 
+        item.style.color = "green"
 
+    }
 
+
 
+</script>
 
+</html>

+ 33 - 0
src/main/java/com/sf/day33/09-DOM 操作属性和内容.html
View File 

@@ -0,0 +1,33 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<div id="div1">123123</div>
 
+<div id="div2" style="background-color:red;">234234234</div>
 
+<input type="text" id="username" value="1">
 
+<button onclick="fun()">修改</button>
 
+</body>
 
+
 
+<script>
 
+    // 需求要获取div1 的内容
 
+    console.log(document.getElementById("div1").innerText)
 
+    // 需求2 给id = div2 的内容修改成456456
 
+    // function fun() {
 
+    //     document.getElementById("div2").innerText = 456456
 
+    // }
 
+    // 需求3 给id = div2 的修改成具备h1标题效果的内容
 
+    // 在JS 中对于dom 元素内容操作有两个属性一个innerText 一个是inserthtml
 
+    // 如果设置内容都是文本内容 没有html 效果你用那一个都可以, 但是如果你设置效果要有html 作用使用innerHtml
 
+    // function fun() {
 
+    //     document.getElementById("div2").innerHTML = "<h1>456456</h1>"
 
+    // }
 
+    // 需求4 获取id=username 的value
 
+    console.log(document.getElementById("username").value)
 
+    // 需求5 给id = username input去设置内容
 
+    document.getElementById("username").value = "123123"
 
+
 
+</script>
 
+</html>

+ 45 - 0
src/main/java/com/sf/day33/10-DOM 的其他的属性和方法.html
View File 

@@ -0,0 +1,45 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+    <div>上面兄弟</div>
 
+    <div id="parent">
 
+        <div>
 
+            <div>123</div>
 
+        </div>
 
+        <div>123</div>
 
+    </div>
 
+    <div>下面的兄弟</div>
 
+    <div id="div">我是要添加的元素</div>
 
+
 
+    <button onclick="del()">删除</button>
 
+    <button onclick="fun()">添加</button>
 
+</body>
 
+<script>
 
+    // 获取id = parent 的第一个子元素  firstChild
 
+    var div = document.getElementById("parent")
 
+    // console.log(div.firstChild)        // 获取第一个子节点元素
 
+    // console.log(div.firstElementChild) // 获取第一html 标签子元素
 
+    // console.log(div.lastChild)         // 获取最后一个子元素
 
+    // console.log(div.lastElementChild)  // 获取最后一个html 标签子元素
 
+    // console.log(div.childNodes)        // 获取所有的子元素
 
+    // console.log(div.previousElementSibling)  // 获取上一个相邻兄弟元素
 
+    // console.log(div.nextElementSibling)      // 获取下一个相邻兄弟元素
 
+    // console.log(div.parentElement)           // 获取当前节点父元素
 
+    // 判断div 是否包含子节点
 
+    console.log(div.hasChildNodes())
 
+    // 需求: 现在要id=div 元素要添加 id = parent的内部作为子节点
 
+    function fun(){
 
+        div.appendChild(document.getElementById("div"))
 
+    }
 
+
 
+    // 需求: 当点击删除按钮时候, 要把id = parent 的标签删除掉
 
+    function del() {
 
+        div.remove()
 
+    }
 
+
 
+</script>
 
+</html>

+ 43 - 0
src/main/java/com/sf/day33/11-DOM 的练习隔行变色.html
View File 

@@ -0,0 +1,43 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<div id="parent">
 
+    <div>第一行</div>
 
+    <div>第二行</div>
 
+    <div>第三行</div>
 
+    <div>第四行</div>
 
+    <div>第五行</div>
 
+</div>
 
+<script>
 
+    /**
 
+     * 需求:
 
+     * div
 
+     *    div
 
+     *    div
 
+     *    div
 
+     *    div
 
+     *    idv
 
+     * /div
 
+     * 要让id = parent 当中子元素为偶数的背景颜色变成红色 , 奇数的变成蓝色
 
+     *
 
+     */
 
+    // 1 获取parent 元素
 
+    var parent = document.getElementById("parent")
 
+    // 2 获取parent的所有子元素
 
+    var childs = parent.children
 
+    for(var i = 0; i<childs.length;i++){
 
+        var c = childs[i];
 
+        if(i % 2 == 0 ){
 
+            c.style.backgroundColor = "blue"
 
+        }else{
 
+            c.style.backgroundColor = "red"
 
+        }
 
+    }
 
+    // 3 判断元素如果是技术颜色就是红色如果是偶数那颜色就变成蓝色
 
+</script>
 
+</body>
 
+</html>

+ 29 - 0
src/main/java/com/sf/day33/12-DOM 当中操作属性.html
View File 

@@ -0,0 +1,29 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<div>123</div>
 
+<input id="input" abc="123" type="text" value="1">
 
+</body>
 
+<script>
 
+    // var val = document.getElementById("input").value
 
+    // console.log(val)
 
+
 
+    // 如果想要设置值
 
+    // document.getElementById("input").value = "123123"
 
+    // 这个是操作基本属性的方式
 
+    /**
 
+     * 标签中属性分成两类: 一个自定义属性一个是内置属性
 
+     * 现在value 就属于内置属性,   abc 就属于自定义数据
 
+     * 如果操作自定义属性 元素.setAttribute()    元素.getAttribute();
 
+     */
 
+    var input = document.getElementById("input")
 
+    var abcVal = input.getAttribute("abc")
 
+    console.log(abcVal)
 
+
 
+
 
+</script>
 
+</html>

+ 59 - 0
src/main/java/com/sf/day33/13.JS对象-DOM-综合实战.html
View File 

@@ -0,0 +1,59 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
+    <title>JS对象-DOM-获取元素对象</title>
 
+</head>
 
+<body>
 
+    <img id="imgId" src="img/g0.jpeg" height="360px"> <br/><br/>
 
+
 
+    <div class="clz">四福科技教育</div>
 
+    <a href="http://www.wolfcode.cn" class="clz">广州xx</a> <br/><br/>
 
+
 
+    <input  type="checkbox" name="hobby"> Java
 
+    <input type="checkbox" name="hobby"> Python
 
+
 
+    <button onclick="fun()">更换</button>
 
+    <button onclick="fun1()">哇塞</button>
 
+
 
+    <button onclick="allChecked()">全选</button>
 
+    <button onclick="unall()">反选</button>
 
+    <script>
 
+        // 1 跟换美女
 
+        function fun() {
 
+            document.getElementById("imgId").src = "img/g1.jpeg"
 
+        }
 
+        // 2 在所有 class="clz" 的标签内容后面加：很哇塞
 
+        function fun1() {
 
+            var clzs = document.getElementsByClassName("clz")
 
+            for(var i = 0;i<clzs.length ; i++){
 
+                var item = clzs[i];
 
+                item.innerHTML = item.innerHTML + "<font style='color:red'>很哇塞</font>"
 
+            }
 
+        }
 
+        // 3 点击权限吧所有复选框修改成选中状态 , 点击反选修改成反选状态
 
+        function allChecked() {
 
+           console.log(123)
 
+           var hobbys =  document.getElementsByName("hobby")
 
+            console.log(hobbys)
 
+            for (let i = 0; i < hobbys.length; i++) {
 
+                // 修改复选框属性 , checked =  true
 
+                hobbys[i].checked = true
 
+            }
 
+        }
 
+
 
+        function unall() {
 
+            console.log(123)
 
+            var hobbys =  document.getElementsByName("hobby")
 
+            console.log(hobbys)
 
+            for (let i = 0; i < hobbys.length; i++) {
 
+                // 修改复选框属性 , checked =  true
 
+                hobbys[i].checked = !hobbys[i].checked
 
+            }
 
+        }
 
+
 
+       
+    </script>
 
+</body>
 
+</html>

+ 47 - 0
src/main/java/com/sf/day33/14 JS 事件.html
View File 

@@ -0,0 +1,47 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+</head>
 
+<body>
 
+<!--<button id="btn">按钮</button>-->
 
+姓名: <input type="text" id="input"><span id="msg"></span>
 
+</body>
 
+<script>
 
+    // 获取元素.事件属性 = function 函数
 
+    // 当事件触发的时候就会执行 function 函数
 
+    // document.getElementById("btn").onclick = function () {
 
+    //     console.log("123123123")
 
+    // }
 
+
 
+    // 想要给input输入框绑定聚焦事件和失去焦点事件
 
+    // document.getElementById("input").onfocus = function () {
 
+    //     console.log("聚焦了")
 
+    // }
 
+
 
+    document.getElementById("input").onblur = function () {
 
+        // 需求: 在输入框当中去输入内容 ,
 
+        var arr = ["张三","lisi","wangwu"]
 
+        // var arr = ["张三","lisi","wangwu"]
 
+        // 判断输入框输入的内容,是否在arr 中, 如果在arr中表示用户名已经存在了,
 
+        // 获取输入框内容 , docuement.getElementById.value
 
+        var val = document.getElementById("input").value
 
+        var flag = false
 
+        arr.forEach(function (item,index) {
 
+            if(item == val){
 
+                flag = true;
 
+            }
 
+        })
 
+        // 在输入框后面显示用户名已存在红色字体
 
+        var msg = document.getElementById("msg");
 
+        if(flag){
 
+            msg.innerHTML = "<font style='color:red'>用户名已存在</font>"
 
+        }else{
 
+            msg.innerHTML = "<font style='color:greenyellow'>用户名可用</font>"
 
+        }
 
+    }
 
+
 
+
 
+</script>
 
+</html>

+ 82 - 0
src/main/java/com/sf/day33/15- JS 事件练习.html
View File 

@@ -0,0 +1,82 @@
 
+<!DOCTYPE html>
 
+<html lang="en">
 
+<head>
 
+    <meta charset="UTF-8">
 
+    <title>Title</title>
 
+    <style>
 
+        div{
 
+            width: 100px;
 
+            height: 100px;
 
+            background-color: red;
 
+        }
 
+    </style>
 
+</head>
 
+<body>
 
+<div id="div"></div>
 
+<table border="1" cellspacing="0" cellpadding="0" width="100%">
 
+    <tr>
 
+        <th>id</th>
 
+        <th>name</th>
 
+        <th>age</th>
 
+        <th>email</th>
 
+    </tr>
 
+    <tr>
 
+        <th>1</th>
 
+        <th>zhangsan</th>
 
+        <th>10</th>
 
+        <th>123@qq.com</th>
 
+    </tr>
 
+
 
+    <tr>
 
+        <th>2</th>
 
+        <th>lisi</th>
 
+        <th>20</th>
 
+        <th>12233@qq.com</th>
 
+    </tr>
 
+    <tr>
 
+        <th>3</th>
 
+        <th>wangwu</th>
 
+        <th>30</th>
 
+        <th>234@qq.com</th>
 
+    </tr>
 
+<!--    <tr>-->
 
+<!--        <th>4</th>-->
 
+<!--        <th>zhaoliu</th>-->
 
+<!--        <th>30</th>-->
 
+<!--        <th>222@qq.com</th>-->
 
+<!--    </tr>-->
 
+</table>
 
+</body>
 
+<script>
 
+    // 需求当鼠标移入的时候把颜色变成黄色 , 当鼠标移出的时候把颜色变成红色
 
+    //绑定鼠标移入事件和鼠标移出事件
 
+    // var div = document.getElementById("div")
 
+    // div.onmouseenter = function () {
 
+    //     div.style.backgroundColor = "yellow"
 
+    // }
 
+    //
 
+    // div.onmouseleave = function () {
 
+    //     div.style.backgroundColor = "red"
 
+    // }
 
+
 
+    // table 表格有4个行内容
 
+    //  id    name       age  email
 
+    //  1      zhangsan  10   123@qq.com
 
+    //  2       lisi     9    123@qq.com
 
+    // 当鼠标移动到某一行, 那这行背景颜色就变成蓝色 移出的时候颜色消失
 
+
 
+    var trs = document.getElementsByTagName("tr")
 
+    console.log(trs)
 
+    for (let i = 0; i < trs.length; i++) {
 
+        let tr = trs[i];
 
+        // 绑定鼠标移入事件
 
+        tr.onmouseenter = function () {
 
+            tr.style.backgroundColor = "blue"
 
+        }
 
+        // 鼠标移出事件
 
+        tr.onmouseleave = function () {
 
+            tr.style.backgroundColor = ""
 
+        }
 
+    }
 
+</script>
 
+</html>