Java基础入门day36

zpz2001

已于 2024-04-19 15:37:05 修改

阅读量879

点赞数 6

文章标签： java 开发语言

于 2024-04-19 14:52:38 首次发布

本文链接：https://blog.csdn.net/zpz2001/article/details/137965024

版权

day36

js

dom控制css变化

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <p>this is p1</p>
 <p id="p2">this is p2</p>
 <p id="p3">this is p3</p>

 <script>
     document.getElementById("p2").innerHTML="<font color='red'>this is p2 updated</font>";
     document.getElementById("p2").style.fontFamily = "楷体";
     document.getElementById("p2").style.fontSize = "30px";
     document.getElementById("p3").innerText="<font color='red'>this is p3 updated</font>";
 </script>
</body>

</html>

使用dom可以对于元素的css进行设置

dom事件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h1 id="h1">this is h1</h1>
 <button οnclick="document.getElementById('h1').innerHTML='<font color=red>this is h1 updated</font>'">click me</button>

 <script>
 </script>
</body>

</html>

使用dom可以对于元素的事件做出反应

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h1 οnclick="this.innerHTML='<font color=red>this is h1 updated</font>'">this is h1</h1>
 <script>
 </script>
</body>

</html>

dom使得JavaScript有能力对于html事件做出反应

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Document</title>
</head>
<body>
 <h1 οnclick="changeText(this)">this is h1</h1>
 <script>
     function changeText(h){
         h.innerHTML="<font color=red>this is h1 updated</font>";
     }
 </script>

</body>

</html>

使用dom事件处理器调用一个函数

EventListener

addEventListener函数可以让用户在不同控件上添加事件
语法
element.addEventListener(event, function, useCapture);
参数名描述
event 事件的类型
function 事件触发后调用的函数
useCapture 用于描述事件是冒泡还是捕获

特点：

addEventListener函数用于向指定的元素添加事件

添加的事件句柄不会覆盖已存在的事件句柄

可以向一个元素添加多个事件

可以向同一个元素添加多个相同事件

可以向任何dom对象添加事件监听，不一定是html元素，甚至是window对象

addEventListener可以更简单地控制事件的冒泡与捕获

使用addEventListener函数，可以是的JavaScript能够将事件从html标记中分离出来，可读性更强
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button id="btn">click me</button>
    <script>

        document.getElementById("btn").addEventListener("click", btnAlert);
        document.getElementById("btn").addEventListener("click", displayDate);
        document.getElementById("btn").addEventListener("mouseover", changeColor);
        document.getElementById("btn").addEventListener("mouseout", changeColor02);

        function displayDate(){
            document.getElementById("btn").innerHTML=Date();
        }

        function btnAlert(){
            alert("i am clicked.")
        }

        function changeColor(){
            document.getElementById("btn").style.backgroundColor = "red";
        }

        function changeColor02(){
            document.getElementById("btn").style.backgroundColor = "green";
        }
    </script>
    
</body>

</html>
可以向元素添加多个事件，click，mouseover， mouseout

也可以同时想元素添加多个click事件

各自的事件互相不冲突

参数名	描述
event	事件的类型
function	事件触发后调用的函数
useCapture	用于描述事件是冒泡还是捕获

操作元素

如需向html中添加元素，dom也可以完成

document.createElement();

document.appendChild();

js中的定时任务

定义定时器

setInterval('调用的函数名'，间隔时间)；每间隔指定的间隔时间后自动执行函数

setTimeout('调用的函数名'，间隔时间)；在固定的时间之后执行异常调用函数

关闭定时器

clearInterval(定时器名称);

clearTimeout(定时器名称);

小综合案例-点名系统

点名系统

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>count</title>
    <script src="js/count.js" ></script>
    <link href="css/count.css" rel="stylesheet" />
</head>
<body οnlοad="create()">
    <input type="button" id="btnStart" value="start" οnclick="startCount()" /> 
    <input type="button" id="btnStop" value="stop" οnclick="stopCount()"  /> <p />
    <div id="par">

    </div>
</body>
</html>

html页面，放了两个按钮，外加一个空的div

.stu{
    border: 1px solid green;
    width: 200px;
    height: 200px;
    float: left;
    margin: 10px;
    text-align: center;
    line-height: 200px;
}

外部的css文件用来设置每一个学生div的样式

var names = [
    "王可明",    
    "左佳慧",    
    "靳钰萧",    
    "宋治刚",    
    "李伟" ,   
    "韩温昱",    
    "李博森",    
    "胡嘉豪",    
    "陈晓玲",    
    "冯煜" ,   
    "赵雪儿",    
    "刘西阳",    
    "呼唤" ,   
    "王鹏展",    
    "李晨星",    
    "周晓宇",    
    "唐润曈",    
    "陈世钰",    
    "付梦茹",    
    "何俊超",    
    "袁奕鸿",    
    "张亚绒",    
    "樊琳杰",    
    "崔雅静",    
    "刘彩霞",    
    "刘芙蓉",    
    "何佳豪",    
    "赵博" ,   
    "田秘" ,   
    "张恒超",    
    "何云飞"
];

var index = -1;
var select;
var flag;

function create(){
    var par = document.getElementById("par");

    for(var i = 0; i < names.length; i++){
        var stu = document.createElement("div");

        stu.innerHTML = names[i];
        stu.className = "stu";
        stu.style.backgroundColor = "pink";
        stu.id = "id" + i;

        par.appendChild(stu);
    }
}

function startCount(){
    document.getElementById("btnStart").disabled = true;
    flag = setInterval(myStart, 100);
}

function myStart(){
    if(index != -1){
        select.style.backgroundColor = "pink";
    }
    //alert(123);
    // console.log(new Date());

    index = parseInt((Math.random() * 99999) % names.length);

    // console.log(index);
    select = document.getElementById("id" + index);

    select.style.backgroundColor = "green";
}

function stopCount(){
    clearInterval(flag);
    document.getElementById("btnStart").disabled = false;

    if(index != -1){
        alert("此次的幸运儿是" + names[index]);
    }
}

外部的js文件，用来处理各种事件

浏览器的bom模型

概念：

bom： browser object model：浏览器对象模型，使得JavaScript可以与浏览器”对话“

window

所有浏览器都支持window对象，表示浏览器窗口

所有的js对象、函数以及变量均自动成为window对象的成员

全局变量都是window对象的属性，比如alert，document

status

浏览器的状态栏

用来显示一些状态信息

history

back是后退一次

forward是前进一次

go（num），num为正数，则前进num次，如果为负数，后退num次

screen

window.screen.availWidth

window.screen.availHeight

location

可以获取当前页的url地址，并把浏览器重定向到新的页面

location.hostname:主机名

location.pathname: 路径或者文件名

location.port: 端口

location.protocal,协议，http，https

location.href:返回当前页的url
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    hello
    <a href="js10.html">js10</a>
    <button οnclick="history.back()">back</button>
    <button οnclick="history.forward()">forward</button>
    <button οnclick="history.go(-1)">指定地址</button>
    <script>

    </script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var h = window.screen.availHeight;
        var w = window.screen.availWidth;

        alert(w + ", " + h);
    </script>
</body>
</html>
screen的availHeight和availWidth可以分别拿到屏幕的可用尺寸
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        var h = window.location.hostname;
        var href = window.location.href;
        alert(href)
        window.location.href = "http://www.baidu.com";
    </script>
</body>
</html>
location定位：可以获取主机名，端口，链接等信息