WEB APIs day3 (2)
3.其它事件
- 页面加载事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面加载事件title>
<script>
/* // 等待页面所有资源加载完毕，就回去执行回调函数
window.addEventListener('load', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(11)
})
})
// 也可以针对某个资源绑定load事件，比如某个图很大，加载得很慢
// 可以不用非得写window
img.addEentListener('load',function() {
// 等待图片加载完毕，再去执行里面的代码
}) */
// 初始的html文档，如标签等加载完成之后
document.addEventListener('DOMContentLoaded', function () {
const btn = document.querySelector('button')
btn.addEventListener('click', function () {
alert(11)
})
})
script>
head>
<body>
<button>点击button>
body>
html>
- 元素滚动事件
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>页面滚动事件title>
<style>
body {
padding-top: 100px;
height: 6666px;
}
div {
display: none;
margin: 100px;
/* overflow: hidden/auto/scroll */
overflow: scroll;
/* h200+w200+bd */
height: 200px;
width: 200px;
border: 1px solid #000;
}
style>
head>
<body>
<div>
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
茉莉荔枝冰柠水
div>
<script>
const div = document.querySelector('div')
// 页面滚动事件
window.addEventListener('scroll', function () {
// console.log('我滚了');
// 想知道页面到底滚动了多少像素，被卷去了多少 scrollTop
// 获取html元素的写法
// document.documentElement
// console.log(document.documentElement.scrollTop)
// 大于等于100的时候显示，小于100的时候隐藏
const n = document.documentElement.scrollTop
if (n >= 100) {
div.style.display = 'block'
} else {
div.style.dispaly = 'none'
}
})
/* const div = document.querySelector('div')
div.addEventListener('scroll', function () {
// console.log(111)
// scrollTop被卷去的头部
console.log(div.scrollTop)
}) */
script>
body>
html>
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>scrollTop细节title>
<style>
body {
height: 3000px;
}
style>
head>
<body>
<script>
// 赋值的时候不带单位 800
// 可读写就是可取值也能赋值
document.documentElement.scrollTop = 800
window.addEventListener('scroll', function () {
// 在scroll事件里面获取被卷去的距离 如果写在外面就不能保证每滑动一段距离就改变一次值
const n = document.documentElement.scrollTop
// 得到的是什么数据？ 数字型 不带单位
console.log(n)
})
script>
body>
html>
综合案例
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>小兔鲜儿 - 新鲜 惠民 快捷!title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="renderer" content="webkit">
<link rel="stylesheet" href="./css/common.css">
<link rel="stylesheet" href="./css/index.css">
head>
<body>
<div class="xtx_topnav">
<div class="wrapper">
<ul class="xtx_navs">
<li>
<a href="javascript:;">请先登录a>
li>
<li>
<a href="javascript:;">免费注册a>
li>
<li>
<a href="javascript:;">我的订单a>
li>
<li>
<a href="javascript:;">会员中心a>
li>
<li>
<a href="javascript:;">帮助中心a>
li>
<li>
<a href="javascript:;">在线客服a>
li>
<li>
<a href="javascript:;">
<i class="mobile sprites">i>
手机版
a>
li>
ul>
div>
div>
<div class="xtx_header">
<div class="wrapper">
<h1 class="xtx_logo"><a href="/">小兔鲜儿a>h1>
<div class="xtx_navs">
<ul class="clearfix">
<li>
<a href="javascript:;">首页a>
li>
<li>
<a href="javascript:;">生鲜a>
li>
<li>
<a href="javascript:;">美食a>
li>
<li>
<a href="javascript:;">餐厨a>
li>
<li>
<a href="javascript:;">电器a>
li>
<li>
<a href="javascript:;">居家a>
li>
<li>
<a href="javascript:;">洗护a>
li>
<li>
<a href="javascript:;">孕婴a>
li>
<li>
<a href="javascript:;">服装a>
li>
ul>
div>
<div class="xtx_search clearfix">
<a href="javascript:;" class="xtx_search_cart sprites">
<i>2i>
a>
<div class="xtx_search_wrapper">
<input type="text" placeholder="搜一搜">
div>
div>
div>
div>
<div class="xtx_entry">
<div class="wrapper">
<div class="xtx_category">
<ul class="xtx_category_super">
<li>
<a href="javascript:;">
生鲜
<small>水果small>
<small>蔬菜small>
a>
<i class="sprites">i>
li>
<li class="active">
<a href="javascript:;">
美食
<small>面点small>
<small>干果small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
电器
<small>数码产品small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
居家
<small>床品small>
<small>四件套small>
<small>被枕small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
洗护
<small>洗发洗护small>
<small>美妆small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
孕婴
<small>奶粉small>
<small>玩具small>
<small>辅食small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
餐橱
<small>数码产品small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
服饰
<small>女装small>
<small>男装small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
杂货
<small>户外small>
<small>图书small>
a>
<i class="sprites">i>
li>
<li>
<a href="javascript:;">
品牌
<small>品牌制造small>
a>
<i class="sprites">i>
li>
ul>
<div class="xtx_category_subset">
div>
div>
<div class="xtx_banner">
<ul>
<li>
<a href="javascript:;">
<img src="./uploads/banner_1.png" alt="">
a>
li>
ul>
<a href="javascript:;" class="prev sprites">a>
<a href="javascript:;" class="next sprites">a>
<div class="indicator">
<span>span>
<span>span>
<span class="active">span>
<span>span>
<span>span>
div>
div>
div>
div>
<div class="xtx_goods_new xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>新鲜好物<small>新鲜出炉 品质靠谱small>h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
div>
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/new_goods_1.jpg" alt="">
<span class="name">睿米无线吸尘器F8span>
<span class="price"><small>￥small>899span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_2.jpg" alt="">
<span class="name">智能环绕3D空调span>
<span class="price"><small>￥small>1299span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_3.jpg" alt="">
<span class="name">广东软软糯米煲仔饭span>
<span class="price"><small>￥small>129span>
a>
<a href="javascript:;">
<img src="./uploads/new_goods_4.jpg" alt="">
<span class="name">罗西机械智能手表span>
<span class="price"><small>￥small>3399span>
a>
div>
div>
div>
<div class="xtx_goods_popular xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>人气推荐<small>人气爆款 不容错过small>h3>
div>
<div class="xtx_panel_goods_1">
<a href="javascript:;">
<img src="./uploads/popular_1.jpg">
<span class="title">特惠推荐span>
<span class="alt">我猜得到 你的需要span>
a>
<a href="./index-hot.html">
<img src="./uploads/popular_2.jpg">
<span class="title">爆款推荐span>
<span class="alt">人气好物推荐span>
a>
<a href="./index-one.html">
<img src="./uploads/popular_3.jpg">
<span class="title">场景使用一站买全span>
<span class="alt">编辑精心整理推荐span>
a>
<a href="javascript:;">
<img src="./uploads/popular_4.jpg">
<span class="title">领券中心span>
<span class="alt">发现更多超值优惠券span>
a>
div>
div>
div>
<div class="xtx_goods_brand xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>热门品牌<small>国际经典 品质保证small>h3>
<div class="page-bar">
<a href="javascript:;" class="prev sprites">a>
<a href="javascript:;" class="next sprites active">a>
div>
div>
<div class="xtx_goods">
<ul>
<li>
<a href="./index-brand.html">
<img src="./uploads/brand_goods_1.jpg" alt="">
a>
<a href="./brand-list.html">
<img src="./uploads/brand_goods_2.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_3.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_4.jpg" alt="">
a>
<a href="javascript:;">
<img src="./uploads/brand_goods_5.jpg" alt="">
a>
li>
ul>
div>
div>
div>
<div class="xtx_goods_category xtx_panel">
<div class="wrapper">
<div class="xtx_panel_header">
<h3>生鲜h3>
<a href="javascript:;" class="more">
查看全部<i class="sprites">i>
a>
<div class="tabs-bar">
<a href="javascript:;" class="active">水果a>
<a href="javascript:;">蔬菜a>
<a href="javascript:;">肉禽蛋a>
<a href="javascript:;">裤装a>
<a href="javascript:;">衬衫a>
<a href="javascript:;">内衣a>
div>
div>
<div class="xtx_panel_goods_2">
<ul class="clearfix">
<li>
<a href="javascript:;">
<img src="./uploads/fresh_goods_cover.jpg" alt="">
a>
<div class="label">
<span>生鲜馆span>
<span>全场3件8折span>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_1.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">美威 智利原味三文鱼排 240g/袋 4片装p>
<p class="flag">海鲜年货p>
<p class="price"><small>￥small>59p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_2.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">红功夫 麻辣小龙虾1.5kg 4-6钱/25-32只p>
<p class="flag">火锅食材p>
<p class="price"><small>￥small>71.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_3.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">三都港 冷冻无公害黄花鱼 700g 2条 袋装p>
<p class="flag">海鲜水产p>
<p class="price"><small>￥small>49.9p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_4.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">渔公码头 大连鲜食入味 即食海参 辽参刺参 调味海p>
<p class="flag">海鲜年货p>
<p class="price"><small>￥small>899p>
div>
<div class="extra">
<a href="javascript:;">
<span>找相似span>
<span>发现现多宝贝>span>
a>
div>
li>
<li>
<a href="javascript:;">
<div class="img-box">
<img src="./uploads/fresh_goods_5.jpg" alt="">
div>
a>
<div class="meta">
<p class="name">越南进口白心火龙果4个 装 标准果 单果400-550g p>
<p class="flag">p>