![](https://img-blog.csdnimg.cn/20201014180756927.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
JS
sparrow_girl
这个作者很懒,什么都没留下…
展开
-
在多行文本输入框光标指定位置插入内容并改变光标位置
在多行文本输入框光标指定位置插入内容并改变光标位置原创 2022-10-28 18:00:24 · 403 阅读 · 1 评论 -
拖动盒子功能案例
原理:1、在页面中拖拽的原理:鼠标按下并且移动,之后松开鼠标2、触发事件是鼠标按下mousedown、鼠标移动mousemove、鼠标松开mouseup3、拖拽过程:鼠标移动过程中,获得最新的值赋值给box的left和top值4、鼠标按下触发的事件源是最上面一行,就是id为title的标题5、鼠标在页面中的坐标减去鼠标在盒子内的坐标就是盒子的真正位置6、鼠标按下:获取鼠标在盒子中的坐标7、鼠标移动:鼠标在页面中的坐标减去鼠标在盒子内的坐标赋值给box的left和top8、鼠标原创 2021-10-22 11:45:51 · 227 阅读 · 0 评论 -
移动端上传头像
<input type=”file”value=”选择文件”style=”display:none”>为input添加change事件获取上传的图片信息this.files使用内置对象FormDatalet fd=new FormData()追加参数到FormData对象fd.append(key:data)fd.append(“imgurl”,this.files[0])调用接口axios.post(“xxx”,fd).then().c...原创 2021-10-08 18:18:14 · 131 阅读 · 0 评论 -
自制简易视频播放器
HTML结构: <video src="./1.mp4" id="video"></video> <!-- 视频控件 --> <div class="playBox"> <!-- 播放/暂停按钮 --> <span id="btn"></span> <!-- 进度条 --> <div class="progress"原创 2021-09-27 12:51:07 · 527 阅读 · 0 评论 -
必须记住的数组方法和字符串方法
数组1、concat()用于连接两个或多个数组,返回一个新的数组(不改变原数组)let arr1=[1,2,3,4]let arr2=[5,6]console.log(arr1.concat(arr2))//[1,2,3,4,5,6]2、pop()用于删除并返回数组的最后一个元素(改变原数组)let arr=[1,2,3,4]let res=arr.pop()console.log(res)//4console.log(arr)//[1,2,3]3、push()用于向数组的原创 2021-09-24 21:06:45 · 113 阅读 · 0 评论 -
图片跟随鼠标移动
原理1、鼠标不断地移动,使用鼠标移动事件:mousemove2、在页面中移动,给document注册事件3、图片要移动距离,而且不占位置(开绝对定位)4、核心原理:每次鼠标移动,我们都会获得最新的鼠标坐标,把这个x,y坐标作为图片的top和left值<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <styl原创 2021-09-22 23:05:48 · 162 阅读 · 0 评论 -
移动端搜索记录(关于本地存储)
功能一:点击搜索进行用户输入数据存到本地1、给btn注册点击事件2、在事件中,获取用户输入的值3、获取本地数据(如:searchList为例) 有数据: 1)获取到数据(字符串对象),并转换成真对象 --->数据格式:[1,2,3,.....] 2)把用户输入的值添加到对象中 3)把对象转成字符串对象 4)把字符串对象保存到本地数据中 没有数据 1)定义空数据来保存数据 2)把用户输入的值添加到对象中 3)把对...原创 2021-09-18 21:43:14 · 417 阅读 · 0 评论 -
表单全选与取消全选
分析:1、全选和取消全选:让下方所有复选框的checked属性(选中状态)跟随全选按钮2、下方的所有复选框选中全选按钮才选中,其中一个不选中全选按钮都不选中每次点击下面的某个复选框都要循环检查下方复选框是否都被选中flag保存全选按钮的选中状态HTML结构:<table border="1" cellspacing="" cellpadding="0"> <tr> <th><input type=...原创 2021-09-10 14:17:18 · 1445 阅读 · 0 评论 -
网页固定头部功能
固定头功能实现步骤:1、写出固定到头部的结构与样式2、通过js或jq动态显示分析: 事件源:window document 事件类型:onscroll(js)、scroll(jq) 事件处理函数: 获取滚动条距离顶部的距离 判断距离:>500显示固定头部 else隐藏固定头部 细节: 如果显示固定头部(把头部中的搜索框放入固定头部的盒子) 如果隐藏固定...原创 2021-09-09 11:21:09 · 653 阅读 · 0 评论 -
纯js实现轮播图
HTML部分: <div id="wrapper"> <ul id="slideBox" style="left: 0;"> <li><img src="img/A.jpg"></li> <li><img src="img/B.jpg"></li> <li><img src="img/C.jpg"></li> <l原创 2021-08-30 23:20:52 · 77 阅读 · 0 评论 -
选项卡功能模块
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>选项卡</title> <style type="text/css"> /* 清除默认样式 */ ul,li{ padding: 0; margin: 0; } ul{ list-style: none; } #wrapper{ .原创 2021-08-27 21:59:39 · 77 阅读 · 0 评论 -
返回顶部功能模块
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>返回顶部</title> <style type="text/css"> body{ height: 2000px; position: relative; } #box{ width: 50px; height: 50px; lin.原创 2021-08-27 19:25:45 · 114 阅读 · 0 评论 -
商品分类二级菜单(HTML+CSS+JS)
难点:压线效果的处理(元素的层级要分清)<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> ul,li,p{ padding: 0; margin: 0; } ul{ list-style: none; } a{原创 2021-08-27 19:05:50 · 1176 阅读 · 0 评论 -
将setTimeout改成setInterval使用
let num=0let timeId=setTimeout(fn,1000)function fn(){ num++ document.write(num) timeId=setTimeout(fn,1000) if(num==10){ clearTimeout(timeId) }}结果: 向页面输出1 2 3 4 5 6 7 8 9 10,每次输出间隔1秒...原创 2021-08-22 22:41:28 · 163 阅读 · 0 评论 -
找出二维数组中最大值及最大值对应的索引值
<script>var group=[ [80,92,91], [18,12,41], [99,72,51], [60,62,93], ] var max=group[0][0]//存放最大值 var maxI=0 var maxIndex=0; ...原创 2021-08-19 16:53:35 · 961 阅读 · 0 评论 -
3个input框做简易加减乘除计算器
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> input{ width: 50px; height: 30px; ...原创 2021-08-18 14:57:03 · 1220 阅读 · 0 评论 -
自增和自减
自增++对于一个变量自增后,原变量(a)的值会立即自增1自增分为两种:a++和++a无论是a++`还是++a,都会立即使原变量的值自增1,不同的是a++和++a的值不同a++的值等于原变量的值(自增前的值)++a的值等于原变量自增后的值var a=10;var b=11;console.log(a++);//10console.log(++b);//12var c=12;var result=d++ + ++d + d;console.log(result原创 2021-08-15 22:02:11 · 578 阅读 · 0 评论 -
var、let、const的区别
1. var 可以重复定义,可以再次赋值, 后面定义时var没有意义2. let 不能重复定义,否则报错, 可以再次赋值3. const 定义常量,不能重复定义,不能再次赋值,否则报错原创 2021-08-15 21:18:45 · 97 阅读 · 0 评论