<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>01初始BOM</title>
</head>
<body>
<h1>01初始BOM</h1>
</body>
<script>
// 01初始BOM
console.log(window);
// window.alert("警告框");//全局方法会省略window
var a="全局变量";
function func(){
console.log("全局函数")
}
console.log(window.location);
console.log(window.history);
console.log(window.screen);
console.log(window.navigator);
console.log(window.sessionStorage)
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>02BOM的属性值为对象</title>
</head>
<body>
<h1>02BOM的属性值为对象</h1>
</body>
<script>
// 02BOM的属性值为对象
console.log(window);
// 属性值为对象
// history 历史记录 对history对象的只读引用
console.log(window.history);
// location 用于窗口或框架的location对象
console.log(window.location);
// navigator 浏览器的配置信息 对navigator对象的只读属性
console.log(window.navigator);
// screen 屏幕 对screen对象的只读属性
console.log(window.screen);
// document 对document对象的只读属性
console.log(window.document);
// 关于缓存
// cookie
console.log(document.cookie);
// html5新增的缓存
// sessionStorage 会话缓存对象
console.log(window.sessionStorage);
// localStorage 本地缓存对象
console.log(window.localStorage)
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>03BOM宽高的属性值</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
border: 20px solid red;
}
#box{
width: 2000px;
height: 2000px;
background: pink;
position: relative;
}
#min{
width: 300px;
height: 300px;
background: skyblue;
padding: 20px;
border: 20px solid green;
/* margin: 20px; */
position: absolute;
top: 20px;
left: 20px;
}
#top{
width: 40px;
height: 40px;
background: blue;
border-radius: 5px;
color: #fff;
position: fixed;
right: 40px;
bottom: 80px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<h1>03BOM宽高的属性值</h1>
<div id="box">
<div id="min"></div>
</div>
<div id="top">返回顶部</div>
</body>
<script>
// 03BOM宽高的属性值
// console.log(window);
// 屏幕的宽高 screen
console.log("屏幕的宽："+window.screen.width,"屏幕的高："+window.screen.height);
// 和window相关的 宽高
// innerHeight 浏览器窗口的高（文档显示区,滚动条）
// innerWidth 浏览器窗口的宽（文档显示区,滚动条）
console.log("innerWidth："+window.innerWidth,"innerHeight："+window.innerHeight);
// outerHeight 浏览器窗口的高（文档显示区,滚动条,工具栏）
// outerWidth 浏览器窗口的宽（文档显示区,滚动条,工具栏）
console.log("outerHeight："+window.outerHeight,"outerWidth："+window.outerWidth);
// 兼容IE8以下浏览器
// clientWidth 浏览器窗口宽（文档可见区）
// clientHeight 浏览器窗口（文档可见区）
console.log(document.documentElement.clientHeight,document.documentElement.clientWidth);
// clientWidth 浏览器窗口宽（文档显示区）
// clientHeight 浏览器窗口（文档显示区）
console.log(document.body.clientHeight,document.body.clientWidth);
// 元素
// clientLeft clientTop 元素border的宽距离边框的偏移
// console.log(document.documentElement.clientLeft,document.documentElement.clientTop);
console.log(document.body.clientLeft,document.body.clientTop);
var oMin=document.getElementById("min");
// offsetWidth 宽+padding+border
// offsetHeight 高+padding+border
// console.log(oMin.offsetWidth,oMin.offsetHeight);//300 300 只设置了宽高
// console.log(oMin.offsetWidth,oMin.offsetHeight);//340 340 设置了宽高+padding
// console.log(oMin.offsetWidth,oMin.offsetHeight);//380 380 设置了宽高+padding+border
console.log(oMin.offsetWidth,oMin.offsetHeight);//380 380 设置了宽高+padding+border
// offsetLeft offsetTop 相对于祖先元素中最近有有定位属性的元素的偏移
console.log(oMin.offsetLeft,oMin.offsetTop);
// scrollWidth scrollHeight 内容的元素大小(总宽度，总高度)
console.log(oMin.scrollWidth,oMin.scrollHeight)
console.log(document.documentElement.scrollHeight,document.documentElement.scrollWidth)
// scrollTop scrollLeft 元素被卷去的内容的高度和宽度
console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);
window.οnscrοll=function(){
if(document.documentElement.scrollTop>500){
document.getElementById("top").style.display="block"
}
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>04BOM坐标的属性</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
border: 20px solid red;
}
#box{
width: 2000px;
height: 2000px;
background: pink;
position: relative;
}
#min{
width: 300px;
height: 300px;
background: skyblue;
padding: 20px;
border: 20px solid green;
/* margin: 20px; */
position: absolute;
top: 20px;
left: 20px;
}
#top{
width: 40px;
height: 40px;
background: blue;
border-radius: 5px;
color: #fff;
position: fixed;
right: 40px;
bottom: 80px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<h1>04BOM坐标的属性</h1>
<div id="box">
<div id="min"></div>
</div>
<div id="top">返回顶部</div>
</body>
<script>
// 04BOM坐标的属性
// console.log(window);
// screenX screenY 返回相对于屏幕窗口的坐标/偏移
console.log(window.screenX,window.screenY);
// screenLeft screenTop 返回相对于屏幕窗口的坐标/偏移
console.log(window.screenLeft,window.screenTop);
// pageXOffset pageYOffset 网页内容相对于window偏移的位置
console.log(window.pageXOffset,window.pageYOffset);
// scrollX scrollY 滚动条卷去部分内容的大小
console.log(window.scrollX,window.scrollY);
console.log(document.documentElement.scrollLeft,document.documentElement.scrollTop);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>05返回顶部</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
border: 20px solid red;
}
#box {
width: 2000px;
height: 2000px;
background: pink;
position: relative;
}
#min {
width: 300px;
height: 300px;
background: skyblue;
padding: 20px;
border: 20px solid green;
/* margin: 20px; */
position: absolute;
top: 20px;
left: 20px;
}
#top {
width: 40px;
height: 40px;
background: blue;
border-radius: 5px;
color: #fff;
position: fixed;
right: 40px;
bottom: 80px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<h1>05返回顶部</h1>
<div id="box">
<div id="min"></div>
</div>
<div id="top">返回顶部</div>
</body>
<script>
// 05返回顶部
// 1.获取元素
var oTop = document.getElementById("top");
// 2.添加窗口的滚动事件
window.onscroll = function () {
// 3.判断滚动条距离顶部的位置
if (window.scrollY > 500) {
// 4.让返回顶部按钮显示
oTop.style.display = "block"
} else {
oTop.style.display = "none"
}
}
// 5.给返回顶部按钮添加点击事件
oTop.onclick = function () {
// 5-1.修改滚动条距离顶部的位置
// 5-2.通过定时器 修改滚动条距离顶部的位置
var timer = setInterval(function () {
var x = document.documentElement.scrollTop;
// document.documentElement.scrollTop = y(变量 --)
x <= 0 ? clearInterval(timer) : x-=30;
document.documentElement.scrollTop = x;
}, 1)
}
console.log(window.scrollX, window.scrollY);
console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>06BOM框架相关的属性</title>
<style>
*{
margin: 0;
padding: 0;
}
html{
font-size: calc(100vw/750);
}
#tabBar{
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
height: 100rem;
box-shadow: 0rem -5rem 20rem 0rem green;
}
</style>
</head>
<body>
<h1>06BOM框架相关的属性</h1>
<iframe src="a.html" id="a" frameborder="1" name="frame_a"></iframe>
<iframe src="b.html" id="b" frameborder="1" name="frame_b"></iframe>
<iframe src="c.html" id="c" frameborder="1" name="frame_c"></iframe>
<!-- <iframe src="a.html" name="frame_a" frameborder="0"></iframe>
<div id="tabBar">
<a href="a.html" target="frame_a">微信</a>
<a href="b.html" target="frame_a">通讯录</a>
<a href="c.html" target="frame_a">发现</a>
<a href="d.html" target="frame_a">我的</a>
</div> -->
</body>
<script>
// 06BOM框架相关的属性
// length 返回当前窗口中框架的数量
console.log(window.length);
// self 返回对当前窗口的引用 相当于window
console.log(window.self);
// top 返回顶级窗口
console.log(window.top);
// parent 返回父级窗口
console.log(window.parent);
// contentWindow 获取框架的元素
console.log(document.getElementById("a").contentWindow);
console.log(document.getElementById("b").contentWindow);
console.log(document.getElementById("c").contentWindow);
// frames 返回当前窗口，一个类数组对象，列出了当前窗口的所有直接子窗口。
console.log(window.frames[2]);
console.log(window.frames[2]==document.getElementById("c").contentWindow);
// name 设置或返回窗口的名称
window.name="当前窗口";
console.log(window.name);
console.log(document.getElementById("a").contentWindow.name);
// opener 返回对创建此窗口的引用
// document.οnclick=function(){
// newWindow=window.open("http://www.baidu.com","newWindow","width=100");
// console.log(newWindow.opener);
// }
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>07BOM的方法之弹窗</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: calc(100vw/750);
}
#tabBar {
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
height: 100rem;
box-shadow: 0rem -5rem 20rem 0rem green;
}
</style>
</head>
<body>
<h1>07BOM的方法之弹窗</h1>
<button>alert</button>
<button>confirm</button>
<button>prompt</button>
</body>
<script>
// 07BOM的方法之弹窗
var aBtns = document.getElementsByTagName("button");
// alert("内容") 警告框 显示带有一段消息和一个确认按钮的警告框
aBtns[0].onclick = function () {
window.alert("警告框");
}
// confirm("内容") 确认框 显示带有一段消息和 取消 确认按钮的确认框 返回 布尔值
var sure;
aBtns[1].onclick = function () {
// console.log(window.confirm("确认退出登录吗？"))
var sure = window.confirm("确认退出登录吗？");
if (sure) {
console.log("确定退出")
} else {
console.log("点错了，不退出")
}
}
// prompt("提示文本","默认输入的文本") 显示可提示用户输入的对话框 提示框 返回输入的内容
aBtns[2].onclick = function () {
// console.log(window.prompt("请输入你的年龄",18))
var age= window.prompt("请输入你的年龄",18);
if(age>=18){
console.log("你已成年")
}else{
console.log("未成年")
}
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>08BOM的方法之定时器</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: calc(100vw/750);
}
#tabBar {
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
height: 100rem;
box-shadow: 0rem -5rem 20rem 0rem green;
}
</style>
</head>
<body>
<h1>08BOM的方法之定时器</h1>
<button>setInterval</button>
<button>setTimeout</button>
<button>clearInterval</button>
<button>clearTimeout</button>
</body>
<script>
// 08BOM的方法之定时器
var aBtns = document.getElementsByTagName("button");
// setInterval(function(){},time,参数,参数) 按照指定的周期(以毫秒计)来调用函数或者计算表达式
var timer;
aBtns[0].οnclick=function(){
// timer=setInterval(function(){
// console.log("这是每个一秒执行一次的定时器")
// },1000)
timer=setInterval(func,1000,1,2)
}
function func(x,y){
console.log(x,y)
}
aBtns[2].οnclick=function(){
clearInterval(timer)
}
// setTimeout(function(){},time) 按照指定的周期(以毫秒计)后来调用函数或者计算表达式 延迟计时器 只执行一次
aBtns[1].οnclick=function(){
setTimeout(function(){
console.log("这是延迟一秒执行的定时器")
},1000)
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>09BOM的方法之窗口的加载</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: calc(100vw/750);
}
#tabBar {
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
height: 100rem;
box-shadow: 0rem -5rem 20rem 0rem green;
}
</style>
</head>
<body>
<h1>09BOM的方法之窗口的加载</h1>
<button>open()</button>
<button>close()</button>
<button>focus()</button>
<button>blur()</button>
<button>stop()</button>
<button>print()</button>
<iframe frameborder="1" name="iframe_a"></iframe>
</body>
<script>
// 09BOM的方法之窗口的加载
var aBtns = document.getElementsByTagName("button");
// open(URL,name/target,strWindowFeatures) 打开一个新的窗口或者查找一个已经命名的窗口 默认在新窗口打开
// URL：地址 必填项
// name：窗口的名称
// target：窗口打开的位置
// strWindowFeatures:包含新窗口的特征 大小 位置等
aBtns[0].οnclick=function(){
// newWin=window.open("http://www.taobao.com");
// newWin=window.open("http://www.taobao.com","新打开的窗口");
// newWin=window.open("http://www.taobao.com","iframe_a");
// newWin=window.open("http://www.taobao.com","_self");
newWin=window.open("http://www.taobao.com","_blank","scrollbars=yes,menubar=yes");
}
// close() 关闭浏览器窗口
aBtns[1].οnclick=function(){
// window.close()
newWin.close();
}
// focus() 把键盘焦点给与某个窗口
// blur() 将焦点从窗口移开
aBtns[2].οnclick=function(){
newWin.focus();
}
// stop() 停止窗口的加载
aBtns[4].οnclick=function(){
window.stop();
}
// print() 打印窗口的内容
aBtns[5].οnclick=function(){
window.print()
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>10BOM的方法之窗口的调整</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: calc(100vw/750);
}
#tabBar {
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
height: 100rem;
box-shadow: 0rem -5rem 20rem 0rem green;
}
</style>
</head>
<body>
<h1>09BOM的方法之窗口的加载</h1>
<button>open()</button>
<button>resizeTo()</button>
<button>resizeBy()</button>
</body>
<script>
// 09BOM的方法之窗口的加载
var aBtns = document.getElementsByTagName("button");
aBtns[0].οnclick=function(){
newWin=window.open("window.html","_blank","scrollbars=yes");
}
// resizeTo(width,height) 把窗口的宽高调整到指定大小 针对open()打开的窗口 无法设置超过一个tab的窗口大小
aBtns[1].οnclick=function(){
window.resizeTo(500,500)
}
// resizeby(width,height) 按照指定的像素调整窗口大小 可以为负值
aBtns[2].οnclick=function(){
newWin.resizeBy(50,50)
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>11BOM的方法之窗口的移动</title>
<style>
* {
margin: 0;
padding: 0;
}
html {
font-size: calc(100vw/750);
}
#tabBar {
width: 100%;
position: fixed;
bottom: 0;
display: flex;
align-items: center;
justify-content: space-around;
height: 100rem;
box-shadow: 0rem -5rem 20rem 0rem green;
}
</style>
</head>
<body>
<h1>11BOM的方法之窗口的移动</h1>
<button>open()</button>
<button>moveTo()</button>
<button>moveBy()</button>
</body>
<script>
// 11BOM的方法之窗口的移动
var aBtns = document.getElementsByTagName("button");
aBtns[0].οnclick=function(){
newWin=window.open("window.html","_blank","scrollbars=yes");
}
// moveTo(width,height) 把窗口移动到指定位置 针对open()打开的窗口 无法设置超过一个tab的窗口大小
aBtns[1].οnclick=function(){
newWin.moveTo(500,500)
}
// moveBy(width,height) 按照指定的像素调整窗口位置 可以为负值
aBtns[2].οnclick=function(){
newWin.resizeBy(50,50)
}
// createPopup() 创建一个 pop-up 窗口。
// getSelection() 返回一个 Selection 对象，表示用户选择的文本范围或光标的当前位置。
// getComputedStyle() 获取指定元素的 CSS 样式。
// matchMedia() 该方法用来检查 media query 语句，它返回一个 MediaQueryList对象。
// atob() 解码一个 base-64 编码的字符串。
// btoa() 创建一个 base-64 编码的字符串。
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>12BOM的方法之窗口的滚动条</title>
<style>
* {
margin: 0;
padding: 0;
}
#box{
width: 2000px;
height: 2000px;
}
</style>
</head>
<body>
<h1>12BOM的方法之窗口的滚动条</h1>
<button>open()</button>
<button>scrollTo()</button>
<button>scrollBy()</button>
<div id="box"></div>
</body>
<script>
// 12BOM的方法之窗口的滚动条
var aBtns = document.getElementsByTagName("button");
aBtns[0].οnclick=function(){
newWin=window.open("a.html","_blank","scrollbars=yes");
}
// scrollTo(width,height) 把内容滚动到指定的坐标
aBtns[1].οnclick=function(){
window.scrollTo(500,500)
}
// scrollBy(width,height) 按照指定的元素进行滚动 可以为负值
aBtns[2].οnclick=function(){
window.scrollBy(50,50)
}
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>13BOM的窗口事件</title>
<style>
* {
margin: 0;
padding: 0;
}
#box {
width: 2000px;
height: 2000px;
}
</style>
<!-- <script>
window.onload = function () {
var oBtn = document.getElementById("btn")
console.log(oBtn)
}
</script> -->
</head>
<body>
<h1>13BOM的窗口事件</h1>
<a href="b.html">B页面</a>
<img src="a.png" alt="">
<button id="btn">open()</button>
<button>scrollTo()</button>
<button>scrollBy()</button>
<div id="box"></div>
</body>
<script>
// 13BOM的窗口事件
var aBtns = document.getElementsByTagName("button");
aBtns[0].οnclick=function(){
window.open("newWin.html","_blank","scrollBars=yes")
}
// onload 当文档加载时运行脚本 入口函数
// window.οnlοad=function(){
// // 网页/文档加载完成 包含图片等资源
// console.log("网页加载完成")
// }
// onunload 关闭当前网页
window.οnunlοad=function(){
// console.log("离开当前网页")
alert("离开当前网页")
}
// onpageshow 当窗口可见时运行脚本
window.οnpageshοw=function(){
console.log("当前页面可见")
}
// onpagehide 当窗口隐藏式运行脚本
window.οnpagehide=function(){
console.log("当前页面隐藏")
}
// onblur 当窗口失去焦点时运行脚本
window.οnblur=function(){
console.log("当前页面失去焦点")
}
// onfocus 当窗口获取焦点时运行脚本
window.οnfοcus=function(){
console.log("当前页面获取焦点")
}
// onresize 当窗口调整大小时运行脚本
window.οnresize=function(){
console.log("调整了窗口的大小:",innerWidth,innerHeight)
}
// onerror 当错误发生时运行的脚本
// window.onerror = function(message, source, lineno, colno, error) { ... }
// message：错误信息（字符串）。可用于HTML οnerrοr=""处理程序中的event。
// source：发生错误的脚本URL（字符串）
// lineno：发生错误的行号（数字）
// colno：发生错误的列号（数字）
// error：Error对象（对象）
document.getElementsByTagName("img")[0].οnerrοr=function(message, source, lineno, colno, error){
console.log("图片加载失败",message)
}
// window.οnerrοr=function(){
// console.log("发生错误")
// }
// onscroll 当元素的滚动条滚动时运行脚本
window.οnscrοll=function(){
console.log("页面在滚动")
}
// onpopstate 当窗口历史记录改变时运行脚本
// onafterprint 在打印文档之后运行脚本
// onbeforeprint 在文档打印之前运行脚本
// onbeforeonload 在文档加载之前运行脚本
// onhashchange 当文档改变时运行脚本
// onmessage 当触发消息时运行脚本
// onoffline 当文档离线时运行脚本
// ononline 当文档上线时运行脚本
// onredo 当文档执行再执行操作（redo）时运行脚本
// onstorage 当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本
// onundo 当文档执行撤销时运行脚本
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>14返回顶部</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
border: 20px solid red;
}
#box {
width: 2000px;
height: 2000px;
background: pink;
position: relative;
}
#min {
width: 300px;
height: 300px;
background: skyblue;
padding: 20px;
border: 20px solid green;
/* margin: 20px; */
position: absolute;
top: 20px;
left: 20px;
}
#top {
width: 40px;
height: 40px;
background: blue;
border-radius: 5px;
color: #fff;
position: fixed;
right: 40px;
bottom: 80px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<h1>14返回顶部</h1>
<div id="box">
<div id="min"></div>
</div>
<div id="top">返回顶部</div>
</body>
<script>
// 14返回顶部
// 1.获取元素
var oTop = document.getElementById("top");
// 2.添加窗口的滚动事件
window.onscroll = function () {
// 3.判断滚动条距离顶部的位置
if (window.scrollY > 500) {
// 4.让返回顶部按钮显示
oTop.style.display = "block"
} else {
oTop.style.display = "none"
}
}
// 5.给返回顶部按钮添加点击事件
oTop.onclick = function () {
// 5-1.修改滚动条距离顶部的位置
// 5-2.通过定时器 修改滚动条距离顶部的位置
var timer = setInterval(function () {
if(window.scrollY<=0){
clearInterval(timer)
}else{
window.scrollBy(0,-50);
}
}, 1)
}
console.log(window.scrollX, window.scrollY);
console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop);
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>15斐波那契</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
border: 20px solid red;
}
#box {
width: 2000px;
height: 2000px;
background: pink;
position: relative;
}
#min {
width: 300px;
height: 300px;
background: skyblue;
padding: 20px;
border: 20px solid green;
/* margin: 20px; */
position: absolute;
top: 20px;
left: 20px;
}
#top {
width: 40px;
height: 40px;
background: blue;
border-radius: 5px;
color: #fff;
position: fixed;
right: 40px;
bottom: 80px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<h1>15斐波那契</h1>
</body>
<script>
// 15斐波那契
// 递归 递推
// 斐波那契 1 1 2 3 5 8 13 21 ...
// F(0)=0 F(1)=1 F(n)=F(n-1)+F(n-2) (n ≥ 2,n ∈ N*)
function func(x) {
if (x == 0) {
return 0
}
if (x == 1) {
return 1
}
if (x >= 2) {
return func(x - 1) + func(x - 2)
}
}
console.log(func(10))
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>16变速运动</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
border: 20px solid red;
}
#box {
width: 2000px;
height: 2000px;
background: pink;
position: relative;
}
#min {
width: 300px;
height: 300px;
background: skyblue;
padding: 20px;
border: 20px solid green;
/* margin: 20px; */
position: absolute;
top: 20px;
left: 20px;
}
#top {
width: 40px;
height: 40px;
background: blue;
border-radius: 5px;
color: #fff;
position: fixed;
right: 40px;
bottom: 80px;
text-align: center;
display: none;
}
</style>
</head>
<body>
<h1>16变速运动</h1>
<div id="box">
<div id="min"></div>
</div>
<div id="top">返回顶部</div>
</body>
<script>
// 16变速运动
// 在页面写入文字 变速
// var time=0;//初始速度 0
setInterval(function () {
var s = 0;
var max = 20;
function write() {
s++;
document.write("hello world");
if(s<max){
setTimeout(write, s * 100)
}
}
write();
}, 1000)
// 1.获取元素
var oTop = document.getElementById("top");
// 2.添加窗口的滚动事件
window.onscroll = function () {
// 3.判断滚动条距离顶部的位置
if (window.scrollY > 500) {
// 4.让返回顶部按钮显示
oTop.style.display = "block"
} else {
oTop.style.display = "none"
}
}
// 5.给返回顶部按钮添加点击事件
oTop.onclick = function () {
// 5-1.修改滚动条距离顶部的位置
// 5-2.通过定时器 修改滚动条距离顶部的位置
var timer = setInterval(function () {
if (window.scrollY <= 0) {
clearInterval(timer)
} else {
window.scrollBy(0, -50);
}
}, 1)
}
console.log(window.scrollX, window.scrollY);
console.log(document.documentElement.scrollLeft, document.documentElement.scrollTop);
</script>
</html>
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
