2021/9/10

最新推荐文章于 2024-09-14 18:46:05 发布

m0_55786512

最新推荐文章于 2024-09-14 18:46:05 发布

阅读量84

点赞数

分类专栏：学习小结文章标签： java javascript html5

本文链接：https://blog.csdn.net/m0_55786512/article/details/120230138

版权

学习小结专栏收录该内容

39 篇文章 0 订阅

订阅专栏

#8：30-9：00 签到打卡

#9：30-12：00 观看javaweb视频

#14：00-18：00 写qq项目

1.Window对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>window对象</title>
</head>

<body>
<input type="button" name="dakai" value="打开窗口">
<input type="button" name="close" value="关闭窗口">
<script>
    /*
    1.window对象不需要创建可直接使用
    2.windowd可以省略
    */
    /*警告框alert*/
    window.alert("你好");
    alert("你好");
    /*两个相同*/

    /*确定框confirm*/
    var a=confirm("你确定退出吗");
    /*会出现确定和取消两个按钮，点确定返true，选取消返false*/
    if(a){
        alert("退出了");
    }else{
        alert("退出取消");
    }

    /*输入框confirm*/
    var b=prompt("请输入用户名");
    /*会有个输入文本框，返回输入的文本*/
    document.write(b);
    var newwindow;
    /*打开一个新窗口*/
    var opens=document.getElementsByName("dakai")[0];
    opens.onclick=function () {
        newwindow=open();
    }

    /*关闭这个窗口*/
    var opens=document.getElementsByName("close")[0];
    opens.onclick=function () {
        newwindow.close();
    }

    /*定时器*/
    var id=setTimeout("alert('爆照了!')",3000);/*三秒爆炸*/
    setTimeout(fun,3000);/*第二种*/
    function fun() {
        alert("爆炸了！")
    }

    /*循环定时器*/
    var id2=setInterval(fun,3000);

    /*取消定时器*/
    clearTimeout(id);/*取消定时器*/
    clearInterval(id2)/*取消循环定时器*/
</script>
</body>
</html>

2.Location对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Location对象</title>
</head>
<body>
<input type="button" id="flash" value="刷新">
<input type="button" id="go" value="跳转到百度">
<script>
    /*location为window的属性*/
    window.location;/*window可省略*/

    /*刷新当前页面*/
    var a=document.getElementById("flash");
    a.onclick=function () {
        location.reload();/*刷新页面*/
    }

    /*获取当前的地址href*/
    var s=location.href;
/*    document.write(s);*/

    var b=document.getElementById("go");
    b.onclick=function () {
        /*去百度*/
        location.href="https://www.baidu.com/";
    }
    /*修改href为跳转地址网页*/

</script>
</body>
</html>

3.History对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>History对象</title>
</head>
<body>
<input type="button" id="his" value="历史记录数量">
<input type="button" id="back" value="后退">
<input type="button" id="forward" value="前进">
<br>
<script>
    /*History对象为window的属性*/
    window.history;

    var a=document.getElementById("his");
    a.onclick=function () {
        document.write(history.length);
        /*返回当前页面的数量*/
    }

    var b=document.getElementById("back");
    b.onclick=function () {
        history.back();
        //history.go(-1);/*跟上面相同*/
        /*地址后退*/
    }
    var c=document.getElementById("forward");
    c.onclick=function () {
        history.forward();
        //history.go(1);/*跟上面相同*/
        /*前进按钮*/
    }

    history.go(1);/*集成了前进后退，正数表示前进n次，负数表示后退n次*/
</script>
</body>
</html>

4.获取Element方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>获取Element方法</title>
</head>
<body>
<div id="div1">div1</div>
<div id="div2">div2</div>
<div id="div3">div3</div>
<div class="cl1">div4</div>
<div class="cl1" >div5</div>
<input type="text" name="text">
<script>
    /*根据id获取元素对象*/
    var a=document.getElementById("div1");

    /*根据元素名称获取元素对象组*/
    var b=document.getElementsByTagName("div");
    document.write(b.length+"<br>");/*返5*/

    /*根据class属性获取元素对象组*/
    var c=document.getElementsByClassName("cl1");
    document.write(c.length+"<br>");/*返2*/

    /*根据name属性获取元素对象*/
    var d=document.getElementsByName("text");
    document.write(d.values()+"<br>");
</script>
</body>
</html>