BOM操作

最新推荐文章于 2024-09-25 10:59:43 发布

春雨燎原

最新推荐文章于 2024-09-25 10:59:43 发布

阅读量118

点赞数

分类专栏：前端文章标签： java 前端 javascript

本文链接：https://blog.csdn.net/qq_66013742/article/details/133323465

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

一、window对象

1.history

概述：history主要讲回退，前进和刷新功能的按钮的应用

相对使用较少，往往刷新一直可用，回退和前进按钮，必须要有超链接跳转才能使用。

<a href="02_history2.html">跳到最美页面</a><br />
<!-- back后退    forward前进  reload刷新   -->
<input type="button" onclick="history.back()" value="回退" />
<input type="button" onclick="history.forward()" value="前进" />
<input type="button" onclick="location.reload()" value="刷新" />

<a href="01_history1.html">欣赏完最美页面，重新回到首页</a><br />
<!-- history.go(整数) 1：前进  -1 后退    0 刷新 -->
<input type="button" onclick="history.go(-1)" value="回退" /><br />
<input type="button" onclick="history.go(1)" value="前进" /><br />
<input type="button" onclick="history.go(0)" value="刷新" /><br />

2.navigator

用于显示浏览器访问的相关资源信息

<div id="example"></div>
<script>
    var txt = "<p>浏览器代号: " + navigator.appCodeName + "</p>";
    txt+= "<p>浏览器名称: " + navigator.appName + "</p>";
    txt+= "<p>浏览器版本: " + navigator.appVersion + "</p>";
    txt+= "<p>启用Cookies: " + navigator.cookieEnabled + "</p>";
    txt+= "<p>硬件平台: " + navigator.platform + "</p>";
    txt+= "<p>用户代理: " + navigator.userAgent + "</p>";
    txt+= "<p>用户代理语言: " + navigator.systemLanguage + "</p>";
    document.getElementById("example").innerHTML=txt;
</script>

二、定时器

1.一次性定时器

<input type="button" value="清除定时器" onclick="myclose()" />
<script>
    /* setTimeout：一次性定时器
			   参数1：函数体，当时间到了则触发函数体   参数2：间隔时间  单位：毫秒
			   clearTimeout：清除定时器
			 * */
    var timeId = window.setTimeout(function(){
        alert("一次性定时炸弹引爆~");
    },3000);

    function myclose(){
        clearTimeout(timeId);  //清除指定定时器
    }
</script>

2.循环定时器

循环定时器的基本使用，设置定时器和清除定时器。比一次性定时器更常用

<input type="button" value="清除定时器" onclick="myclose()" />
<script>
    var timeId = setInterval(function(){  //设置定时器
        alert("循环定时器~~");
    },3000);

    function myclose(){
        clearInterval(timeId);  //清除定时器
    }
</script>

3.定时页面跳转

<!-- 案例1：实现页面的倒数自动跳转 
分析：通过定时器每隔一秒改变标签内容；倒数到1，则跳转页面即可
-->
<h1 id="aa">3</h1>
<script>
    var timeId = setInterval(function(){
        var h1 = document.getElementById("aa");
        var index = h1.innerHTML;
        if(index>1){  //大于1，则--，再赋值给h1
            index--;
            h1.innerHTML = index;
        }else{ 
            //清除定时器
            clearInterval(timeId);
            //跳转
            location.href="http://www.baidu.com";
        }
    },1000);
</script>

4.时钟设置

<!-- 做一个时钟的效果  13:22:23
分析：获取Date值，然后每隔1秒跳一次即可
-->
<h1 id="aa"></h1>
<script>
    var h1 = document.getElementById("aa");
    setInterval(function(){
        var date = new Date();
        var hour = date.getHours(); //获取时
        hour = hour<10?"0"+hour:hour;  //小于10，则前缀+0
        var min  = date.getMinutes();  //获取分
        min = min<10?"0"+min:min;
        var sec  = date.getSeconds();  //获取秒
        sec = sec<10?"0"+sec:sec;
        var sum = hour+":"+min+":"+sec;
        h1.innerHTML = sum;
    },1000);
</script>

5.定时切换图片

<!-- 案例：实现图片的定时切换 
分析：给定数组存图片路径；在定时器中改变数组下标
-->
<img src="../img/002.png" id="img" />
<script>
    var arr =["../img/002.png","../img/003.png","../img/004.png","../img/005.png"]; 
    var img = document.getElementById("img");
    var index = 0;  //下标标记
    setInterval(function(){
        index++;
        if(index==arr.length){
            index = 0;
        }
        img.src=arr[index];
    },1000);
</script>

三、Cookie应用

概述：以键值对方式存储在客户端的文件中；格式：key=value；key2=value2...

功能：设置Cookie；获取Cookie；清除Cookie

好处：操作简单，在web开发中可减轻服务器压力

应用场景：记录登录账户，浏览记录，购物车信息，换肤功能等

弊端：容易被篡改数据；数据安全性低；可能会被禁用cookie；不能跨域访问；不能跨浏览器

1.基本应用

<input type="button" value="设置Cookie" onclick="setCook()" />
<input type="button" value="获取Cookie" onclick="getCook()" />
<input type="button" value="清除Cookie" onclick="clearCook()" />

<script>
    function setCook(){
        //document.cookie = "username=zs";  //设置cookie

        //cookie有效期设置：expires=时间：固定写法，代表有效期
        var date = new Date();  //获取日期对象
        //1000*60*60*24： 一天有效期
        date.setTime(date.getTime()+1000*60*60*24); //当前时间+有效期；单位：毫秒
        document.cookie = "username=zs;expires="+date.toGMTString();//toGMTString转字符串
        alert("设置Cookie成功~");
    }
    function getCook(){
        alert(document.cookie);  //获取cookie
    }
    function clearCook(){
        var date = new Date();  //获取日期对象  过了当前时间即过期
        document.cookie = "username=666;expires="+date.toGMTString();//toGMTString转字符串
        alert("清除Cookie成功~");
    }
</script>

2.换肤功能

<!--  换肤功能：给定两个按钮，点击”变红“则背景变红；点击”变绿“则背景变绿
cookie应用：记录最后一次变的颜色
分析：设置cookie-点击触发时        获取cookie-onload
-->
<input type="button" value="变红" onclick="setCookie('red',1)" />
<input type="button" value="变绿" onclick="setCookie('green',1)"/>

<script>
    onload=function(){
        //获取cookie
        var cookie = document.cookie;  //color=red;expires。。
        debugger;
        var str = cookie.split(";")[0]; //color=red
        var key = str.split("=")[0];  //color
        var value = str.split("=")[1];  //red
        if(key=="color"){
            var body = document.getElementsByTagName("body")[0];
            body.style.backgroundColor=value;
        }
    }
    function setCookie(color,hour){ //复用的方法实现
        var body = document.getElementsByTagName("body")[0];
        body.style.backgroundColor=color;

        //设置cookie
        var date = new Date();
        date.setTime(date.getTime()+1000*60*60*hour);
        document.cookie="color="+color+";expires="+date.toGMTString();
    }
</script>

四、创建对象

//方式1：new Object方式
var st = new Object();
st.name = "zsf";
st.age  = 30;
document.write(st.name+"--"+st.age+"<br />");

//方式2：new 构造器传参
var student = new Student("fengjie",25);

function Student(name,age){ //类似java的构造方法
this.name=name; //将值传给对象的属性
this.age =age;
}
document.write(student.name+"--"+student.age+"<br />");