目录
案例：滚动监听事件，当scrolltop大于某值市显示(吸顶效果)
JavaScript的组成
什么是ECMAScript
ECMAScript是一种语法标准
语法、变量和数据类型、运算符、逻辑控制语句、关键字、保留字、对象
编码遵循ECMAScript标准
文档对象模型
DOM(Document Object Model)文档对象模型
浏览器对象模型
BOM(Browser Object Model) 浏览器对象模型
提供了独立于内容与浏览器窗口进行交互的对象
window对象的常用属性
window的screen属性
window.screen 对象包含有关用户屏幕的信息。
window.screen 对象在编写时可以不使用 window 这个前缀。
一些属性：
screen.availWidth - 可用的屏幕宽度(以像素计，减去界面特性，比如窗口任务栏)
screen.availHeight - 可用的屏幕高度
location和history对象
1.history对象
back() 加载历史列表中的前一个 URL
forward() 加载历史列表中的下一个 URL
go(number) 加载历史列表中的某个具体的页面 -1 前一个页面go() 方法可加载历史列表中的某个具体的页面。
该参数可以是数字，使用的是要访问的 URL 在 History 的 URL 列表中的相对位置。（-1上一个页面，1前进一个页面)。或一个字符串，字符串必须是局部或完整的URL，该函数会去匹配字符串的第一个URL。如果以前过将来的历史列表中没有URL，按钮将不会导致任何行动。
2.location
href 返回当前页面的url
pathname 返回url的路径名
reload() 刷新本页面
History 对象
History 对象包含用户（在浏览器窗口中）访问过的 URL。
History 对象是 window 对象的一部分，可通过 window.history 属性对其进行访问。
注意： 没有应用于History对象的公开标准，不过所有浏览器都支持该对象。
History 对象属性
| 属性 | 说明 |
|---|---|
| length | 返回历史列表中的网址数 |
History 对象方法
| 方法 | 说明 |
|---|---|
| back() | 加载 history 列表中的前一个 URL |
| forward() | 加载 history 列表中的下一个 URL |
| go() | 加载 history 列表中的某个具体页面 |
语法：
history.go(number|URL)
<body>
<input type="button" value="back" id="backBtn">
<input type="button" value="forward" onclick="forWord()">
<a href="https://www.baidu.com">跳转到百度</a>
<input type="button" value="刷新" onclick="flushH()">
</body>
<script>
// 1:点击事件来驱动 onclick
var back_btn = document.getElementById("backBtn");
back_btn.onclick = function () {
//2.实现后退
// history.back();
history.go(-1); //后退一次页面
}
function forWord() {
// history.forward();
history.go(1); //跳转下一次页面
}
function flushH() { //刷新页面
history.go(0);
}
</script>
</html>Location 对象
Location 对象包含有关当前 URL 的信息。
Location 对象是 window 对象的一部分，可通过 window.location.xxx 格式的相关属性对其进行访问。
注意： 没有应用于Location对象的公开标准，不过所有浏览器都支持该对象。
Location 对象属性
| 属性 | 描述 |
|---|---|
| hash | 返回一个URL的锚部分 |
| host | 返回一个URL的主机名和端口 |
| hostname | 返回URL的主机名 |
| href | 返回完整的URL |
| pathname | 返回的URL路径名。 |
| port | 返回一个URL服务器使用的端口号 |
| protocol | 返回一个URL协议 |
| search | 返回一个URL的查询部分 |
Location 对象方法
| 方法 | 说明 |
|---|---|
| assign() | 载入一个新的文档 |
| reload() | 重新载入当前文档 |
| replace() | 用新的文档替换当前文档 |
<body>
<a href="javascript:;" id="btn"></a>
当标签中的href属性没有值得话又不想刷新当前页面,这时可以给href属性赋值:(javascript:;)或javascript:void(0);
<!-- location 可以操作url -->
<input type="button" value="跳转到百度" id="gobaidu">
<input type="button" value="获取当前url的pathname" id="getpathname">
<input type="button" value="刷新当前页面" onclick="flushbtn()">
</body>
<script>
//url的组成：访问协议：// ip：端口号 pathname
//端口号是用来区别访问的应用的程序的
//如果端口号是80的可以省略不写
var gobaidu_btn = document.getElementById("gobaidu");
gobaidu_btn.onclick = function () {
//跳转到百度
//href：跳转页面使用
window.location.href = "http://www.baidu.com";
}
var pathname_btn = document.getElementById("getpathname");
pathname_btn.onclick = function () {
alert(location.pathname); //获取当前页面上的url的pathname
}
function flushbtn() {
window.location.reload(); //重新载入当前文档
}
//函数基本都带小括号，小括号代表执行当前函数
</script>
Navigator 对象
Navigator 对象
Navigator 对象包含有关浏览器的信息。
注意： 没有应用于 navigator 对象的公开标准，不过所有浏览器都支持该对象。
Navigator 对象属性
| 属性 | 说明 |
|---|---|
| appCodeName | 返回浏览器的代码名 |
| appName | 返回浏览器的名称 |
| appVersion | 返回浏览器的平台和版本信息 |
| cookieEnabled | 返回指明浏览器中是否启用 cookie 的布尔值 |
| platform | 返回运行浏览器的操作系统平台 |
| userAgent | 返回由客户机发送服务器的user-agent 头部的值 |
Navigator 对象方法
| 方法 | 描述 |
|---|---|
| javaEnabled() | 指定是否在浏览器中启用Java |
| taintEnabled() | 规定浏览器是否启用数据污点(data tainting) |
Window对象的常用方法
open（）
window.open(URL,name,features)
close 关闭
<body>
<input type="button" value="clickMe" onclick="_close()">
</body>
<script>
function _close() {
window.close();
}
</script>setTimeout（）
<body>
<div id="time">0</div>
<input type="button" value="start" id="start">
<input type="button" value="stop" id="stop">
</body>
<script>
var timer = document.getElementById("time");
var Start = document.getElementById("start");
var Stop = document.getElementById("stop");
var num = 0;
var _stop;
var fun = function () {
num++;
_stop = setTimeout("fun()", 1000); //计时开始
timer.innerHTML = num;
}
Start.onclick = function () { //点击调用函数，计时开始
fun();
}
Stop.onclick = function () { //清除计时
clearTimeout(_stop);
}
//要延迟多久去做什么事情，事件单位是毫秒
// setTimeout(function () {
// alert(1);
// }, 2000);
</script>Window对象的常用事件
<script>
//onload 页面加载完毕后就会执行该函数
window.onload = function () {
console.log("页面加载完毕了");
}
window.onresize = function(){
console.log("窗口大小发生改变了");
}
window.onscroll = function(){
console.log("滚动条滚动了");
console.log(document.documentElement.scrollTop || document.body.scrollTop);//滚动监听
}
</script>window.btoa(str)
该方法返回一个 base-64 编码的字符串
<script>
//英文: iso8859-1
//中文: GBK
//中英文: utf-8 utf-16 gb2312
var str = window.btoa("hello");
console.log(str);
console.log(atob(str)); //中文
</script>鼠标点击、移入事件
案例：滚动监听事件，当scrolltop大于某值市显示(吸顶效果)
<style>
* {
margin: 0;
padding: 0;
}
.main {
width: 1200px;
height: 2000px;
margin: 0 auto;
background-color: aquamarine;
}
.main .box {
font-size: 50px;
text-align: center;
width: 1200px;
height: 100px;
background-color: blanchedalmond;
}
.main .bon {
position: fixed;
top: 0px;
font-size: 50px;
text-align: center;
width: 1200px;
height: 100px;
background-color: #f00;
display: none;
}
#ipt {
position: fixed;
right: 100px;
bottom: 200px;
width: 90px;
height: 40px;
border: none;
background-color: red;
color: aliceblue;
}
</style>
</head>
<body>
<div class="main">
<div class="box">第一个DIV</div>
<div class="bon">第二个DIV</div>
</div>
<input type="button" value="点击回顶部" id="ipt">
</body>
<script>
var timer = null;
var go = document.getElementById("ipt");
var omain = document.querySelector(".main")
var obox = document.querySelector(".main .box");
var obon = document.querySelector(".main .bon");
go.onclick = function () {
clearInterval(timer)
timer = setInterval(() => {
document.documentElement.scrollTop -= 10;
var _st = document.documentElement.scrollTop || document.body.scrollTop;
if (_st === 0) {
clearInterval(timer);
}
}, 10)
}
window.onscroll = function () {
var _b = document.documentElement.scrollTop || document.body.scrollTop;
if (_b >= 100) {
obon.style.display = "block";
go.style.display = "block";
} else {
obon.style.display = "none";
go.style.display = "none";
}
}
</script>
案例二：无缝滚动应用
<style>
* {
padding: 0;
margin: 0;
}
ul {
list-style: none;
}
.box {
overflow: hidden;
margin: 0 auto;
width: 200px;
height: 300px;
margin: 20px auto;
border: 1px solid #000;
}
.box .con {
padding-left: 40px;
}
.box .con li {
line-height: 40px;
}
</style>
</head>
<body>
<div class="box">
<ul class="con">
<li>从入门到放弃01</li>
<li>从入门到放弃02</li>
<li>从入门到放弃03</li>
<li>从入门到放弃04</li>
<li>从入门到放弃05</li>
<li>从入门到放弃06</li>
<li>从入门到放弃07</li>
<li>从入门到放弃08</li>
<li>从入门到放弃09</li>
<li>从入门到放弃10</li>
</ul>
</div>
</body>
<script>
var odiv = document.querySelector(".box");
var oul = document.querySelector(".box .con");
var timer = null;
oul.innerHTML = oul.innerHTML + oul.innerHTML;
function autoPlay() {
timer = setInterval(() => {
odiv.scrollTop++;
if (odiv.scrollTop >= odiv.scrollHeight / 2) {
odiv.scrollTop = 0;
}
}, 20);
}
autoPlay();
//鼠标移入div时，关闭计时器
odiv.onmouseover = function () {
clearInterval(timer);
}
//当鼠标移开div时，开启计时器
odiv.onmouseout = function () {
autoPlay();
}
</script> 
案例3：单行滚动或者照片单个无缝滚动
<style>
* {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
.main {
overflow: hidden;
margin: 0 auto;
font-size: 0;
/*实现照片间缝隙为0*/
width: 600px;
height: 400px;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li><img src="./img/1.webp" alt=""></li>
<li><img src="./img/2.webp" alt=""></li>
<li><img src="./img/3.webp" alt=""></li>
<li><img src="./img/4.webp" alt=""></li>
<li><img src="./img/5.webp" alt=""></li>
<li><img src="./img/6.webp" alt=""></li>
<li><img src="./img/7.webp" alt=""></li>
<li><img src="./img/8.webp" alt=""></li>
<li><img src="./img/9.webp" alt=""></li>
<li><img src="./img/10.webp" alt=""></li>
</ul>
</div>
</body>
<script>
var omain = document.querySelector(".main");
var oul = document.querySelector(".main ul");
var timer = null;
oul.innerHTML = oul.innerHTML + oul.innerHTML;
function autoPlay() { //封装函数
timer = setInterval(function () {
omain.scrollTop++;
if (omain.scrollTop >= omain.scrollHeight / 2) { //滚动高度大于自身高度一半时，重新赋值滚动高度为0
omain.scrollTop = 0;
};
if (omain.scrollTop % 400 === 0) {
clearInterval(timer);
tab = setTimeout(function () { //延迟多少毫秒开启计时器
autoPlay();
}, 400)
}
}, 10);
}
autoPlay(); //调用函数
//鼠标移入时关闭计时器
omain.onmouseover = function () {
clearInterval(timer);
clearTimeout(tab); //清除延时
}
//鼠标移出时开启计时器
omain.onmouseout = function () {
autoPlay();
}
</script>
67
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
