01在可视区域范围内拖放
<script>
window.οnlοad=function(){
var oDiv=document.getElementById('div1');
var disX=0;
var disY=0;
oDiv.οnmοusedοwn=function(ev){
var oEvent=ev||event;
//每次确定div的具体位置 坐标
disX=oEvent.clientX-oDiv.offsetLeft;
disY=oEvent.clientY-oDiv.offsetTop;
document.οnmοusemοve=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.οnmοuseup=function(){
document.οnmοusemοve=null;
document.οnmοuseup=null;
}
}
}
</script>
02open
open() 方法打开一个输出流来收集 document.write() 或 document.writeln() 方法输出的内容。
调用 open() 方法打开一个新文档并且用 write() 方法设置文档内容后,必须记住用 document.close() 方法关闭文档,并迫使其内容显示出来。
注意:如果目标文件已经存在,它将被清除。如果这个方法没有参数,会显示一个新窗口(about:blank)。
<script>
window.οnlοad=function(){
var oBtn=document.getElementById('btn1');
oBtn.οnclick=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.οnclick=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.οnlοad=function(){
var oBtn=document.getElementById('btn1')
oBtn.οnclick=function(){
document.write("<h1>Hello World!</h1><p>Have a nice day!</p>");
}
}
</script>
07navigator
Navigator 对象包含有关浏览器的信息。
注意: 没有应用于 navigator 对象的公开标准,不过所有浏览器都支持该对象。
Navigator 对象属性
属性 | 说明 |
返回浏览器的代码名 | |
返回浏览器的名称 | |
返回浏览器的平台和版本信息 | |
返回指明浏览器中是否启用 cookie 的布尔值 | |
返回运行浏览器的操作系统平台 | |
返回由客户机发送服务器的user-agent 头部的值 |
Navigator 对象方法
方法 | 描述 |
指定是否在浏览器中启用Java | |
规定浏览器是否启用数据污点(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 对象属性
属性 | 说明 |
返回历史列表中的网址数 |
History 对象方法
方法 | 说明 |
加载 history 列表中的前一个 URL | |
加载 history 列表中的下一个 URL | |
加载 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.οnlοad=function(){
var oBtn=document.getElementById('btn1');
oBtn.οnclick=function(){
alert('可视区域宽:'+document.documentElement.clientWidth+'可视区域高:'+document.documentElement.clientHeight)
}
}
</script>
12scrollTop
<script>
document.οnclick=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.οnscrοll=window.οnresize=function(){
var oDiv=document.getElementById('div1');
var scrollTop=document.documentElement.scrollTop;
oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
}
</script>