海阔天空

手机扫码查看

2020javaweb教程之JavaScript的BOM1

1.window对象

window尺寸

innerWidth、innerHeight 浏览器窗口的内部宽高，不包括滚动条，菜单栏，工具栏。

//获取浏览器宽度
var w=window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
//获取浏览器高度
var h=window.innerHeight||document.documentElement.clientHeight||document.body.clientHeight;

屏幕的尺寸

//屏幕的宽度和高度
document.write(screen.availWidth+”*”+screen.availHeight);

window方法

var r;
//打开新窗口
function opens(){
  r=window.open("http://127.0.0.2","舒大少博客");
}
//关闭打开的新窗口
function closes(){
  r.close();
}

location

location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面

方法：

console.log("当前页面的路径和文件名"+location.pathname);
console.log("主机名"+location.hostname);
console.log("当前页面的URL"+location.href);
console.log("web协议"+location.protocol);

//location.assign() 方法加载新的文档。
location.assign(“http://127.0.0.2”);

history

该对象包含浏览器的历史，可以不使用window前缀

//浏览器前进
function gos(){
  history.forward();
}
//浏览器后退
function backs(){
  history.back();
}

Date对象

var date=new Date();
//获取年份
var year=date.getFullYear();
//获取月份(0~11)
var month=date.getMonth()+1;
//获取日期
var day=date.getDate();
//获取星期
var week=date.getDay();
//获取小时
var hours=date.getHours();
//获取分钟
var min=date.getMinutes();
//获取秒数
var m=date.getSeconds();
document.write(year+"/"+month+"/"+day+"星期"+week+"  "+hours+":"+min+":"+m)

setInterval() 间歇调用

间隔指定的毫秒数不停地执行指定的代码

clearInterval() 清除间歇调用

该方法用于停止 setInterval() 方法执行的函数代码

function times(){
  var t=document.getElementById("time");
  var date=new Date();
  //获取年份
  var year=date.getFullYear();
  //获取月份(0~11)
  var month=date.getMonth()+1;
  //获取日期
  var day=date.getDate();
  //获取星期
  var week=date.getDay();
  //获取小时
  var hours=date.getHours();
  //获取分钟
  var min=date.getMinutes();
  //获取秒数
  var m=date.getSeconds();
  var w="";
  //判断周期
  switch(week){
    case 1:
      w="一";
      break;
    case 2:
      w="二";
      break;
    case 3:
      w="三";
      break;
    case 4:
      w="四";
      break;
    case 5:
      w="五";
      break;
    case 6:
      w="六";
      break;
    default:
      w="日";
      break;
}
    //打印年月日和星期以及时分秒
    t.innerHTML=year+"/"+buling(month)+"/"+buling(day)+"星期"+w+"  "
    +buling(hours)+":"+buling(min)+":"+buling(m);
}
//对当前数值判断，小于10则补0
function buling(z){
    if(z<10){
        return z="0"+z;
    }
    else{
        return z;
    }
}
var r;
//开启计时
function starts(){
    r=setInterval(function(){times()},1000);
}
//停止计时
function stops(){
    clearInterval(r);
}

 

setTimeout 超时调用

延迟执行指定的函数，只能执行一次

语法：setTimeout(code,millisec)
参数：
1.code：要调用的函数或要执行的js代码串
2.millisec：在执行代码前需等待的毫秒数

说明：setTimeout()只执行code一次，如果多次调用，可以让code自身再次调用setTimeout()

var r;
function starts(){		
  r=setTimeout(function(){alert('只执行一次')},1000);
}
function stops(){
  clearTimeout(r);
}