前端入门到熟悉day21

01在可视区域范围内拖放

<script>

window.onload=function(){

var oDiv=document.getElementById('div1');

 

var disX=0;

var disY=0;

 

oDiv.onmousedown=function(ev){

var oEvent=ev||event;

 

//每次确定div的具体位置 坐标

disX=oEvent.clientX-oDiv.offsetLeft;

disY=oEvent.clientY-oDiv.offsetTop;

 

document.onmousemove=function(ev){

var oEvent=ev||event;

var l=oEvent.clientX-disX;

var t=oEvent.clientY-disY;

 

//水平方向

if(l<0){

l=0;

}else if(l>document.documentElement.clientWidth-oDiv.offsetWidth){

l=document.documentElement.clientWidth-oDiv.offsetWidth;

}

 

//垂直方向上

if(t<0){

t=0;

}else if(t>document.documentElement.clientHeight-oDiv.offsetHeight){

t=document.documentElement.clientHeight-oDiv.offsetHeight

}

 

oDiv.style.left=l+'px';

oDiv.style.top=t+'px';

}

document.onmouseup=function(){

document.onmousemove=null;

document.onmouseup=null;

}

}

}

</script>

 

02open

open() 方法打开一个输出流来收集 document.write() 或 document.writeln() 方法输出的内容。

调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后，必须记住用 document.close() 方法关闭文档，并迫使其内容显示出来。

注意：如果目标文件已经存在，它将被清除。如果这个方法没有参数，会显示一个新窗口(about:blank)。

<script>

window.onload=function(){

var oBtn=document.getElementById('btn1');

oBtn.onclick=function(){

window.open('https://www.baidu.com/');

}

}

</script>

 

03close

close() 方法用于关闭浏览器窗口。

<input type="button" value="close" onclick="window.close();">

<input type="button" value="返回" onclick="goBack()">

<!-- FF里面不能关闭一个用户打开的窗口 只能关闭由这个open打开的窗口 -->

<!-- geogle 可以关闭由open打开的窗口的 无提示-->

<!-- ie 有提示 关闭一个用户打开的窗口 -->

 

<script>

function goBack() {

window.history.back(); //back() 就是返回上一页 forword() 去下一页

}

</script>

 

 

04open-close

<input type="button" value="open" onclick="window.open('03close.html','_self')">

<input type="button" value="前进" onclick="forword()">

<script>

function forword() {

history.forward() //back() 就是返回上一页 forword() 去下一页

}

</script>

 

05运行

<script>

window.onload = function () {

var oTxt = document.getElementById('txt1');

var oBtn = document.getElementById('btn1');

oBtn.onclick=function(){

var oNewwin=window.open('about:blank','_blank') //about:blank 创建一个空白的页面 _blank/self 是否在本页打开或者在新窗口打开

oNewwin.document.write(oTxt.value); //先会清空页面上所有的东西 然后再写入我方法里面的东西

}

}

</script>

 

06document.write

write() 方法可向文档写入 HTML 表达式或 JavaScript 代码。

<script>

window.onload=function(){

var oBtn=document.getElementById('btn1')

 

oBtn.onclick=function(){

document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");

}

}

</script>

 

07navigator

Navigator 对象包含有关浏览器的信息。

注意： 没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。

Navigator 对象属性

属性	说明
appCodeName	返回浏览器的代码名
appName	返回浏览器的名称
appVersion	返回浏览器的平台和版本信息
cookieEnabled	返回指明浏览器中是否启用 cookie 的布尔值
platform	返回运行浏览器的操作系统平台
userAgent	返回由客户机发送服务器的user-agent 头部的值

 

Navigator 对象方法

方法	描述
javaEnabled()	指定是否在浏览器中启用Java
taintEnabled()	规定浏览器是否启用数据污点(data tainting)

 

<script>

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>

 

08windowLocation

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

window.location 对象在编写时可不使用 window 这个前缀。

一些例子：

location.hostname 返回 web 主机的域名

location.pathname 返回当前页面的路径和文件名

location.port 返回 web 主机的端口 （80 或 443）

location.protocol 返回所使用的 web 协议（http:// 或 https://）

 

<script>

alert(window.location.pathname);//获取文件的url文件的具体路径

</script>

 

09history

History 对象

History 对象包含用户（在浏览器窗口中）访问过的 URL。

History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。

注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。

History 对象属性

属性	说明
length	返回历史列表中的网址数

History 对象方法

方法	说明
back()	加载 history 列表中的前一个 URL
forward()	加载 history 列表中的下一个 URL
go()	加载 history 列表中的某个具体页面

 

<script>

function goBack(){

window.history.back(); //back() 就是返回上一页 forward() 去下一页

}

 

</script>

 

10弹窗

可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。

警告框

警告框经常用于确保用户可以得到某些信息。

当警告框出现后，用户需要点击确定按钮才能继续进行操作。

确认框

确认框通常用于验证是否接受用户操作。

当确认卡弹出时，用户可以点击 "确认" 或者 "取消" 来确定用户操作。

当你点击 "确认", 确认框返回 true， 如果点击 "取消", 确认框返回 false

提示框

提示框经常用于提示用户在进入页面前输入某个值。

当提示框出现后，用户需要输入某个值，然后点击确认或取消按钮才能继续操纵。

如果用户点击确认，那么返回值为输入的值。如果用户点击取消，那么返回值为 null。

 

<script>

//确认框

// var res=confirm('您是否要关闭？') 点击确认返回的是true 取消false

// alert(res);

 

//输入框

var res = prompt('请输入你的姓名', 'blue'); //提示语 第二个值默认显示再输入框的内容

 

alert(res);

</script>

 

11可视区域

<script>

window.onload=function(){

var oBtn=document.getElementById('btn1');

 

oBtn.onclick=function(){

alert('可视区域宽：'+document.documentElement.clientWidth+'可视区域高：'+document.documentElement.clientHeight)

}

}

</script>

 

12scrollTop

<script>

document.onclick=function(){

//IE FF

//alert(document.documentElement.scrollTop);

//chrome

//alert(document.body.scrollTop);

//以前的写法

// var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;

// alert(scrollTop)

 

//滚动距离 系数

var scrollTop=document.documentElement.scrollTop;

alert(scrollTop)

 

}

</script>

 

13固定定位

position: fixed

14右下角悬浮框

<script>

window.onscroll=window.onresize=function(){

var oDiv=document.getElementById('div1');

var scrollTop=document.documentElement.scrollTop;

 

oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';

 

}

 

</script>