JavaScript内容回顾第十天
2024-05-11 03:07:56
内容回顾
一. 常见的事件
1.1. 鼠标事件
1.1.1. 常见的事件
click 当用户点击某个对象时调用的事件句柄。
contextmenu 在用户点击鼠标右键打开上下文菜单时触发
dblclick 当用户双击某个对象时调用的事件句柄。
mousedown 鼠标按钮被按下。
mouseup 鼠标按键被松开。
mouseover 鼠标移到某元素之上。（支持冒泡）
mouseout 鼠标从某元素移开。（支持冒泡）
mouseenter 当鼠标指针移动到元素上时触发。（不支持冒泡）
mouseleave 当鼠标指针移出元素时触发。（不支持冒泡）
mousemove 鼠标被移动
// 鼠标事件var boxEl = document.querySelector(".box")// boxEl.onclick = function() {// console.log("click事件")// }boxEl.oncontextmenu = function(e) {console.log("点击了右键")// 阻止默认行为e.preventDefault()}// 变量记录鼠标是否点下去var isDown = falseboxEl.onmousedown = function() {console.log("鼠标按下未被松开")isDown = true}boxEl.onmouseup = function() {console.log("鼠标按下已松开")isDown = false}boxEl.onmousemove = function() {if(isDown === true) {console.log("鼠标在div上面移动")}}
1.1.2. mouseenter和mouseover的区别
mouseenter和mouseleave一组
不支持冒泡
进入子元素依然属于该元素内, 没有任何反应
mouseover和mouseout一组
支持冒泡
进入元素的子元素时
先调用父元素的mouseout移出
在调用子元素的mouseover移入
因为支持冒泡, 所以会将mouseover移入传递到父元素中
var boxEl = document.querySelector(".box")var spanEl = document.querySelector("span")// 第一组 不支持冒泡// boxEl.onmouseenter = function() {// console.log("div移入")// }// boxEl.onmouseleave = function() {// console.log("di移出")// }// spanEl.onmouseenter = function() {// console.log("span移入")// }// spanEl.onmouseleave = function() {// console.log("span移出")// }// 第二组 支持冒泡boxEl.onmouseover = function() {console.log("div移入冒泡版")}boxEl.onmouseout = function() {console.log("div移出冒泡版")}
演练
.box {display: flex;width: 300px;height: 300px;}.box button {flex: 1;height: 50px;}
<div class="box"><button>删除</button><button>新增</button><button>搜索</button></div> // 方案一: 监听本身就是button元素var btnEls = document.querySelectorAll("button")for(var btnEl of btnEls) {btnEl.onmousemove = function(event) {console.log(event.target.textContent)}}// 方案二: 事件委托var boxEl = document.querySelector(".box")// mouseover可以事件委托, mouseenter不可以事件委托boxEl.onmouseover = function (e) {// 判断是否为button button为大写if (e.target.tagName === "BUTTON") {console.log(e.target.textContent)}}
1.2. 键盘事件
onkeydown 某个键盘按键被按下。
onkeypress 某个键盘按键被按下。
onkeyup 某个键盘按键被松开
事件的执行顺序是 onkeydown、onkeypress、onkeyup
down事件先发生；按下去那一刻
press发生在文本被输入；
up发生在文本输入完成；
我们可以通过key和code来区分按下的键：
code：“按键代码”（“KeyA”，“ArrowLeft” 等），特定于键盘上按键的物理位置。
key：字符（“A”，“a” 等），对于非字符（non-character）的按键，通常具有与 code 相同的值。）
区分key
- event.key/code
<input type="text"><button>搜索</button>
var inputEl = document.querySelector("input")var btnEl = document.querySelector("button")// inputEl.onkeydown = function() {// console.log("keydown")// }// inputEl.onkeypress = function() {// console.log("keypress")// }// inputEl.onkeyup = function() {// console.log("keyup")// }// 用户输入的到底是什么按键// inputEl.onkeydown = function(event) {// console.log(event.key, event.code)// }// 搜索功能btnEl.onclick = function() {console.log(inputEl.value)}inputEl.onkeyup = function(event) {if(event.code === "Enter") {console.log(inputEl.value)} }// 按下s自动获取焦点document.onkeyup = function(e) {// console.log("document", e.key, e.code)if(e.code === "KeyS") {// console.log("用户在网页中点击了s")// 调用这个方法就获取焦点了inputEl.focus()}}
1.3. 表单事件
onchange 该事件在表单元素的内容改变时触发( , , , 和 ) 失去焦点才触发
oninput 元素获取用户输入时触发
onfocus 元素获取焦点时触发
onblur 元素失去焦点时触发
onreset 表单重置时触发
onsubmit 表单提交时触发
<form action="/00_JavaScript的其他补充/01_代码风格-规范.html"><input type="text"><textarea name="" id="" cols="30" rows="10"></textarea><button type="reset">重置</button><button type="submit">提交</button>
</form>
// 1. 获取焦点和失去焦点inputEl.onfocus = function() {console.log("input获取了焦点")}inputEl.onblur = function() {console.log("input失去了焦点")}// 2. 内容发生改变/输入内容// 输入内容input// 内容确定发生改变(失去焦点) changeinputEl.oninput = function() {console.log("用户输入内容",inputEl.value)}inputEl.onchange = function() {console.log("用户发生改变")}// reset和submit重置和提交var formEl = document.querySelector("form")formEl.onreset = function(e) {console.log("用户重置")e.preventDefault()}formEl.onsubmit = function(e) {console.log("用户提交")e.preventDefault()}
1.4. 文档加载
- DOMContentLoaded
- HTML内容加载完毕,但是外部资源还没有加载完
- loaded
- HTML所有的内容(包括资源)
// 在上面的话修改不了hmtl元素, 上面还没有html// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// 注册事件监听window.addEventListener("DOMContentLoaded", function () {// 1. 这里可以操作box, box已经加载完毕// var boxEl = document.querySelector(".box")// boxEl.style.backgroundColor = "red"// 2. 获取img对应图片的宽度和高度var img = document.querySelector("img")console.log("图片的宽度和高度", img.offsetWidth, img.offsetHeight)})window.onload = function () {var boxEl = document.querySelector(".box")boxEl.style.backgroundColor = "red"}
补充:
resize事件: 窗口大小发生改变
window.onresize = function() {console.log("创建大小发生改变")}
二. window定时器
有时我们并不想立即执行一个函数，而是等待特定一段时间之后再执行，我们称之为**“计划调用（scheduling a call）”****。**
目前有两种方式可以实现：
setTimeout 允许我们将函数推迟到一段时间间隔之后再执行。
setInterval 允许我们重复运行一个函数，从一段时间间隔之后开始运行，之后以该时间间隔连续重复运行该函数。
并且通常情况下有提供对应的取消方法：
- clearTimeout：取消setTimeout的定时器；
- clearInterval：取消setInterval的定时器；
大多数运行环境都有内置的调度程序，并且提供了这些方法：
目前来讲，所有浏览器以及 Node.js 都支持这两个方法；
所以我们后续学习Node的时候，也可以在Node中使用它们；
setTimeout****的语法如下：
- func|code：想要执行的函数或代码字符串。
- 一般传入的都是函数，由于某些历史原因，支持传入代码字符串，但是不建议这样做；
delay：执行前的延时，以毫秒为单位（1000 毫秒 = 1 秒），默认值是 0；
arg1，arg2…：要传入被执行函数（或代码字符串）的参数列表；
- func|code：想要执行的函数或代码字符串。
clearTimeout****方法：
- setTimeout 在调用时会返回一个“定时器标识符（timer identifier）”，我们可以使用它来取消执行。
setInterval 方法和 setTimeout 的语法相同：
所有参数的意义也是相同的；
不过与 setTimeout 只执行一次不同，setInterval 是每间隔给定的时间周期性执行；
clearInterval方法：
- setInterval也会返回一个“定时器标识符（timer identifier）”，我们可以通过clearInterval来取消这个定时器。
关于定时器还有一些宏任务相关的概念，我们会在JavaScript高级中讲解
function foo(name, age, height) {console.log('-----', name, age, height)}var time = setTimeout(foo, 2000 , "why", 18, 1.88)// 取消定时器var btn = document.querySelector(".out")btn.onclick = function() {clearTimeout(time)}// setIntervalfunction bar() {console.log("bar被调用")}var interval = setInterval(bar, 2000) // 取消定时器var btnEl = document.querySelector(".val")btnEl.onclick = function() {clearInterval(interval)}三. 案例实战
3.1. 轮动切换消息
- currentIndex
.tip-bar {display: inline-flex;flex-direction: row;align-items: center;height: 30px;background-color: rgba(0, 0, 0, .4);border-radius: 16px;}img {width: 30px;height: 30px;border-radius: 50%;margin-right: 5px;}span {font-size: 13px;color: white;margin-right: 8px;}
<div class="tip-bar"><img src="https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png" alt=""><span>183***138对这件商品感兴趣</span></div>
// 1. 从服务器拿到数据ajax请求/fetch请求 但是学fetch要学promise请求let tipList = [{icon: 'https://bfs.biyao.com/group1/M01/A6/97/rBACYWBCHqyAFH5tAAANZXX5Eww646.png',title: 'coderwhy对这件商品感兴趣'},{icon: 'https://bfs.biyao.com/group1/M01/A2/67/rBACVGA_iOuAYaTxAAAPbted3yE165.png',title: '123***814对这件商品感兴趣'},{icon: 'https://bfs.biyao.com/group1/M00/7F/4E/rBACYV16HseAP-PnAAAW9bbVoKE463.png',title: '刘军对这件商品感兴趣'}]// 2. 动态切换数据// 2.1 获取元素var tipBar = document.querySelector(".tip-bar")var imgEl = tipBar.querySelector("img")var spanEl = tipBar.querySelector("span")// 2.2 3s切换一次数据// 创建一个索引为0的变量, 记录当前展示到索引内容var currentIndex = 0setInterval(function() {// 根据索引获取内容var tipItem = tipList[currentIndex]// 设置内容// 让这个图片数据添加到img上面imgEl.src = tipItem.icon// 让这个文字数据添加到span里面spanEl.textContent = tipItem.title// 让每次索引值加1, 让图片文字每次增加一currentIndex++// 判断如果数据为最后一个就变成0从头开始轮播if(currentIndex === tipList.length) {currentIndex = 0}}, 3000)// 随机图片需要的代码// var item = Math.floor(Math.random() * tipList.length)
3.2. 关闭M站头部
- 关闭执行动画
- 监听动画结束
.top-bar {display: flex;flex-direction: row;align-items: center;height: 45px;width: 375px;background-color: black;/* 关键 */overflow: hidden;transition: all .3s ease-out;}.delete {display: flex;flex-direction: row;justify-content: center;align-items: center;height: 100%;width: 30px;cursor: pointer;}.delete img {height: 10px;width: 10px;}.logo {height: 30px;width: 30px;margin-left: 3px;margin-right: 30px;cursor: pointer;}span {color: white;font-size: 14px;flex: 1;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}.btn {width: 94px;height: 100%;line-height: 45px;text-align: center;font-size: 14px;color: #fff;background-color: #F63515;}
<div class="top-bar"><div class="delete"><img src="./img/delete.png" alt=""></div><img class="logo" src="./img/logo.png" alt=""><span>打开京东App,购物更轻松</span><div class="btn">立即打开</div></div>
// 1. 获取元素var topBar = document.querySelector(".top-bar") var deleteEl = topBar.querySelector(".delete")// 2. 监听delete// deleteEl.onclick = function() {// 直接消失// topBar.remove()// }deleteEl.onclick = function() {topBar.style.height = 0// 方案一: 并不好// setTimeout(function() {// topBar.remove()// }, 300)}// 监听动画执行结束transitiontopBar.ontransitionend = function() {// console.log("动画执行结束")// 移除掉topBartopBar.remove()}
3.3. 侧边栏展示
- for循环设置backgroundPosition
- 内容的动画
- 方案一: mouseenter
- 方案二: mouseover
- 拿到item不太容易
.tool-bar {position: fixed;top: 30%;right: 0;display: flex;flex-direction: column;align-items: center;width: 35px;}.item {position: relative;width: 35px;height: 35px;margin-bottom: 1px;background-color: #7a6e6e;border-radius: 3px 0 0 3px;}.icon {display: inline-block;width: 100%;height: 100%;cursor: pointer;background-image: url(./img/toolbars.png);}/* .icon01 {background-position: -48px 0;}.icon02 {background-position: -48px -50px;}.icon03 {background-position: -48px -100px;}.icon04 {background-position: -48px -150px;} */.name {position: absolute;z-index: -1;right: 35px;top: 0;width: 0;height: 35px;line-height: 35px;color: #fff;text-align: center;font-size: 12px;background-color: #7a6e6e;cursor: pointer;border-radius: 3px 0 0 3px;transition: width .2s ease;}.item:hover,.item:hover .name {background-color: #cd1926;}
<div class="tool-bar"><div class="item"><i class="icon icon01"></i><div class="name">购物车</div></div><div class="item"><i class="icon icon02"></i><div class="name">收藏</div></div><div class="item"><i class="icon icon03"></i><div class="name">限时活动</div></div><div class="item"><i class="icon icon04"></i><div class="name">大礼包</div></div></div>
// 1. 动态给icon设置backgroundPositionvar iconEls = document.querySelectorAll(".icon")for (var i = 0; i < iconEls.length; i++) {var iconEl = iconEls[i]iconEl.style.backgroundPosition = `-48px -${50 * i}px`}// 2. 实现鼠标进入动画// 方案一: mouseenter(不冒泡 不能使用事件委托)var itemEls = document.querySelectorAll(".item")for (var itemEls of itemEls) {itemEls.onmouseenter = function(e) {// this也可以// console.log(e.target)// var nameEl = this.children[1]var nameEl = this.querySelector(".name")// console.log(nameEl)nameEl.style.width = "62px"}itemEls.onmouseleave = function() {var nameEl = this.querySelector(".name")nameEl.style.width = "0 "}}// 方案二: mouseover(冒泡 能使用事件委托) 比较麻烦var toolbarEl = document.querySelector(".tool-bar")toolbarEl.onmouseover = function (e) {// if (e.target !== toolbarEl) {// var itemEl = e.target.classList.contains("item") ? e.target : e.target.parentElement// // console.log(itemEl)// var nameEl = itemEl.children[1]// nameEl.style.width = "62px"// }handleMouseEvent(e, 62)}toolbarEl.onmouseout = function (e) {// if (e.target !== toolbarEl) {// var itemEl = e.target.classList.contains("item") ? e.target : e.target.parentElement// // console.log(itemEl)// var nameEl = itemEl.children[1]// nameEl.style.width = "0"// }handleMouseEvent(e, 0)}// 封装代码function handleMouseEvent(e, width) {if (e.target !== toolbarEl) {// 三元运算符方法// var itemEl = e.target.classList.contains("item") ? e.target : e.target.parentElement// if判断方法// 获取唯一的itemvar itemEl = nullif(e.target.classList.contains("item")) {itemEl = e.target} else {itemEl = e.target.parentElement}// 根据item获取nameElementvar nameEl = itemEl.children[1]// 设置宽度nameEl.style.width = width + "px"}}
3.4. tabControl的切换
<div class="main main_wrapper"><div class="section-content"><div class="left-content"><div class="content-center"><div class="section_header"><div class="header_left"><h3 class="title">内容中心</h3></div><div class="header_right" href="#"><a class="more" href="#">更多</a></div></div><div class="tab_control"><div class="item active">精品栏目</div><div class="line"></div><div class="item">赛事精品</div><div class="line"></div><div class="item">英雄攻略</div></div></div></div></div>
// 1. 获取元素var tabControl = document.querySelector(".tab_control")// 2. 监听鼠标进入(事件委托)var activeLiEl = tabControl.querySelector(".active")tabControl.onmouseover = function(event) {// console.log(event.target)// 1. 拿到事件发生的对象var itemEl = event.targetif(itemEl.classList.contains("item")) {// 其他的取消active// 1. for循环所有的item// 2. querySelector(".active")// 3. 记录当前的active对应的itemactiveLiEl.classList.remove("active")// 当前进入的item变成activeitemEl.classList.add("active")// 将最新的itemEl变成activeLiElactiveLiEl = itemEl}}
3.5. 王者轮播图的实现
- titleList的切换
- titleList的切换切换上面图片
未实现功能:
- 自动轮播
- 间隔多个title之间的切换, 不要有跳跃的效果
.main {height: 100px;}.news-section {display: flex;height: 342px;}.news-section .banner {width: 605px;background-color: #000;overflow: hidden;}.news-section .banner .image-list {display: flex;width: 604px;/* overflow: hidden; */}.news-section .banner .image-list .item {flex-shrink: 0;width: 100%;}.news-section .banner .image-list .item a {display: block;}.news-section .banner .image-list .item a img {width: 100%;}.news-section .banner .title-list {display: flex;height: 44px;line-height: 44px;}.news-section .banner .title-list .item {flex: 1;text-align: center;}.news-section .banner .title-list .item a {display: block;font-size: 14px;color: #b1b2be;}.news-section .banner .title-list .item.active a,.news-section .banner .title-list .item a:hover {color: #f3c258;background-color: rgba(255, 255, 255, .15);}.news-section .news {flex: 1;background-color: purple;}.news-section .download {width: 236px;background-color: skyblue;}.news-section .download a {display: block;background: url(./img/main_sprite.png) no-repeat;}.news-section .download a.download-btn {height: 128px;background-position: 0 -219px;}.news-section .download a.guard-btn {height: 106px;background-position: 0 -350px;}.news-section .download a.experience-btn {height: 108px;background-position: 0 -461px;}
<div class="main main_wrapper"><div class="news-section"><div class="banner"><ul class="image-list"><li class="item"><a href=""><img src="./img/banner_01.jpeg" alt=""></a></li><li class="item"><a href=""><img src="./img/banner_02.jpeg" alt=""></a></li><li class="item"><a href=""><img src="./img/banner_03.jpeg" alt=""></a></li><li class="item"><a href=""><img src="./img/banner_04.jpeg" alt=""></a></li><li class="item"><a href=""><img src="./img/banner_05.jpeg" alt=""></a></li></ul><ul class="title-list"><li class="item active"><a href="#">桑启的旅途故事</a></li><li class="item"><a href="#">启示之音抢先听</a></li><li class="item"><a href="#">谁成为版本之子</a></li><li class="item"><a href="#">观赛体验升级</a></li><li class="item"><a href="#">季后赛开战</a></li></ul></div><div class="news"></div><div class="download"><a class="download-btn" href="#"></a><a class="guard-btn" href="#"></a><a class="experience-btn" href="#"></a></div></div></div>
// 1. 获取元素var titleListEl = document.querySelector(".title-list")var activeEl = document.querySelector(".active")var imageListEl = document.querySelector(".image-list")// 2. 底部切换, 同时进行轮播titleListEl.onmouseover = function(event) {// 1.1 确定鼠标进入的元素var itemEl = event.target.parentElementif(!itemEl.classList.contains("item")) return// 1.2 移除之前的activeactiveEl.classList.remove("active")// 1.3 将active添加到鼠标进入的元素itemEl.classList.add("active")// 1.4 让activeEl指向最新的元素activeEl = itemEl// 1.5 移动对应的imageListEl// 1.51. 获取item所在的索引for (var i = 0; i < titleListEl.children.length; i++) {if(titleListEl.children[i] === itemEl) break}// 上面for循环 , 下面这个都可以用// var i = Array.from(titleListEl.children).findIndex(function(item) {// return item === itemEl// })imageListEl.style.transform = `translateX(${-604 * i}px)`imageListEl.style.transition = `all 300ms ease`}
3.6 登录框的实现
.title{width: 304px;text-align: center;margin-bottom: -15px;}.error {display: flex;flex-direction: row;align-items: center;width: 304px;margin-top: 15px;margin-bottom: 8px;padding: 5px 0;background: #ffebeb;color: #e4393c;border: 1px solid #faccc6;}.hidden{visibility: hidden;}.err-icon {display: inline-block;width: 16px;height: 16px;margin-left: 10px;background: url(./img/css_sprites.png) no-repeat -114px -59px;}.err-msg {margin-left: 10px;margin-right: 10px;font-size: 12px;}.user-item,.password-item {display: flex;flex-direction: row;width: 304px;height: 38px;border: 1px solid #bdbdbd;position: relative;margin-bottom: 15px;}.user-icon,.pwd-icon {width: 38px;height: 38px;border-right: 1px solid #bdbdbd;background-image: url(./img/css_sprites.png);background-position: -58px -10px;}.user-icon {background-position: -10px -10px;}input {outline: none;border: none;flex: 1;padding: 10px 0 10px 12px;font-size: 14px;}.eye-icon {position: absolute;right: 27px;top: 15px; width: 25px;height: 15px;background: url(./img/css_sprites.png) -152px -18px no-repeat;cursor: pointer;}.u-clear,.p-clear {position: absolute;right: 6px;top: 12px;width: 14px;height: 14px;background: url(./img/css_sprites.png) -36px -154px no-repeat;cursor: pointer;}.u-clear:hover,.clear:hover {background: url(./img/css_sprites.png) -61px -154px no-repeat;}.login {border: 1px solid #cb2a2d;height: 32px;width: 304px;line-height: 32px;text-align: center;margin-top: 20px;color: white;font-size: 20px;letter-spacing: 6px;cursor: pointer;background: #e4393c;}.login:hover {background-color: #e4393ccc;}
<h2 class="title">登录页面</h2><!-- 提示文本 --><div class="error hidden"><i class="err-icon"></i><span class="err-msg">用户名或密码不能为空</span></div><!-- 用户名 --><div class="user-item"><label for="username" class="user-icon"></label><input id="username" type="username" placeholder="邮箱/用户名/登录手机"><span class="u-clear"></span></div><!-- 密码 --><div class="password-item"><label for="password" class="pwd-icon"></label><input id="password" type="password" placeholder="密码"><span class="eye-icon"></span><span class="p-clear"></span></div><!-- 登录 --><div class="login">登录</div>
// 1.获取元素var userInputEl = document.querySelector("#username")var pwdInputEl = document.querySelector("#password")var userClearEl = document.querySelector(".u-clear")var pwdClearEl = document.querySelector(".p-clear")var eyeIconEl = document.querySelector(".eye-icon")var loginBtnEl = document.querySelector(".login")var errorEl = document.querySelector(".error")// 2.监听事件userClearEl.onclick = function() {if (userInputEl.value) userInputEl.value = ""}pwdClearEl.onclick = function() {if (pwdInputEl.value) pwdInputEl.value = ""}var showPassword = trueeyeIconEl.onclick = function() {showPassword = !showPasswordpwdInputEl.type = showPassword ? "password": "text"eyeIconEl.style.backgroundPosition = showPassword ? '-152px -18px': '-150px -60px'eyeIconEl.style.top = showPassword ? '15px': "13px"}loginBtnEl.onclick = function() {var username = userInputEl.valuevar password = pwdInputEl.valueif (!username || !password) {errorEl.classList.remove("hidden")} else {errorEl.classList.add("hidden")alert("登录成功")}}
3.6书籍管理的实现
table {border-collapse: collapse;}thead {background-color: #f5f5f5;}td, th {border: 1px solid #ddd;padding: 8px 15px;text-align: center;}
<table><thead><tr><th>编号</th><th>书籍名词</th><th>出版日期</th><th>价格</th><th>购买数量</th><th>操作</th></tr></thead><tbody></tbody></table><h2>总价格: <span class="total-price"></span> </h2>
var books = [{id: 1,name: '《算法导论》',date: '2006-09',price: 85.00,count: 3},{id: 2,name: '《UNIX编程艺术》',date: '2006-02',price: 59.00,count: 2},{id: 3,name: '《编程珠玑》',date: '2008-10',price: 39.00,count: 5},{id: 4,name: '《代码大全》',date: '2006-03',price: 128.00,count: 8},]// 1.获取元素var tbodyEl = document.getElementsByTagName("tbody")[0]var totalPriceEl = document.querySelector(".total-price")// 2.遍历booksfor (var i = 0; i < books.length; i++) {// 1.创建trvar trEl = document.createElement("tr")// 2.遍历对象的内容var book = books[i]for (var key in book) {var bookTdEl = document.createElement("td")var textContent = book[key]if (key === "price") {textContent = "¥" + textContent}bookTdEl.textContent = textContenttrEl.append(bookTdEl)}// 4.操作的元素var checkTdEl = document.createElement("td")var checkboxEl = document.createElement("input")checkboxEl.type = "button"checkboxEl.value = "删除"checkboxEl.onclick = function() {var trEl = this.parentElement.parentElementvar index = trEl.sectionRowIndextrEl.remove()books.splice(index, 1)calcTotalPrice()}checkTdEl.append(checkboxEl)trEl.append(checkTdEl)tbodyEl.append(trEl)}function calcTotalPrice() {console.log(books)var totalPrice = books.reduce(function(preValue, item) {return preValue + item.price * item.count}, 0)totalPriceEl.textContent = "¥" + totalPrice}calcTotalPrice()
JavaScript内容回顾第十天相关推荐
- JavaScript学习（三十九）—对象中内容的操作
JavaScript学习(三十九)-对象中内容的操作 一.对象中内容的操作:增.删.改.查 (一).增:给对象添加属性或者方法 1)方式1:对象名称.属性名=属性值: 2)方式2:对象名称['属性名' ...
- Javascript基础回顾 之(一) 类型
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- Javascript基础回顾 之(二) 作用域
本来是要继续由浅入深表达式系列最后一篇的,但是最近团队突然就忙起来了,从来没有过的忙!不过喜欢表达式的朋友请放心,已经在写了:) 在工作当中发现大家对Javascript的一些基本原理普遍存在这里或者 ...
- JavaScript学习（八十二）—JavaScript的组成
JavaScript学习(八十二)-JavaScript的组成 一.ECMAScript ECMAScript是由ECMA国际(原欧洲计算机制造商协会)进行标准化的一门编程语言,这种语言在万维网上应用 ...
- JavaScript学习（七十六）—this的指向问题
JavaScript学习(七十六)-this的指向问题 在文档中(全局环境中)直接使用this,代表的是window 在HTML事件处理程序中,如果将this作为实参传递给事件处理函数,this代表的 ...
- JavaScript学习（六十八）—表单校验案例
JavaScript学习(六十八)-表单校验案例 学习内容 (一).如何获取页面的元素-利用id获取 格式:var 变量名称 =document.getElementById('要获取的元素的id的值 ...
- JavaScript学习（六十六）—字符串对象常用的属性和方法总结以及数组元素的排序问题
JavaScript学习(六十六)-字符串对象常用的属性和方法总结以及数组元素的排序问题 学习内容 一.数组去重问题 二.二维数组的定义 三.二维数组的元素操作 四.二维数组的遍历 五.关联数组 六. ...
- JavaScript学习（六十五）—数组知识点总结
JavaScript学习(六十五)-数组 学习内容 一.什么是数组 二.数组的分类 三.数组的创建方式 四.数组元素 五.数组的操作 六.数组元素遍历的四种方法 七.随机数为数组赋值 八.数组的比较 ...
- JavaScript学习（五十六）—寄生式继承（临时构造器的使用）
JavaScript学习(五十六)-寄生式继承(临时构造器的使用) 寄生式继承(临时构造器的使用): 之所以要使用临时构造器就是要在实现原型链继承时获取上级构造方法原型中的内容,而不要它的私有属性 默 ...
最新文章
- sqlserver生成脚本
- 【复杂系统迁移 .NET Core平台系列】之调度服务改造
- Android之Caused by: java.lang.IllegalArgumentException: Failed to find configured root that contains
- vim 常用快捷键总结
- python绘制折线图显示数据_漂亮图表也可用python信手拈来！一文教你学会用Python绘制堆积折线图...
- tomcat：sessionId生成机制导致tomcat启动过慢问题
- 数易云备开启虚拟机备份新时代
- 使用SQLSERVER的扩展存储过程实现远程备份与恢复
- 汉化破解：购买WinRAR许可爆破
- 《Windows安全机制》之DEP(数据执行保护)
- 如何清除redis缓存
- web前端大作业 (仿英雄联盟网站制作html css javascript) 学生dreamweaver网页设计作业
- java我们一起打雪仗_我们一起打雪仗四年级作文
- 畜牧业的产业升级技术
- EXCEL中，不能调整行高。当把行高拉到409的时候就不能再拉高了，是什么原因？
- 睡觉少对孩子影响很大肚子变胖记忆受损
- html5 xdwlnjs cn,最近需要调用一个网站的js，但是发现是加密的，有大佬来解密下吗？...
- 瑞星升级包 下载网站
- 如何取消wow3.0后与服务器设置的同步（设置、键位、宏）
- 海康萤石摄像头本地局域网拉流保存