- 博客(119)
- 收藏
- 关注
RSS订阅原创 javaScript:HTML DOM实现省市区级联菜单
效果图：注意点:在给省和市的onchange事件中，要记得对应清空市和区里面的内容省：<select name="sheng"> <option value="请选择省">请选择省</option> </select> 市：<select name="city"> <option value="请选择市">请选择市</option> </select
2021-07-19 11:04:22
289
原创 微信开发者工具调试之XHR：调试器下network的XHR是什么？
XHR，即通过XMLHttpRequest方法发送的请求。 XHR只支持显示通过该请求从后台数据库中获取到的数据， 在使用本地存储的数据，调试时会用到。 本地存储：可以在不加载整个网页的情况下，从本地存储storage中获取存储的数据，实现对网页某部分的内容进行更新。发送请求，成功获取到数据后，可以在XHR中看到数据，如下图：当数据存储在本地后，可以在Storage中查看，如下图：此时再进行页面加载，就不会再重新从后台数据库请求数据，XHR为空，如下图：...
2021-07-17 15:10:11
2292
原创 微信小程序onReachBottom 滚动条触底事件没有效果 ?（用于实现页面下拉加载，上拉刷新相关功能）
概念onReachBottom：微信小程序原生MINA框架中提供的有的页面上拉触底事件的处理函数onPullDownRefresh：监听用户下拉动作详细信息见微信开发平台：https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html原因：onReachBottom 和onPullDownRefresh是项目创建时，小程序就自己给我们生成了，所以js页面后面的onReachBot...
2021-07-17 14:38:57
1781
1
原创 Storege本地存储：web和小程序中数据的本地存储的区别
代码书写的不同web: 存储：localStorege.setItem("key","value")获取：localStorege.getItem("key")小程序： 存储：wx.setStorageSync("key","value"); 获取：wx.getStorageSync("key") 2.有无数据类型的转换web:不管存入的是什么类型的数据，最终都会先调用一下toString(),把...
2021-07-16 15:17:57
337
转载 wx:key=“ *this“：原生微信小程序wx:key以及wx:key=“ *this“详解：
今天写微信小程序无意中看到控制台给出了这样一行提示：求解百度才知道，给大家分享一下：1.wx:for定义官方文档：在组件上使用wx:for控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为item人话：根据已有数据来迭代生成组件的一个方法。学前端的同学肯定不会陌生了，V-for、ng-repeat都是一样的原理，可是在这里为什么会报错呢，往下看2.wx:key定义官方文档：如果列表中项目...
2021-07-16 11:52:52
3112
转载 用vscode开发时，为什么在使用.less计算除法时会出现问题？
hello，各位小伙伴们好，最近一直有小伙伴问我为什么写Less的时候，发现除法有了问题，在生成的css文件中，不给我们输出正确结果了。直接抛结论：LESS版本升级，EasyLess插件新版本跟随，不支持直接除法运算符引起的解决方案：除法写法变化 ./ 或者 加上小括号（推荐）肯定很多小伙伴会有疑惑，为啥会有这个问题，和大家拓展下：2. less版本变化最新的版本less进入 4.0时代。less关于除法有哪些变化呢？来看下less官...
2021-07-16 09:49:02
769
1
原创 vscode中Comments are not permitted in JSON.(521)的解决办法
描述：在书写.json文件的备注时标红提示Comments are not permitted in JSON.（521），如图所示：第一步：点击vscode界面右下角的JSON第二步：在顶部展现出的框中输入，输入JSON with Comments，点击使用即可最后效果如图：...
2021-07-14 18:04:48
8239
5
原创 javaScript实现进度条：鼠标onmousedown按下进度条框左右拖动，实现进度条的进度展示
效果图：注意点：现象描述：鼠标按下进度条后滑出进度框才放开,则当鼠标回到进度条框内时，无需再次按下，也会自己触发进度条跟随鼠标的左右滑动 解决技巧：mouseup事件写成document.onmouseup;而不是big.onmouseup<style> #box{ width: 243px; height: 30px; margin: 100px auto; } #big{ width: 200px;
2021-07-14 14:38:51
746
原创 javaScript:结合mousedown、mousemove、mouseup事件，实现拖动方块在页面内移动（代码）
效果需求：鼠标长按实现拖拽该方块移动，鼠标松开后将方块停在当前的位置注意点如下：mousemove、mouseup是全局有效，使用时用document mousemove鼠标移动事件后，通过在mouseup里面设置this.onmousemove=null;即可实现触发鼠标抬起事件onmousemove 记得给点击的对象添加样式position:absolute代码如下：<style> *{margin: 0;padding: 0;} body{...
2021-07-13 20:44:42
1360
原创 javaScript实现简易计算器：在输入数字，选择需要的运算，点击等号即可出现结果（效果图+代码）
效果如图：注：表单元素的值的获取方式如下 输入框的值获取：通过 元素.value select选框 元素.value 获取到的是选择中的那一项option中的value值；如果value的值为设置，则默认为对应项option中填写的值<style> div{ width: 500px; height: 50px; margin: 100px auto; } input{ wid...
2021-07-13 20:33:51
1565
原创 小程序常用的第三方框架：wepy、mpvue、taro、chameleon、uni-app
腾讯：wepy 其语法类似于vue 美团：mpvue 其语法类似于vue 京东：taro 其语法类似于react 滴滴：chameleon uni-app 其语法类似于vue
2021-07-13 20:15:16
723
原创 开发小程序使用less扩展的方法；提示Expected commajsonc(514)报错；用vscode开发小程序时安装代码提示工具
描述：原生小程序不支持less，mapvue、uniapp等框架支持，但是为了less去安装框架是不值得的。因而需要安装扩展（用VScode开发） 第一步：在侧边找到扩展安装，找到easy less,点击安装，如图： ...
2021-07-13 11:22:52
10505
4
转载 数组中的every、filter、map、some和forEach
一、共同点：从参数：都接受一个函数作为参数，该函数带有三个参数，item,index,array,即数组某项，数组索引，数组本身。从返回值：every和some都返回一个布尔值true或false,filter和map返回一个数组，forEach没有返回值二、实例分析（1）every:都真才真，即对函数以数组中的每个元素进行调用，对return语句中的表达式进行求值，都返回true时every函数才返回true。var arr = [1, 2, 3, 3, 4, 5 ,6],v...
2021-07-09 16:32:00
242
原创 实现五行好评效果，根据选中的星星个数，显示对应的评级，如好评、差评、优秀等
效果示例：<style> *{ margin:0px; padding: 0px; } ul{ list-style: none; width: 200px; margin:30px 0px 0px 50px; } ul li{ float: left; ...
2021-07-09 09:09:51
125
原创 鼠标拖动小方块在框里面移动
效果图：<style> *{ margin:0px; padding: 0px; } .box{ width: 500px; height: 500px; border:5px solid red; margin: 30px; position: relative;
2021-07-09 09:09:41
303
2
原创 javaScript设置树形菜单：实现点击鼠标右键，则树形ul在右击的位置显示出来，再单击，则树形菜单ul会隐藏起来。
<style> *{ margin:0px; padding: 0px; } ul{ width: 150px; list-style: none; border:1px solid #ccc; display: none; position: absolute; ...
2021-07-08 13:13:22
508
原创 javaScript阻止默认行为——e.preventDefault 和 e.returnValue = false（＜/a＞标签的默认跳转、鼠标右键默认行为、表单默认自动提交）
在新版本浏览器中，e.preventDefault 和 e.returnValue = false都能够阻止默认行为 在老版本浏览器中，就需要区分IE浏览器和非IE浏览器了。e.preventDefault 用于非IE浏览器；e.returnValue = false用于IE浏览器。e.returnValue = false在IE8及以下版本，可以实现阻止默认行为；在IE8以上版本的IE则没有效果，不能阻止默认行为。<form action="#"> ...
2021-07-08 12:59:00
1103
原创 javaScript:实现事件委托时，target属性的兼容性（针对老版本IE浏览器）
e.target||e.srcElement //e.srcElement用于老版本IE浏览器通过菜单栏案例来演示事件委托效果事件委托原理形象化理解：子元素li将事件委托给父元素ul 操作：给父元素ul绑定点击事件，当我们点击每个li时，能够得出对应li里面的内容代码如下：<h1>动画片</h1> <ul> <li>火影忍者</li> <li>喜羊羊</li&...
2021-07-08 11:26:14
428
原创 javaScript获取键盘按键码的兼容性（针对火狐和其他浏览器）
狐火2.0版本不支持e.keyCode方式，用e.which来实现兼容e.keyCode || e.which给文档对象绑定点击事件document.onclick=function(e){vare=e||window.eventconsole.log(e.button)...
2021-07-08 09:46:06
202
原创 javaScript实现放大镜（结合点击按钮切换背景色思路)（重要案例）
效果：<style> *{ margin:0px; padding: 0px; } .leftBox{ width: 400px; height: 400px; margin:20px 0px 0px 30px; position: relative; } ....
2021-07-08 09:21:41
109
原创 javaScript实现跑马灯：点击开始，小盒子在大盒子内部四周绕着跑；到某一个时间后。会自动停止；点击停止，则停止。
效果：<style> *{ margin:0px; padding: 0px; } .box{ width: 500px; height: 500px; border:5px solid red; position: relative; } .mark{ .
2021-07-08 08:58:50
413
原创 javaScript实现放大镜效果（重要案例：详细代码和注释）
<style> *{ margin:0px; padding: 0px; } .leftBox{ width: 400px; height: 400px; margin:20px 0px 0px 30px; position: relative; } .leftBox im.
2021-07-08 08:45:38
322
原创 javaScript:获取n-＞m的随机整数，点击切换背景色，结合定时器实现自动切换背景色
核心方法：获取n->m的随机整数functiongetNum(n,m){returnMath.floor(Math.random()*(m-n+1))+n}整体思路分析：通过js给页面背景一个颜色 document.body可以获取到页面中body document.body.style.backgroundColor="rgb(0,0,0)" n~m的随机整数代码如下：<button id="btn">点击切换背景颜...
2021-07-08 08:40:13
164
原创 javaScript实现倒计时效果
效果图：整体思路分析： 获取当前的事件对象 获取未来某一个时间点的时间对象 计算时间差 算数的方式算出几天几小时几分 <style> div{ width: 500px; height: 50px; margin: 50px auto; text-align: center; line-height: 50px; font-size: 20px; col.
2021-07-08 08:40:00
77
原创 javaScript格式化日期时间：实时的显示当前时间
效果：<div id='box' style="text-align: center;"></div><script>//定时器实现试试更新setInterval(function(){vardate=newDate();getDat(date);},10)functiongetDat(date){...
2021-07-08 08:39:48
107
2
原创 javaScript格式化显示日期时间
效果：<script> var date = new Date(); var month = date.getMonth() month += 1 function zeroDeal(n){ if(n>=0 && n<=9){ n = '0' + n } return...
2021-07-07 19:31:31
284
原创 javaScript事件监听addEventListener和attachEvent的兼容性和区别
if(div1.attachEvent){//在IE7 8 执行div1.attachEvent("onclick",fn1) div1.attachEvent("onclick",fn2) div1.attachEvent("onclick",fn3)//注：输出结果是fn1 fn2 fn3}else{//在非IE7 8 执行div1.addEventListen...
2021-07-07 17:40:15
202
原创 javaScript实现页面换肤：点击按钮，出现图片列表；点击数量列表中的图片，则将该图片设为页面背景图，这时图片列表会隐藏。
<style> *{ margin:0px; padding: 0px; } body,html{ width: 100%; height: 100%; } div{ width: 100%; height: 0px; background-...
2021-07-07 17:01:23
226
原创 javaScript事件对象的兼容性（针对新老版本浏览器）
div1.onclick=function(e){vare=e||window.eventconsole.log(e)}关于事件对象的关键点：在声明式函数中，如果直接使用函数名来调用该函数时，函数中是没有事件对象的 必须要有事件源，事件类型以后，才会在当前事件的处理函数中出现事件对象 在新老版本的浏览器中存在事件对象的兼容：e||window.event...
2021-07-07 16:11:04
95
原创 javaScript实现遮罩层效果：点击登录按钮，弹出登录框，此时页面的其他部分无法点击，关闭登录框，页面才可以点击
<style>*{margin:0px;padding:0px;}body,html{width:100%;height:100%;}.div1{text-align:center;}button{...
2021-07-07 15:55:14
1233
2
原创 javaScript实现顶部通栏：往下滑动到距离顶部一定距离，顶部通栏消失；再往上滑动到距离顶部一定距离，顶部通栏再次出现；滚动条往上滑动也会出现（注意CSS样式中的渐变设置）
<style>*{margin:0px;padding:0px;}body{height:1200px;}h1{text-align:center;height:0px;background-color:pin...
2021-07-07 14:44:29
640
原创 javaScript:滚动广告（通过获取滑动距离来实现，点击关闭后每5s出现）
题目：用滑动的方法去实现页面某个位置固定一个广告，并且每次点击关闭后，5s后该广告会再次出现<style>*{margin:0px;padding:0px;}body{text-align:center;}div{width:117px;heigh...
2021-07-07 14:21:55
503
原创 javaScript:获取非行间样式的属性值（获取div1对象的top属性的值，距离顶部的距离）
if(div1.currentStyle){//IE低版本vartop1=div1.currentStyle.top}else{//非IE低版本使用的方式vartop1=window.getComputedStyle(div1).top}...
2021-07-07 14:13:32
222
原创 javaScript:获取页面滚动距离的元素.scrollTop和元素.scrollLeft获取的兼容性处理（IE、Chrome 、 FireFox、Safari）
注：火狐用window.pageYoffset<button>点击</button><script>vartop1window.onscroll=function(){//获取滚动距离：兼容top1=document.documentElement.scrollTop||document.body.scrollTopconsole...
2021-07-07 14:01:00
310
原创 javaScript实现点击后回到页面顶部效果，类似淘宝的点击“顶部”回到页面顶部效果
题目：类似淘宝的点击“顶部”回到页面顶部效果CSS代码：<style>*{margin:0px;padding:0px;}body{height:1200px;}p{width:50px;height:50px;ba...
2021-07-07 13:54:36
138
原创 javaScript原生版购物车：全选、单选、全删、商品数量增减、计算总价、添加商品（代码）
题目：CSS代码如下：<style>*{margin:0px;padding:0px;}.header,.content,.floot{width:800px;margin:0pxauto;}.headerulli,.contentulli{...
2021-07-06 17:04:33
6533
3
原创 javaScript实现table表格的一些简单操作
题目：JS代码如下：<script>//获取操作对象vartbody=document.querySelector('table').firstElementChild//获取所有按钮对象varbtns=document.querySelectorAll('button')//给第一个按钮绑定点击事件btns[0].onclick=function(){...
2021-07-06 15:24:08
1126
1
原创 javaScript简易树形菜单案例（分析+代码）
题目：点击菜单，下级菜单显示；再次点击，下级菜单隐藏，效果如图：思路分析：获取需要操作的对象 遍历每一个需要点击的对象 关键点：给遍历出来的对象添加下标属性，这是让点击的对象和内容产生关联的媒介 给每一个需要点击的对象添加点击事件 获取点击对象的下标，并以此下标判断内容是处于隐藏还是显示的状态JS代码如下：<script>varps=document.querySelectorAll('p')varuls=document...
2021-07-06 10:36:52
433
原创 javaScript求5*5数组的左下半三角（分析+代码）
题目：求一个5×5的二维数组的左下半三角，如图所示思路分析：（1）通过循环按行顺序为一个5×5的二维数组arr赋1到25的自然数，这一步的结果如图（2）和输出9*9口诀一样的思路代码如下：<script>vararr=[]for(vari=1;i<=25;){//i1~25//定义一个小数组vartmp=[]//每五个数字放进数组tmp中...
2021-07-05 20:51:22
390
空空如也
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人