js键盘弹起事件
JavaScript实现弹出窗口效果
JavaScript实现弹出窗⼝效果本⽂实例为⼤家分享了JavaScript实现弹出窗⼝的具体代码，供⼤家参考，具体内容如下思路1、总体使⽤两个div，⼀个作为底层展⽰，⼀个做为弹出窗⼝；2、两个窗⼝独⽴进⾏CSS设计，通过display属性进⾏设置现实与隐藏，此处建议使⽤display属性⽽不是visibility属性，visibility:hidden可以隐藏某个元素，但隐藏的元素仍需占⽤与未隐藏之前⼀样的空间，影响布局；3、在js内设计两个onclick事件，分别指定函数，分别为开启弹窗和关闭弹窗。
⼀、设置两个div<html><title>弹出窗⼝</title><head><meta charset="UTF-8"></head><body>// 底层div<div id="popLayer"></div>// 弹出层div<div id="popDiv"></div></body></html>⼆、对两个div进⾏独⽴CSS设置，弹出窗⼝display设为none<html><title>弹出窗⼝</title><head><meta charset="UTF-8"><style type="text/css">body{background-color: cyan;}#popDiv{display: none;background-color: crimson;z-index: 11;width: 600px;height: 600px;position:fixed;top:0;right:0;left:0;bottom:0;margin:auto;}</style></head><body>// 底层div<div id="popLayer"><button onclick="">弹窗</button></div>// 弹出层div<div id="popDiv"><div class="close">// 关闭按钮超链接<a href="" onclick="">关闭</a></div><p>此处为弹出窗⼝</p></div></body></html>三、定义并设置弹出按钮和关闭窗⼝函数<script type="text/javascript">function popDiv(){// 获取div元素var popBox = document.getElementById("popDiv");var popLayer = document.getElementById("popLayer"); // 控制两个div的显⽰与隐藏popBox.style.display = "block";popLayer.style.display = "block";}function closePop(){// 获取弹出窗⼝元素let popDiv = document.getElementById("popDiv");popDiv.style.display = "none";}</script>四、将函数设置到onclick事件中<button onclick="popDiv();">弹窗</button><a href="javascript:void(0)" onclick="closePop()">关闭</a>五、设置关闭链接CSS和pop界⾯的其余CSS<style type="text/css">/* 关闭链接样式 */#popDiv .close a {text-decoration: none;color: #2D2C3B;}/* 弹出界⾯的关闭链接 */#popDiv .close{text-align: right;margin-right: 5px;background-color: #F8F8F8;}#popDiv p{text-align: center;font-size: 25px;font-weight: bold;}</style>六、整体代码<html><title>弹出窗⼝</title><head><meta charset="UTF-8"><script type="text/javascript">function popDiv(){// 获取div元素var popBox = document.getElementById("popDiv");var popLayer = document.getElementById("popLayer"); // 控制两个div的显⽰与隐藏popBox.style.display = "block";popLayer.style.display = "block";}function closePop(){// 获取弹出窗⼝元素let popDiv = document.getElementById("popDiv");popDiv.style.display = "none";}</script><style type="text/css">body{background-color: cyan;}#popDiv{display: none;background-color: crimson;z-index: 11;width: 600px;height: 600px;position:fixed;top:0;right:0;left:0;bottom:0;margin:auto;}/* 关闭按钮样式 */#popDiv .close a {text-decoration: none;color: #2D2C3B;}/* 弹出界⾯的关闭按钮 */#popDiv .close{text-align: right;margin-right: 5px;background-color: #F8F8F8;}#popDiv p{text-align: center;font-size: 25px;font-weight: bold;}</style></head><body><div id="popLayer"><button onclick="popDiv();">弹窗</button></div><div id="popDiv"><div class="close"><a href="javascript:void(0)" onclick="closePop()">关闭</a></div><p>此处为弹出窗⼝</p></div></body></html>以上就是本⽂的全部内容，希望对⼤家的学习有所帮助，也希望⼤家多多⽀持。
vue.js键盘enter事件的使用
vue.js键盘enter事件的使⽤在监听键盘事件时，我们经常需要检查常见的键值。
Vue 允许为v-on在监听键盘事件时添加按键修饰符：<!-- 只有在 `keyCode` 是 13 时调⽤ `vm.submit()` --><input v-on:keyup.13="submit">记住所有的keyCode⽐较困难，所以 Vue 为最常⽤的按键提供了别名：<!-- 同上 --><input v-on:keyup.enter="submit"><!-- 缩写语法 --><input @keyup.enter="submit">在使⽤过程中，如果页⾯只针对⼀个Input添加键盘enter事件，可以直接按照官⽅⽂档定义的别名增加相应事件就可以了但是如果是要对页⾯的button添加enter键盘事件，就不能写在input或者button上，因为获取不到焦点，这时候可以直接写在created⾥，如下：<template><div class="form-inline col-sm-12">// 错误写法：这么写没有⽣效<input class="form-control search-input" type="search" placeholder="输⼊⽤户名进⾏搜索" aria-label="Search" maxlength="32" v-model.trim="search_value" @keyup.enter="enterSearchMember"><button class="btn btn-primary btn-sch" type="button" @click="goSearch">搜索</button></div></template><script>export default {name: 'searchMember',data() {return {search_value: ''}},//不能直接将事件添加写在input上，因为这样必须焦点在input上才能触发，所以可以直接绑定在document上即可created() {var lett = this;document.onkeydown = function(e) {var key = window.event.keyCode;if (key == 13) {lett.enterSearchMember();}}},methods: {goSearch: function() {let search_nick = this.search_value;if (search_nick !== 0) {this.$emit('searchMember', search_nick)}},enterSearchMember() {this.goSearch()}}}</script>补充⼀个问题：当我们对input添加enter键盘事件后，点击enter页⾯会刷新，可能是因为你把input写在了form⾥，form会⾃动提交⼀次，页⾯就是⼀个刷新的效果，这样体验并不好解决办法：1、去掉form2、如果⾮得⽤表单，只要不让表单⾥有且只有⼀个⽂本框就OK了3、在表单 form 后⾯加上⼀个 onsubmit 事件，返回 false，来阻⽌ form 提交vue全部的按键别名：.enter.tab.delete (捕获“删除”和“退格”键).esc.space.up.down.left.right。
js触发事件大全
js 触发事件大全事件浏览器支持解说一般事件onclick IE3、N2 鼠标点击时触发此事件ondblclick IE4、N4 鼠标双击时触发此事件onmousedown IE4、N4 按下鼠标时触发此事件onmouseup IE4、N4 鼠标按下后松开鼠标时触发此事件onmouseover IE3、N2 当鼠标移动到某对象范围的上方时触发此事件onmousemove IE4、N4 鼠标移动时触发此事件onmouseout IE4、N3 当鼠标离开某对象范围时触发此事件onkeypress IE4、N4 当键盘上的某个键被按下并且释放时触发此事件.onkeydown IE4、N4 当键盘上某个按键被按下时触发此事件onkeyup IE4、N4 当键盘上某个按键被按放开时触发此事件页面相关事件onabort IE4、N3 图片在下载时被用户中断onbeforeunload IE4、N 当前页面的内容将要被改变时触发此事件onerror IE4、N3 出现错误时触发此事件onload IE3、N2 页面内容完成时触发此事件onmove IE、N4 浏览器的窗口被移动时触发此事件onresize IE4、N4 当浏览器的窗口大小被改变时触发此事件onscroll IE4、N 浏览器的滚动条位置发生变化时触发此事件onstop IE5、N 浏览器的停止按钮被按下时触发此事件或者正在下载的文件被中断onunload IE3、N2 当前页面将被改变时触发此事件表单相关事件onblur IE3、N2 当前元素失去焦点时触发此事件onchange IE3、N2 当前元素失去焦点并且元素的内容发生改变而触发此事件onfocus IE3 、N2 当某个元素获得焦点时触发此事件onreset IE4 、N3 当表单中RESET的属性被激发时触发此事件onsubmit IE3 、N2 一个表单被递交时触发此事件滚动字幕事件onbounce IE4、N 在Marquee内的内容移动至Marquee显示范围之外时触发此事件onfinish IE4、N 当Marquee元素完成需要显示的内容后触发此事件onstart IE4、 N 当Marquee元素开始显示内容时触发此事件编辑事件onbeforecopy IE5、N 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发此事件onbeforecut IE5、 N 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴板时触发此事件onbeforeeditfocusIE5、N 当前元素将要进入编辑状态onbeforepaste IE5、 N 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发此事件onbeforeupdate IE5、 N 当浏览者粘贴系统剪贴板中的内容时通知目标对象oncontextmenu IE5、N 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件oncopy IE5、N 当页面当前的被选择内容被复制后触发此事件oncut IE5、N 当页面当前的被选择内容被剪切时触发此事件ondrag IE5、N 当某个对象被拖动时触发此事件 [活动事件]ondragdrop IE、N4 一个外部对象被鼠标拖进当前窗口或者帧ondragend IE5、N 当鼠标拖动结束时触发此事件，即鼠标的按钮被释放了ondragenter IE5、N 当对象被鼠标拖动的对象进入其容器范围内时触发此事件ondragleave IE5、N 当对象被鼠标拖动的对象离开其容器范围内时触发此事件ondragover IE5、N 当某被拖动的对象在另一对象容器范围内拖动时触发此事件ondragstart IE4、N 当某对象将被拖动时触发此事件ondrop IE5、N 在一个拖动过程中，释放鼠标键时触发此事件onlosecapture IE5、N 当元素失去鼠标移动所形成的选择焦点时触发此事件onpaste IE5、N 当内容被粘贴时触发此事件onselect IE4、N 当文本内容被选择时的事件onselectstart IE4、N 当文本内容选择将开始发生时触发的事件数据绑定onafterupdate IE4、N 当数据完成由数据源到对象的传送时触发此事件oncellchange IE5、N 当数据来源发生变化时ondataavailable IE4、N 当数据接收完成时触发事件ondatasetchanged IE4、N 数据在数据源发生变化时触发的事件ondatasetcomplete IE4、N 当来子数据源的全部有效数据读取完毕时触发此事件onerrorupdate IE4、N 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件onrowenter IE5、N 当前数据源的数据发生变化并且有新的有效数据时触发的事件onrowexit IE5、N 当前数据源的数据将要发生变化时触发的事件onrowsdelete IE5、N 当前数据记录将被删除时触发此事件onrowsinserted IE5、N 当前数据源将要插入新数据记录时触发此事件外部事件onafterprint IE5、N 当文档被打印后触发此事件onbeforeprint IE5、N 当文档即将打印时触发此事件onfilterchange IE4、N 当某个对象的滤镜效果发生变化时触发的事件onhelp IE4、N 当浏览者按下F1或者浏览器的帮助选择时触发此事件onpropertychange IE5、N 当对象的属性之一发生变化时触发此事件onreadystatechangeIE4、N 当对象的初始化属性值发生变化时触发此事件。
js鼠标按键事件和键盘按键事件用法实例汇总
js⿏标按键事件和键盘按键事件⽤法实例汇总本⽂实例讲述了js⿏标按键事件和键盘按键事件⽤法。
分享给⼤家供⼤家参考，具体如下：keydown,keyup，keypress：属于你的键盘按键mousedown,mouseup：属于你的⿏标按键当按钮被按下时，发⽣ keydown 事件,keyup是在⽤户将按键抬起的时候才会触发的,完整的 key press 过程分为两个部分：1. 按键被按下；2. 按键被松开。
当⽤户在这个元素上按下⿏标键的时候，发⽣mousedown当⽤户在这个元素上松开⿏标键的时候，发⽣mouseup例⼦1. ⿏标的哪个按键被点击<html><head><script type="text/javascript">function whichButton(event){if (event.button==2){alert("你点击了⿏标右键!")}else{alert("你点击了⿏标左键!")}}</script></head><body onmousedown="whichButton(event)"><p>请单击你⿏标的左键或右键试试</p></body></html>2. 当前⿏标的光标坐标是多少<html><head><script type="text/javascript">function show_coords(event){x=event.clientXy=event.clientYalert("X 坐标： " + x + ", Y 坐标： " + y)}</script></head><body onmousedown="show_coords(event)"><p>在此⽂档中按下你⿏标的左键看看！</p></body></html>3. 被按下键的unicode码是多少<html><head><script type="text/javascript">function whichButton(event){alert(event.keyCode)}</script><body onkeyup="whichButton(event)"><p>在此⽂档中按下你键盘上的某个键看看</p></body></html>4. 当前⿏标的光标相对于屏幕的坐标是多少<html><head><script type="text/javascript">function coordinates(event){x=event.screenXy=event.screenYalert("X=" + x + " Y=" + y)}</script></head><body onmousedown="coordinates(event)"><p>点击你⿏标的左键</p></body></html>5. 当前⿏标的光标坐标是多少<html><head><script type="text/javascript">function coordinates(event){x=event.xy=event.yalert("X=" + x + " Y=" + y)}</script></head><body onmousedown="coordinates(event)"><p>点击你⿏标的左键</p></body></html>6. shift键是否按下<html><head><script type="text/javascript">function isKeyPressed(event){if (event.shiftKey==1){alert("shit键按下了!")}else{alert("shit键没有按下!")}}</script></head><body onmousedown="isKeyPressed(event)"><p>按下shit键，点击你⿏标的左键</p></body></html>7. 当前被点击的是哪⼀个元素<html><script type="text/javascript">function whichElement(e){var targif (!e) var e = window.eventif (e.target) targ = e.targetelse if (e.srcElement) targ = e.srcElementif (targ.nodeType == 3) // defeat Safari bugtarg = targ.parentNodevar tnametname=targ.tagNamealert("你点击了 " + tname + "元素")}</script></head><body onmousedown="whichElement(event)"><p>在这⾥点击看看，这⾥是p</p><h3>或者点击这⾥也可以呀，这⾥是h3</h3><p>你想点我吗？？</p><img border="0" src="../myCode/btn.gif" width="100" height="26" alt="pic"></body></html>PS：这⾥再为⼤家提供⼀个关于JS事件的在线⼯具，归纳总结了JS常⽤的事件类型与函数功能：javascript事件与功能说明⼤全：更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《》、《》、《》、《》、《》、《》、《》、《》及《》希望本⽂所述对⼤家JavaScript程序设计有所帮助。
js keyboardevent 例子
js keyboardevent 例子JS KeyboardEvent 是 JavaScript 中的一个事件对象，用于处理与键盘相关的事件。
它提供了许多属性和方法，以便我们可以获取和操作键盘事件的相关信息。
下面列举了10个关于JS KeyboardEvent 的例子，以帮助读者更好地理解和使用这个事件对象。
1. 获取键盘事件的键值```javascriptdocument.addEventListener('keydown', function(event) {console.log(event.key);});```这个例子展示了如何通过 KeyboardEvent 的 key 属性来获取键盘事件的键值。
当用户按下键盘上的任意键时，会在控制台输出对应的键值。
2. 判断是否按下了某个特定的键```javascriptdocument.addEventListener('keydown', function(event) {if (event.key === 'Enter') {console.log('Enter键被按下');}});```这个例子演示了如何使用 KeyboardEvent 的 key 属性来判断用户是否按下了 Enter 键。
当用户按下 Enter 键时，会在控制台输出相应的信息。
3. 获取键盘事件的修饰键状态```javascriptdocument.addEventListener('keydown', function(event) {console.log('Shift键是否按下：', event.shiftKey);console.log('Ctrl键是否按下：', event.ctrlKey);console.log('Alt键是否按下：', event.altKey);});```这个例子展示了如何使用 KeyboardEvent 的 shiftKey、ctrlKey 和 altKey 属性来获取键盘事件的修饰键状态。
前端开发中的键盘事件与输入处理
前端开发中的键盘事件与输入处理在前端开发中，键盘事件和输入处理是非常重要的一环。
通过处理键盘事件，我们可以实现许多有趣的功能和交互体验。
同时，对于输入的处理也是确保数据准确性的关键步骤之一。
本文将探讨前端开发中的键盘事件与输入处理的相关知识和技巧。
一、键盘事件1. 键盘事件的基本概念键盘事件是用户在使用键盘输入时所触发的事件。
通过绑定键盘事件的处理函数，我们可以对用户的键盘操作进行响应，并执行相应的逻辑。
常见的键盘事件有keydown、keyup和keypress等。
2. 键盘事件的应用场景键盘事件可以应用于各种交互场景。
比如，网页上的搜索功能，通过监听用户的键盘输入，实时搜索匹配的内容；还有游戏中的控制，通过响应特定按键的事件来控制角色的移动和动作等。
通过灵活运用键盘事件，我们可以为用户提供更好的交互体验。
3. 键盘事件的常用属性键盘事件会传递一些相关的信息，如按键的键码、按键的修饰符等。
这些信息可以通过事件对象的属性来获取。
例如，event.keyCode用于获取按键的键码，event.ctrlKey用于判断是否按下了Ctrl键，event.shiftKey用于判断是否按下了Shift 键等。
通过这些属性，我们可以根据用户的操作做出相应的反应。
二、输入处理1. 输入处理的基本概念输入处理是对用户输入的数据进行验证和处理的过程。
在前端开发中，输入处理是确保数据准确性的重要环节。
输入处理可以包括数据合法性的验证、格式化和清洗等操作。
2. 输入处理的应用场景输入处理广泛应用于各个领域。
比如，在用户注册页面中，对用户输入的用户名和密码进行合法性验证，确保安全性；在表单中，对输入的电话号码进行格式化，保证统一的显示效果。
通过输入处理，可以提高用户体验，防止恶意输入和错误操作。
3. 输入处理的常用技巧在输入处理过程中，有一些常用的技巧可以帮助我们更好地处理输入。
例如，使用正则表达式对数据进行合法性验证，使用特定的库或工具对输入进行格式化，使用输入过滤器对敏感字符进行过滤等等。
js触发事件的方法
js触发事件的方法JavaScript中，触发事件的方法是非常重要的，它可以让我们在页面上动态响应用户的行为，从而提高我们页面的交互性和用户体验。
在本篇文章中，我们将深入探讨JS触发事件的方法。
一、addEventListener()方法addEventListener()方法是JS中使用最多的事件绑定方法之一，它能够捕获指定事件类型的所有事件，并将它们处理成指定的回调函数。
我们来看一下使用addEventListener()方法的语法：element.addEventListener(event, function, useCapture)参数说明：event：必须。
字符串，表示要接收的事件类型，比如click、mousedown等。
function：必须。
事件触发时执行的回调函数。
useCapture：可选。
Boolean类型，表示是否使用事件捕获模式。
默认情况下为false，即使用事件冒泡模式。
二、onclick()方法onclick()方法是一种特殊的事件触发方法，它只能用于鼠标单击事件。
当鼠标单击元素时，onclick()方法会触发指定的回调函数。
我们来看一下onclick()方法的语法：element.onclick = function;参数说明：function：必须。
事件触发时执行的回调函数。
三、dispatchEvent()方法dispatchEvent()方法是JS中另一种触发事件的方法，它可以模拟任何类型的事件，如鼠标事件、键盘事件等等。
使用dispatchEvent()方法时需要先创建一个Event对象，然后通过dispatchEvent()方法触发该对象。
我们来看一下dispatchEvent()方法的语法：element.dispatchEvent(event)参数说明：event：必须。
Event对象，表示要触发的事件类型。
四、fireEvent()方法在IE浏览器中，我们可以使用fireEvent()方法来触发事件。
javascript鼠标及键盘事件总结及案例
javascript⿏标及键盘事件总结及案例⼀、⿏标事件1、单击事件box.onclick2、双击事件(双击时也会触发单击)box.ondblonclick3、⿏标右键box.oncontextmenu=function(){console.log('右键事件');//取消⿏标的默认事件return false;}4、按下|移动|抬起|⿏标悬浮|⿏标移开|⿏标右键onmousedown ⿏标按下onmousemove ⿏标移动onmouseup ⿏标抬起onmouseover ⿏标悬浮onmouserout ⿏标移开(从⽗集移⾄⼦集，触发out事件，紧接着触发⼦集的over事件，并可以冒泡给⽗集(触发⽗集的over)) oncontextmenu ⿏标右键onmouseenter ⿏标悬浮()onmouseleave ⿏标移开(leave默认⼦集是⽗集的⼀部分，所以从⼦集移到⽗集不会触发,enter事件也不会触发)enter:⽗集enter ⼦集enter (不⽀持冒泡)over:⼦集over ⽗集over(想当于⼦集冒泡给⽗集) (⽀持冒泡)总结：将⽗集和⾃⼰分开考虑盒⼦的悬浮离开事件，⽤over | out组合；将⼦集纳⼊⽗集的考虑当中，只考虑⽗集的相应悬浮离开事件，采⽤ enter | leave组合；单独考虑⼀个盒⼦的悬浮离开事件，都可以使⽤⼆、js的盒模型1、应⽤<style>.box{width:100px;height:100px;background:red;}</style><div class="box"></div><script>var box=document.querySelector('.box')var width=getComputedStyle(box,null).width;console.log(width)//转化成数字类型console.log(+(width.slice(0,3)))</script>==>100px2、数字字符转换var a="1213124"//转化成整型a=+a//如果待单位会转化成NaNa=parseInt(a)//字符的切割a.substr(0,3)==>123 //从0往后取3个单位a.slice(0,2)==>12 //从0取到2，前取后不取3、获取paddingheight:100px;background:red;padding:20px;position:absolute;}body{position:relative;}</style><div class="box"></div><script>var box=document.querySelector('.box')var width=getComputedStyle(box,null).width;console.log(width)//转化成数字类型console.log(+(width.slice(0,3)))var clientW=box.clientWidth//获得padding和width的总和console.log(box.clientWidth)//获得盒⼦的总⾼度(padding+height)console.log(box.clientHeight)//padding+border+widthconsole.log(box.offsetWidth)//padding+height+borderconsole.log(box.offsetHeight)//匹配绝对定位的⽅向实现(获取与定位⽗集的距离)left top console.log(box.offsetTop)console.log(box.offsetLeft)</script>三、⿏标事件的拖拽案例1.v1版本<style>.box{width:100px;height:100px;background:red;border: 10px solid black;position:absolute;}</style><div class='box'></div><script>var box=document.querySelector('.box');box.onmousedown=function(){console.log('按下');box.onmousemove=function(ev){console.log('移动');var x=ev.clientX;var y=ev.clientY;box.style.left=x-10+'px';box.style.top=y-10+'px';}};box.onmouseup=function(){console.log('取消移动');box.onmousemove=null;}</script>2、⿏标拖拽事件v2版本<style>.box{width: 100px;height: 100px;border: 10px solid red;background: black;position:absolute;top: 0;left: 0;}</style><div class="box"></div><script>var box=document.querySelector('.box');box.onmousedown=function (fa) {//将移动⿏标捕捉改成⽂档，是为了⿏标就算脱离box也不会停⽌移动 document.onmousemove=function (ev) {console.log('移动');var x=ev.clientX;var y=ev.clientY;box.style.left=x-dX+'px';box.style.top=y-dY+'px';}};box.onmouseup=function () {console.log('移开');//对⿏标移动事件删除document.onmousemove=null;}</script>四、键盘事件1、键盘按下事件(键盘按下会⼀直触发事件)<style>.box{width:100px;height:100px;background:red;}</style><div class="box"></div><script>var box=document.querySelector('.box');document.onkeydown=function(ev){// console.log(ev.keyCode);console.log(ev.which)}</script>2、键盘按下移动盒模型案例<style>.box{width:100px;height:100px;background:red;position:absolute;top:0;left:0;}</style><div class="box"></div><script>var box=document.querySelector('.box');document.onkeydown=function(ev){console.log(ev.keyCode);switch (ev.keyCode){case 37:box.style.left=box.offsetLeft-10+'px';break;case 38:box.style.top=box.offsetTop-10+'px';break;case 39:box.style.left=box.offsetLeft+10+'px';break;case 40:box.style.top=box.offsetTop+10+'px';break;}}</script>四、javascript其他事件1、onload(⽂档加载事件)<script>//将script标签写在标签前⾯使⽤window.onload=function(){var box=document.querySelector('.box')console.log(box)}</script><div class='box'></div>2、onscroll事件window.onscroll=function(){console.log(window.scrollY);}</script><div class='box'></div><br>*1003、盒⼦显影与⿏标滚动事件的案例1)滚动⼀直触发事件<style>.box{width:100px;height:100px;background:red;position:absolute;top: 0;left: 0;}.btn{width: 50px;height: 50px;background: red;display:none;position: fixed;top: 200px;right: 100px;}</style><div class="box"></div><script>//将script标签写在标签前⾯使⽤window.onload=function(){var box=document.querySelector('.box');console.log(box);}window.onscroll=function(){var btn=document.querySelector('.btn');console.log(window.scrollY);console.log("cc");if (window.scrollY>700){console.log("bb");btn.style.display='block';btn.style.background="black"}if (window.scrollY<=700){btn.style.display='none';}}</script><div class='box'></div><div class="btn"></div>2）只触发⼀次<style>.box{width:100px;height:100px;background:red;position:absolute;top: 0;left: 0;}.btn{width: 50px;height: 50px;background: red;display:none;position: fixed;top: 200px;right: 100px;}</style><div class="box"></div>var isshow=false;window.onscroll=function(){var btn=document.querySelector('.btn'); console.log(window.scrollY);// console.log("cc");if (window.scrollY>700){if (!isshow){console.log("bb");btn.style.display='none';btn.style.background="black";isshow=true;}}else {if (isshow){btn.style.display="block";isshow=false}}}。