版权声明:本文为博主原创文章,转载请注明出处 https://blog.csdn.net/qq_37022150/article/details/83587128
第一步: 获取浏览器窗口的宽度与高度
涉及到不同浏览器,所以我们有以下的方法,可以适用不同的浏览器
对于Internet Explorer、Chrome、Firefox、Opera 以及 Safari:
window.innerHeight - 浏览器窗口的内部高度(包括滚动条)
window.innerWidth - 浏览器窗口的内部宽度(包括滚动条)
对于 Internet Explorer 8、7、6、5:
document.documentElement.clientHeight
document.documentElement.clientWidth
或者
document.body.clientHeight
document.body.clientWidth
实例:
var width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth
var height = window.innerHeight || document.documentElement.clientHeight || document.body.clientHeight
Window 的其他方法
window.opne();
window.close();
window.moveto();
window.resizeTo();
第二步: 获取屏幕可用的宽度与高度
window.screen.availWidth[或者 screen.availWidth]
window.screen.availHeight[或者screen.availHeight]
第三步: 获取当前Location 当前位置
同第二步一样,前面也不可加 window
location.href 获取当前页面的url
location.protocol 获取当前的协议
location.hostname 获取主机名
location.port 获取当前端口
location.pathname 获取路径名
location.assign 打开新窗口
实例[通过类名获取到所有的集合,然后给其第一个赋值]
<!DOCTYPE html>
<p class = "p2" />
var pc = document.getElementsByClassName("p2");
pc[0].innerHTML = location.href;
第四步: 获取浏览历史
history.back返回上一级
history.forward 进行到下一级
第五步: 浏览器的信息
navigator.appName 浏览器名称
navigator.appCodeName 浏览器代号
navigator.cookieEnabled Cookie是否可用
navigator.platform 平台
navigator.userAgent 用户代理
navigator.systemLanguage 用户代理语言
第六步: 警示框,确认框,提示框
alert() 警示框
confirm() 确认框
prompt() 提示框
实例
<script>
function mf ()
{
// 通用警示框测试
alert("不要走,客观");
// 确认框测试
var message;
var result = confirm ("请确认信息");
if (result == true) {
message = "你按下了确认[按钮]";
} else {
message = "你按下了取消[按钮]";
}
document.getElementById("p1").innerHTML = message;
// 提示框测试
var message;
var name = prompt("请输入你的名字", "Jack");
if (name != null && name !="") {
message = "欢迎" + name + "的到来";
}
document.getElementById("p1").innerHTML = message;
}
</script>
第七步: 浏览器计时事件
setInterval(第一个参数是函数,第二参数是时间)
考虑用户体验,我们直接展示一个页面时钟
实例1:在界面上显示一个时钟开始
var dd = setInterval(function(){mf()},1000);
function mf ()
{
var d = new Date();
var t = d.toLocaleTimeString();
document.getElementById("p1").innerHTML = t;
}
实例2:在界面上显示一个页面时钟,并且进行停止
在实例1的基础上
function celarIntervalDemo ()
{
clearInterval(dd);
}
setTimeOut
多长时间开始执行
clearTimeOut
停止
用法类似与setInterval 与clearInterval
第八步: Cookie
set/get/check
check充分融合了set与get方法
代码展示
function setCookie(cname,cvalue,exdays){
var d = new Date();
d.setTime(d.getTime()+(exdays*24*60*60*1000));
var expires = "expires="+d.toGMTString();
document.cookie = cname+"="+cvalue+"; "+expires;
}
function getCookie(cname){
var name = cname + "=";
var ca = document.cookie.split(';');
for(var i=0; i<ca.length; i++) {
var c = ca[i].trim();
if (c.indexOf(name)==0) { return c.substring(name.length,c.length); }
}
return "";
}
function checkCookie(){
var user=getCookie("username");
if (user!=""){
alert("欢迎 " + user + " 再次访问");
}
else {
user = prompt("请输入你的名字:","");
if (user!="" && user!=null){
setCookie("username",user,30);
}
}
}