B3-操作BOM和DOM

最新推荐文章于 2024-05-26 14:41:46 发布

Leona__

最新推荐文章于 2024-05-26 14:41:46 发布

阅读量153

点赞数

文章标签： html html5 javascript bom dom

本文链接：https://blog.csdn.net/Leona__/article/details/120099761

版权

window对象的常用方法

window.alert（）警示框
window.prompt（）输入框
window.confirm（）选择框
window.open（）打开一个新窗口
window.close（）关闭本窗口
计时器
window.setTimeout（～，time000）time秒后执行～函数或表达式
window.setInterval（～，time000）每隔time秒执行一次～函数或表达式
以上window方法中的window均可省略不写

1.history对象的方法

history.back（）后退
history.forward（）前进
history.go（num）前往指定页面

2.location对象的属性和方法

属性

location.href返回完整的URL
location.pathname返回路径名
当使用location方法给目标a标签增加URL时，需删除a标签内的href=“”的属性

方法

location.reload()刷新重新加载当前文档
locarion.replace()用新文档替换当前文档（不可history.back())
location.assign()加载新的文档(可使用history的方法前进后退)

3.document对象的方法

document.write()
document.getElementById()
document.getElementsByClass()
document.getElementsByName()
document.get ElementsTagName()
后面三个返回的为数组

5.事件

对象.onclick～点击对象时
对象.onmouseover～鼠标移到对象上面时
对象.onmouseout～鼠标移开对象时

6.对象.innerHTML

对象.innerHTML = “新的HTML内容”；
用来获取对象标签内的内容，重新赋值后，将在此位置替换原来内容出现在页面上。

7.对象.大属性.小属性

对象.大属性.小属性 = “新的值”；

相关实例：

示例1:轮播图

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        div{
            margin: 0px auto;
            width: 730px;
            height: 454px;
            position: relative;
            background:url(images/1.jpg) no-repeat;
        }
        ul{
            position: absolute;
            bottom: 20px;
            right: 50px;
        }
        li{
            width: 30px;
            height: 30px;
            text-align: center;
            margin: 5px;
            line-height: 30px;
            list-style: none;
            float: left;
            background-color: pink;
            color: white;
        }
    </style>
</head>
<body>
    <div id = "div1">
        <ul id ="uul">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
    </div>
</body>
</html>
<script>
    var div1 = document.getElementById("div1");
    var lilist = document.getElementsByTagName("li");
    var uul = document.getElementById("uul");

    var i = 1;
//定时器轮播
    function change(){
        for(var j = 0;j < lilist.length;j++){
            lilist[j].style.backgroundColor = "pink"
        }
        lilist[i-1].style.backgroundColor = "black";
        div1.style.backgroundImage = "url(images/" + i + ".jpg)"
        i++;
        if(i > 4){
            i = 1;
        }
    }
    var tiao = setInterval("change()",1000);

//悬停切换背景  
    for(var k = 0;k < lilist.length;k++){
        //使onmouseover后的函数可以使用“this.k"调用当前k的值
        lilist[k].k = k;
        lilist[k].onmouseover = function(){
            tiao = clearInterval(tiao);
            for(var j = 0;j < lilist.length;j++){
                lilist[j].style.backgroundColor = "pink"
            }
            lilist[this.k].style.backgroundColor = "black";
            div1.style.backgroundImage = "url(images/" + (this.k+1) + ".jpg)";
        }
    }
    
//悬停图片轮播停止，离开继续轮播
    div1.onmouseover = function(){
            clearInterval(tiao);
    }
    div1.onmouseout = function(){
            tiao = setInterval("change()",1000);
    }
    
    
    
</script>

样式如下：
自动轮播；
鼠标悬停图片轮播停止；
鼠标悬停标识，轮播停止并随悬停位置改变标识背景颜色和图片。
在这里插入图片描述
示例2:自动结算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        .d1{
            width: 810px;
            height: 440px;
            margin: 50px auto;
            background: url(../作业1：访问当当购物车页面节点/images/shoppingBg.jpg) no-repeat;
            background-position:0px 100px;
            position: relative;
        }
        .d2{
            width: 250px;
            height: 50px;
            float: left;
        }
        #d3{
            float: right;
            width: 40px;
            height: 20px;
            font-size: 12px;
            line-height: 20px;
            color: white;
            text-align:center;
            border-radius: 5px;
            cursor: pointer;
            background-color: rgb(255, 0, 0);
        }
        ul{
            list-style: none;
            width: 440px;
            height: 50px;
            font-size: 12px;
        }
        .ul1{
            position: absolute;
            top:230px;
            right: 10px;
        }
        .ul2{
            position: absolute;
            top:350px;
            right: 10px;
        }
        ul li{
            text-align: center;
            width: 70px;
            height: 25px;
            line-height: 25px;
            float: left;
            margin: 0px 0px 0px 30px;
        }
        li div{
            float: left;
        }
        .count{
            width: 100px;
            height: 25px;
            text-align: center;
            border: 1px solid rgb(161, 161, 161);

        }
        .cut{
            border-right: 1px solid rgb(161, 161, 161);
            width: 25px;
            height: 25px;
            cursor: pointer;
            background-color: rgb(239, 239, 239);
        }
        .num{
            width: 48px;
            height: 25px;
            border-right: 1px solid rgb(161, 161, 161);
        }
        .up{
            width: 25px;
            height: 25px;
            cursor: pointer;
            background-color: rgb(239, 239, 239);
        }
        ul a{
            color: #000;
            text-decoration: none;
        }
        ul>div{
            margin-right: 40px;
            clear: left;
            float: right;
        }
        .total{
            position: absolute;
            top: 455px;
            right: 150px;
            color: rgb(255, 0, 0);
            font-size: 13px;
        }
        #last{
            cursor: pointer;
            width: 60px;
            height: 30px;
            text-align: center;
            line-height: 30px;
            font-size: 12px;
            position: absolute;
            top: 455px;
            right: 20px;
            color: white;
            background-color:  rgb(255, 0, 0);
        }
        #list{
            margin: 0px auto;
            width: 810px;
            height: 100px;
            display: none;
            line-height: 23px;
            font-size: 14px;
        }
    </style>
</head>
<body>
    <div class="d1">
        <div class="d2">
            <img src="../作业1：访问当当购物车页面节点/images/dd_logo.jpg" alt="">
        </div>
        <div id="d3">
            关闭
        </div>
        <ul class="ul1">
            <li>￥ <span class ="pri">21.90</span> </li>
            <li class="count">
                <div class="cut" onclick="cut1(0)">-</div>
                <div class="num">0</div>
                <div class="up" onclick="up1(0)">+</div>
            </li>
            <li>￥<span class="sum">00.00</span></li>
            <li><a href=""> 移入收藏夹</a></li>
            <div><a href=""> 删除</a></div>
        </ul>

        <ul class="ul2">
            <li>￥ <span class ="pri">24.00</span> </li>
            <li class="count">
                <div class="cut" onclick="cut1(1)">-</div>
                <div class="num">0</div>
                <div class="up" onclick="up1(1)">+</div>
            </li>
            <li>￥<span class="sum">00.00</span></li>
            <li><a href=""> 移入收藏夹</a></li>
            <div><a href=""> 删除</a></div>
        </ul>

        <div class="total">￥<span id="itotal">00.00</span></div>

        <div id="last">结 算</div>
    </div>
    <div id="list">
        <p>本次购买的商品信息如下：</p>
        <p>白岩松：白说：￥<span id="list1"></span></p>
        <p>岛上书店：￥<span id="list2"></span></p>
        <p>商品共计：￥<span id="list3"></span></p>
    </div>
</body>
</html>
<script>

    var divcl = document.getElementById("d3");
    divcl.onclick = function(){
        window.close();
    }
    var up = document.getElementsByClassName("up");
    var cut = document.getElementsByClassName("cut");
    var num = document.getElementsByClassName("num");
    var pri = document.getElementsByClassName("pri");
    var sum = document.getElementsByClassName("sum");
    var total = document.getElementById("itotal");
    var last =  document.getElementById("last");
    var list =  document.getElementById("list");
    var list1 =  document.getElementById("list1");
    var list2 =  document.getElementById("list2");
    var list3 =  document.getElementById("list3");
    var tot = [0,0];

    function up1(i){
        num[i].innerHTML++;
        var ssum = num[i].innerHTML * pri[i].innerHTML;
        ssum = ssum.toFixed(2);//保留两位小数
        sum[i].innerHTML = ssum;
        tot[i] = ssum;
        var jia = 0;
        for(var j in tot){
            jia += parseFloat(tot[j]) 
        }
        total.innerHTML = jia.toFixed(2);
        list1.innerHTML = tot[0];
        list2.innerHTML = tot[1];
        list3.innerHTML = jia.toFixed(2);
    }
    function cut1(k){
        num[k].innerHTML--;
        var ccut = num[k].innerHTML * pri[k].innerHTML;
        ccut = ccut.toFixed(2);//保留两位小数
        sum[k].innerHTML = ccut;
        tot[k] = ccut;
        var jia = 0;
        for(var j in tot){
            jia += parseFloat(tot[j]) 
        }
        total.innerHTML = jia.toFixed(2);
        total.innerHTML = jia.toFixed(2);
        list1.innerHTML = tot[0];
        list2.innerHTML = tot[1];
        list3.innerHTML = jia.toFixed(2);
    }
    last.onclick = function(){
        list.style.display = "block";
    }
</script>

样式如下：
在这里插入图片描述
示例3:点击网页链接跳转页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            margin: 0px;
            padding: 0px;
        }
        td{
            border: 1px solid black;
            text-align: center;
        }
    </style>
</head>
<body>
    <table>
        <tr>
            <td><img src="../作业3：查看一年四季变化/images/1.jpg"></td>
            <td><img src="../作业3：查看一年四季变化/images/2.jpg"></td>
        </tr>
        <tr>
            <td><a>春</a></td>
            <td><a>夏</a></td>
        </tr>
        <tr>
            <td><img src="../作业3：查看一年四季变化/images/3.jpg"></td>
            <td><img src="../作业3：查看一年四季变化/images/4.jpg"></td>
        </tr>
        <tr>
            <td><a>秋</a></td>
            <td><a>冬</a></td>
        </tr>
        <tr>
            <td colspan="2"><a>刷新页面</a></td>
        </tr>
    </table>
    <input type="text" name="" id="">
</body>
</html>
<script>

    var list = document.getElementsByTagName("a")
    for(var i = 0;i < list.length-1;i++){
        list[i].i = i;
        list[i].onclick = function(){
            location.href = ("test3-" + (this.i + 1) + ".html");
        }
    }
    list[list.length-1].onclick = function(){
        location.reload();
    }
</script>

样式如下：
在这里插入图片描述
跳转的目标页面：

<!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>我是春天</h1>
    <img src="../作业3：查看一年四季变化/images/spring.jpg">
    <p><a>夏天</a></p>
    <p><a>秋天</a></p>
    <p><a>冬天</a></p>
    <p><a>后退</a></p>
    <p><a>前进</a></p>
</body>
</html>
<script>
    var list = document.getElementsByTagName("a")
    for(var i = 0;i < list.length-2;i++){
        list[i].i = i;
        list[i].onclick = function(){
            location.href = ("test3-" + (this.i + 2) + ".html");
        }
    }
    list[list.length-2].onclick = function(){
        history.back();
    }
    list[list.length-1].onclick = function(){
        history.forward();
    }
</script>

样式如下：
在这里插入图片描述

今天的分享就是这些啦，欢迎正在学习web的伙伴们“挑毛病”“提意见”，当然了也欢迎各种表扬奥～（比心，比心）

Leona__

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
B3-操作BOM和DOM

window对象的常用方法window.alert（）警示框window.prompt（）输入框window.confirm（）选择框window.open（）打开一个新窗口window.close（）关闭本窗口计时器window.setTimeout（～，time000）time秒后执行～函数或表达式window.setInterval（～，time000）每隔time秒执行一次～函数或表达式以上window方法中的window均可省略不写1.history对象的方法history.
复制链接

扫一扫