前端技术问题
mxydl2009
这个作者很懒,什么都没留下…
展开
-
button元素被点击后自动获得焦点
元素在被鼠标点击后,会自动获得焦点,此时如果按下enter键,就会触发元素的click事件。但是元素如果是用Tab键获得焦点后按下enter,则只会触发一次click,然后就失去焦点,再按下enter键并不会触发click事件。因此,如果要避免鼠标单击获得焦点的情况,要在click事件回调里设置失去焦点行为,这样就不会出现按下enter触发click的情况了。表单元素很可能都有这类特性,鼠标单击获...原创 2020-04-11 15:43:18 · 1929 阅读 · 0 评论 -
图片img或者含有img元素拖拽时的阴影效应问题
<body> <!-- <div id="div1"> --> <img src="地鼠洞.jpg" alt="" id="img1"> <!-- &原创 2019-02-06 17:53:58 · 2170 阅读 · 0 评论 -
用setTimeout定时器调用自身构建的位置移动函数时注意的问题
在做有关位置移动的问题时,通常会采用setTimeout定时器来反复调用自身来构建位置移动函数,以达到不断更改元素位置到达目的地。但是如果在判断目的地到达的语句里function show() {......if(pos == destination) { //return true; clearTimeout(timer);}var timer = setTimeout(show...原创 2019-02-07 20:23:05 · 751 阅读 · 0 评论 -
外边距塌陷问题及其对策
在做子块级元素相对于父块级元素垂直定位时,如果用margin-top来做定位,会导致外边距塌陷现象出现;简而言之,就是子元素和父元素相对于更大的容器同时下移。外边距塌陷的意思就是子元素和父元素的垂直外边距合二为一了,并且同时设定。水平外边距没有这个现象。出现的情况是子元素与父元素之间没有任何隔离,外边距接触到一起,导致外边距合并。解决办法:为父元素开启BFC环境:overflow: hi...原创 2019-02-08 16:49:24 · 1092 阅读 · 0 评论 -
生成随机排列的n个0~n不重复数字的数组
有时候会用到生成一个数组,要求数组中的数字不重复,有一定范围(比如0~8),且随机排列的情况,如[2, 5, 0, 1, 4, 8, 7, 6, 3];function arrRandom(n) { var arr = []; arr.push(Math.floor(Math.random() * n)); while(arr.length < n) { var num ...原创 2019-02-08 18:09:15 · 1241 阅读 · 0 评论 -
github上传代码时图片后缀一定要跟代码中的一致
在用GitHub托管代码时,图片后缀.JPG,但代码中为.jpg小写形式,在本地文件系统和本地服务器调试中没问题,但在上传到GitHub时,图片加载不出来,返回404。经查询,发现GitHub要求代码和图片必须一致,因此将图片后缀.JPG 改为.jpg后,图片可以正常显示了。...原创 2019-02-09 16:19:59 · 172 阅读 · 0 评论 -
在canvas画布上多次绘制图形叠加的效果
如果在画布2d上下文连续绘制多次相同的图形,比如<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>画布简单实践</title></head><body&g原创 2019-02-14 15:35:38 · 5279 阅读 · 0 评论 -
微信小程序的this.setData()方法更新二级属性数据
在用this.setData()更新数据时,如果要更新的数据如下:data: { person: { name: 'xiaoming', occupation: 'front-end engineer' }}要把person.name更新为"xiaogang",我们如果通过以下途径更新更新途径1:this.setData({ person.name = "xiaoga...原创 2019-05-03 15:21:46 · 4877 阅读 · 0 评论 -
JS异步与同步的理解
什么是异步执行机制浏览器内有三大线程:JS执行引擎线程,HTTP请求线程,事件触发线程;同步执行机制应该指的是JS执行引擎线程,按照书写顺序将程序加入队列中,按先后顺序一个个执行;异步执行机制就是不完全按照书写顺序将程序加入队列,而是将某些程序推迟到未来的某个时刻再加入队列中,等待执行;比如,一段代码中包含三个函数,第二个函数是一个监听器函数(注册有回调函数),当执行完第二个函数后,并...原创 2019-02-04 17:30:38 · 167 阅读 · 0 评论 -
浅谈浏览器动画与requestAnimationFrame
浏览器动画的实现是通过在一定频率下重新渲染得到的,每一帧都间隔相同的时间。在CSS动画中,浏览器知道动画的开始和每一帧的时间间隔,所以动画的效果很流畅。但在用JS实现的动画中,一般用定时器实现时,存在着时间间隔并不可靠的问题,如果线程里有其他任务存在,定时器执行任务的时间间隔并不一定能保证是自己设定的数值;这样容易导致动画产生延迟停滞,效果大打折扣; 为了解决这个问题,引入了requestAn...原创 2019-02-14 15:57:17 · 303 阅读 · 0 评论 -
元素属性里再添加双引号该怎么处理
这里是HTML代码 https://www.baidu.com\“);”>我毕业了这里是相对应的JavaScript代码 function pop(URL) { window.open(URL,”popup”,”width = 1220px; height = 480px;”); } 但是点击链接无反应。 如果改成如下 https://www.baidu.com’);...原创 2018-09-05 19:35:42 · 815 阅读 · 0 评论 -
传统DOM事件绑定的注意事项
传统DOM事件绑定用的是如下的格式 element.onevent = functionName; 其中,element指的是DOM元素节点,event指的是事件名称,如click,blur等等,而functionName指的是要调用的函数名。函数名后的小括号要去掉。 但如果是要带参数的函数呢? 比如,element.onevent = functionName(parameter); ...原创 2018-09-06 19:40:00 · 137 阅读 · 0 评论 -
js返回给定数组中的重复元素,返回值为重复元素构成的数组
function duplicates(arr) {var new_arr = new Array();for (var i = 0; i < arr.length; i ++) {for(var j = i + 1; j < arr.length; j ++) {if(arr[i] == arr[j]) {var repeat_value = arr[i];if(new_...原创 2018-10-16 15:00:05 · 302 阅读 · 0 评论 -
js返回给定数组中的重复元素,返回值为重复元素构成的数组
function duplicates(arr) {var new_arr = new Array();for (var i = 0; i < arr.length; i ++) {for(var j = i + 1; j < arr.length; j ++) {if(arr[i] == arr[j]) {var repeat_value = arr[i];if(new_...原创 2018-10-16 15:02:50 · 221 阅读 · 0 评论 -
form元素的submit方法报错问题
在用form元素的submit方法提交表单时,会遇到显示.submit() is not a function报错信息。经过验证,发现由于HTML的input元素name=submit导致,submit是DOM API的保留字,一般谨慎使用,尽量少用submit做属性值或者变量名;...原创 2019-01-24 19:44:21 · 906 阅读 · 0 评论 -
轮播图动画函数的写法
在做轮播图时,一般都要用到动画,即将一张多个图拼接起来的大图,移动大图的偏移位置,使得大图在窗口父元素中可见区域轮番变化。写轮播图函数时,一般要注意一下几点:关于移动步进大小的设置;移动步进大小决定着动画的快慢,通常采用距离大时移动步进大,距离小时移动步进小的方法;这就意味着步进必须与距离相关,通常取距离的某个比例,比如1/10;这样做步进必定会成为浮点数,当判断是否到达目的地时很不方便...原创 2019-01-21 10:27:27 · 496 阅读 · 0 评论 -
图片地图/CSS Sprites改变HTTP请求数量从而提高响应速度
通常可能会在导航栏中用图片或者图标来链接到其他页面,但如果每个图片都用img标签来引入,则会导致有多个HTTP请求,页面响应速度变慢,而采用图片地图的方式来引入导航链接,则只需要一次HTTP请求,几乎可以减少50%的请求时间。图片地图的方式即是将所有链接用的图片或者图标合成一张大图,只需要引入这张大图,在大图的不同区域点击,导航到不同链接对应的页面即可。引入大图时用&amp;lt;img src=&quot;i...原创 2019-01-27 17:15:27 · 129 阅读 · 0 评论 -
data:URL提高图片响应速度
data:URL方式可以免去向服务器发出HTTP请求,从而提高响应速度。原本的<img src="images/pic.gif">现在可以变为如下形式<img src="data:image/gif;base64, R0lGODlhMwAxAIAAAAAAAPyH5BAAAAAAALAAAAAAzADEAAAK8jI+pBr0PowytzotTtbm/DTqQ6C3hGX El...原创 2019-01-27 23:11:05 · 192 阅读 · 0 评论 -
写面向对象模式时this指向问题
this永远指向的是所属函数的调用对象,也就是说,this属于某个函数,哪个对象调用了这个函数,this就指向哪个对象;对this的指向一定要注意包含this的函数被谁调用,被window调用则会指向window;如this.ele.onclick = this.move; //move是对象的某个方法,this.ele是对象的一个属性;此时move方法里的this指向的并不是对象,而是thi...原创 2019-02-02 20:34:46 · 157 阅读 · 0 评论 -
事件处理函数的绑定方式问题
事件处理函数分为不带参数和带参数的。不带参数的函数绑定事件时不需要加小括号,而带参数的函数绑定事件时要打包在匿名函数中。 函数名后加小括号才表示函数调用。下面的代码中,showPic函数不带参数,如果打包在匿名函数中绑定点击事件时,this.getAttribute方法成了未定义,这表明this关键字指代的元素节点有问题。如果不打包在匿名函数中绑定事件,则可以用this.getAttribute...原创 2018-09-07 23:10:12 · 735 阅读 · 0 评论