JS_BOM_浏览器事件

最新推荐文章于 2023-07-28 10:55:52 发布

柠檬养乐多.

最新推荐文章于 2023-07-28 10:55:52 发布

阅读量389

点赞数

文章标签： javascript 开发语言前端 html

本文链接：https://blog.csdn.net/ysj94s7/article/details/122987907

版权

本文介绍了JavaScript中Math对象的基本运算，如max、min等，以及日期对象的创建、获取和设置方法。通过实例演示了如何实现倒计时功能，并展示了如何使用插件处理时间和日期格式，包括Moment.js库的使用。同时涵盖了BOM和DOM的基础概念，以及浏览器事件如onload、onresize和onscroll的实践应用。

摘要由CSDN通过智能技术生成

01-复习
   a.Math对象
       Math对象
max
min
pow
floor
ceil
round
sqrt
random
abs
sin
con
PI
   b.日期对象
       日期对象
var now = new Date()
now.getFullYear()
now.getMonth() + 1
now.getDate()
now.getDay()
now.getHours()
now.getMilliutes()
now.getSeconds()
now.getMilliSeconds()
now.getTime()
   c.设置日期
       设置日期
new Date(2023, 0, 1, 0, 0, 0, 0)

02-练习
倒计时
<style>
div {
float: left;
margin: 10px;
border: 1px solid cyan;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div></div>
<div></div>
<script>
function fn(obj) {
var start = 5
var end = 7
// 开启定时器让开始时间自减
var timer = setInterval(function () {
start--
obj.innerHTML = '距离开始抢购还有' + start + '秒'
if (start === 0) {
// 停止定时器
clearInterval(timer)
// 让结束时间自减
var timer2 = setInterval(function () {
end--
obj.innerHTML = '距离结束抢购还有' + end + '秒'
if (end === 0) {
// 停止定时器
clearInterval(timer2)
obj.innerHTML = '结束'
}
}, 1000)
}
}, 1000)
}
fn(div1)

function fn2(obj) {
var start = 5
var end = 7
// 开启定时器让开始时间自减
var timer = setInterval(function () {
start--
obj.innerHTML = '距离开始抢购还有' + start + '秒'
if (start === 0) {
// 停止定时器
clearInterval(timer)
// 让结束时间自减
var timer2 = setInterval(function () {
end--
obj.innerHTML = '距离结束抢购还有' + end + '秒'
if (end === 0) {
// 停止定时器
clearInterval(timer2)
obj.innerHTML = '结束'
}
}, 1000)
}
}, 1000)
}
fn2(div2)
</script>

02-练习2
倒计时
<style>
div {
float: left;
margin: 10px;
border: 1px solid cyan;
width: 300px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>

<body>
<div id="div1"></div>
<div id="div2"></div>
<div id="div3"></div>
<div id="div4"></div>
<script>
function fn(obj, start, end) {
// var start = 5
// var end = 7
// 开启定时器让开始时间自减
var timer = setInterval(function () {
start--
obj.innerHTML = '距离开始抢购还有' + start + '秒'
if (start === 0) {
// 停止定时器
clearInterval(timer)
// 让结束时间自减
var timer2 = setInterval(function () {
end--
obj.innerHTML = '距离结束抢购还有' + end + '秒'
if (end === 0) {
// 停止定时器
clearInterval(timer2)
obj.innerHTML = '结束'
}
}, 1000)
}
}, 1000)
}
fn(div1, 5, 7)
fn(div2, 10, 6)
fn(div3, 5, 7)
fn(div4, 10, 6)
</script>

03-使用插件
时间日期
<body>
<script src="moment.js"></script>
<script>
console.log(moment().format())

console.log(moment().format('YY-MM-DD hh:mm:ss'))

console.log(moment().format('hh:mm:ss'))

console.log(moment().format('l'))
</script>
</body>

04-BOM
含义
ECMAScript 3基本使用就已经讲完
BOM 浏览器
DOM 页面

BOM
- 浏览器对象模型
- window 窗口
- window的都不太能修改
- 属于window的属性，都可以不加window
// alert('abc')
// window.alert('hello')

// var a = 12
// console.log(a)

// console.log(a) // 没有定义会报错

// console.log(name) // '' name是window的属性

// console.log(window)

// prompt('输入内容')
// window.prompt('随便')

// var b = window.confirm('确认框')
// console.log(b)

// alert promat confirm 在公司里面都不让用
// 只能用div去模拟

// open('http://www.baidu.com/')
// open('http://www.jd.com/')
// open('http://www.taobao.com/')

// setInterval(function () {
// close()
// }, 3000)

05-模拟弹出框
<style>
.box {
width: 200px;
height: 200px;
background-color: yellow;
margin: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
display: none;
}

.box span {
position: absolute;
right: 0;
top: 0;
width: 20px;
height: 20px;
background-color: #ccc;
color: #fff;
line-height: 20px;
text-align: center;
cursor: pointer;
}
</style>
</head>

<body>
<input id="btn" type="button" value="按钮">
<div id="box" class="box">
<span id="btnClose">x</span>
</div>
<script>
btn.onclick = function () {
box.style.display = 'block'
}

btnClose.onclick = function () {
box.style.display = 'none'
}
</script>

06-浏览器信息
<style>
* {
margin: 0;
padding: 0;
}
</style>
</head>

<body>
abc
<script>
// navgator

var agent = navigator.userAgent // 浏览器信息
console.log(agent)

// PC 不用管
// ios 25px
// android 20px

// document.body.style.paddingTop = '20px'

if (agent.indexOf('iPhone') !== -1) {
document.body.style.paddingTop = '25px'
} else if (agent.indexOf('Android') !== -1) {
document.body.style.paddingTop = '20px'
}

console.log(navigator.appVersion)
console.log(navigator.appName)
</script>

07-浏览器地址信息
<body>
<form action="">
<input type="text" name="userename">
<input type="text" name="password">

<input type="button" value="刷新" id="btn">
<script>
// 获取地址
var href = location.href

function queryStr(str) {
if (str.indexOf('?') === -1) {
return {}
}

var obj = {}
str = str.slice(str.indexOf('?') + 1)
var arr = str.split('&')

arr.forEach(function (ele) {
// console.log(ele.split('='))
obj[ele.split('=')[0]] = ele.split('=')[1]
})

// console.log(obj)
return obj
}
var obj = queryStr(href)

console.log(obj)

// 设置地址跳转一个地址
// location.href = 'http://www.baidu.com/'

// 前端人为的移动端是手机上的网页！！！
// app 混合开发

// 刷新
btn.onclick = function () {
location.reload()
}
</script>
</body>

08-浏览器历史记录
<body>
<a href="b.html">跳转</a>
<input type="button" value="返回" id="back">
<input type="button" value="前进" id="forward">
<script>
// history
// - 浏览器历史记录
// - back 返回
// - forward 前进
// - go 去

back.onclick = function () {
// history.back()
history.go(1)
}

forward.onclick = function () {
// history.forward()
history.go(-1)
}
</script>
</body>
       a.html
           <body>
a页面
<a href="08_浏览器历史记录.html">跳转</a>
</body>
       b.html
           <body>
b页面
<a href="08_浏览器历史记录.html">跳转</a>
</body>

09-浏览器事件
-onload-加载完成
<script>
// window
// - 事件
// - onload 加载完成
// - onresize 改变大小
// - onscroll 滚动

// 加载完页面所有资源才执行js
// - html js css images video audio flash
window.onload = function () {
div1.style.background = 'yellow'
}
</script>
</head>

09-浏览器事件2
-onresize-改变大小
<style>
/* @media (width: 800px) {} */
</style>
</head>

<body>
<script>
// rem 相对单位基准值是html的字体大小
// css3 新增的单位不兼容低版本浏览器

window.onresize = function () {
// console.log(1)
// var w = document.documentElement.clientWidth // 浏览器宽度包含滚动条
// var h = document.documentElement.clientHeight // 浏览器高度包含滚动条

var w = window.innerWidth // 浏览器宽度不包含滚动条
var h = window.innerHeight // 浏览器高度不包含滚动条

// console.log(w, h)

if (w > 375 && w < 750) {
document.body.style.background = 'yellow'
} else if (w > 750 && w < 1080) {
document.body.style.background = 'cyan'
} else if (w > 1080) {
document.body.style.background = '#ccc'
} else {
document.body.style.background = 'pink'
}
}
</script>
</body>

09-浏览器事件3
-onscroll-滚动
<style>
body {
height: 2000px;
}

#backTop {
width: 200px;
height: 200px;
position: fixed;
right: 100px;
bottom: 100px;
background-color: pink;
color: #fff;
font-size: 30px;
font-weight: bold;
display: flex;
justify-content: center;
align-items: center;
}
</style>
</head>

<body>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>

backTop.onclick = function () {
document.documentElement.scrollTop = 0
}
</script>
</body>

09-浏览器事件4
点击返回顶部
<style>
body {
height: 2000px;
}

<body>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>

backTop.onclick = function () {
var timer = setInterval(function () {
document.documentElement.scrollTop -= 20

if (document.documentElement.scrollTop === 0) {
clearInterval(timer)
}
}, 1)
}
</script>
</body>

09-浏览器事件5
点击返回顶部-隐藏
<style>
body {
height: 2000px;
}

#backTop {
width: 200px;
height: 200px;
position: fixed;
right: 100px;
bottom: 100px;
background-color: pink;
color: #fff;
font-size: 30px;
font-weight: bold;
display: none;
justify-content: center;
align-items: center;
}
</style>
</head>

<body>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>
<p>ppppp</p>