JavaScript
关注
分享
扫一扫
北岭有燕
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端下载xlxs形式的链接和字节流
【代码】前端下载xlxs形式的链接和字节流。原创 2022-10-25 14:45:21 · 882 阅读 · 0 评论 -
vue-aMap高德地图的应用(添加覆盖物点坐标、自定义图标、添加信息窗体信息等)
参考文章http://www.4k8k.xyz/article/qq_41497443/109628370自己额外增加的功能：点击窗口信息后，点击地图的其他地方可以让窗口消失。在最外面的地图div里加上@click="closeWindow($event)"theflag: false, closeWindow(e) { //我这里是判断点击的元素是不是地图坐标，如果是，那就取消隐藏窗口，如果不是那就隐藏窗口。 // e.target 是你当前点击的元素 //原创 2022-03-11 13:37:21 · 1044 阅读 · 0 评论 -
如果新增数据，盒子的内容从上面往下滚动
<div class="scrollList"> <div v-for="(item,index) in chainlist" :key="index" > <div>{{item.name}}</div> <div >{{item.age}}</div> <div >{{item.address}}</div>原创 2022-03-11 11:29:16 · 382 阅读 · 0 评论 -
判断视频是否加载完成
setInterval(() => { console.log(document.querySelector('.succeedAduio').readyState);}, 10);打印结果：0： 没有关于音频/视频是否就绪的信息1： 关于音频/视频就绪的元数据2：关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒3： 当前及至少下一帧的数据是可用的4： 可用数据足以开始播放参考文章：https://blog.youkuaiyun.com/yanhanhui1/article/原创 2022-02-11 17:05:07 · 3227 阅读 · 0 评论 -
el-dropdown移动端问题：选择某项后菜单栏收起后又打开
问题描述：使用el-dropdown移动端的时候，选择某个选项后，菜单栏收起后再次打开，再次选择某项后，菜单栏收起。正常情况：选择某个选项后，菜单栏收起。原来的代码（即官网里的例子）如下：<el-dropdown @command="handleCommand"> <span class="el-dropdown-link"> 下拉菜单<i class="el-icon-arrow-down el-icon--right"></i> &l原创 2022-01-30 12:25:33 · 1194 阅读 · 1 评论 -
Ant Tabs Select 使用key切换 Select的默认值是前一个下拉框选择的值
解决办法：给<Select>加上一个属性value，在切换后select的默认值就会是nameorage这个值 const [nameorage, setNameorage] = useState("请选择"); <Select defaultValue="请选择" value={nameorage} onChange={(value) => { setNa原创 2021-11-09 15:33:24 · 592 阅读 · 0 评论 -
React ant design表格导出数据为EXCEL表格数据
参考文章如下：React ant design表格导出数据为EXCEL表格数据转载 2021-11-08 17:57:47 · 445 阅读 · 0 评论 -
Vue el-upload 上传文件
自己写的一个小demo,拷贝到html直接打开即可测试运行。<html lang="en"><head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-原创 2021-11-04 18:12:22 · 560 阅读 · 0 评论 -
echarts饼图legend文字超出宽度显示省略号
legend: { data: ['1111111111111111','222222222222222222','333333333333333'], formatter: function(name){ return name.length>12?name.substr(0,12)+"...":name; }}formatter这里的name不用改，直接改想截取的字符串长度12就行了...原创 2021-11-04 17:59:00 · 2307 阅读 · 0 评论 -
js把本地图片转成base64
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> <style type="text/c..原创 2021-08-06 11:07:16 · 2902 阅读 · 0 评论 -
密码（至少六位且至少有一个数字和字母）和邮箱校验
密码校验（至少六位且至少有一个数字和字母）： var reg ="^(?=.*[0-9])(?=.*[a-zA-Z])([a-zA-Z0-9]{6,16})$"; var flag =passworddata.match(reg) var isright = flag==null?false:true if(isright){ }else{原创 2021-07-15 17:18:08 · 821 阅读 · 0 评论 -
轮询方法获取数据，屏幕闪烁问题
getAllList() { // this.list = "" this.$http .get(URL) .then(result => { this.list ="" ...原创 2021-06-10 18:08:08 · 763 阅读 · 0 评论 -
js控制动画
效果如下：代码如下（可以直接复制在本地观看效果）：<!DOCTYPE html><html><head> <meta charset="utf-8"> <title></title> <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>原创 2021-06-10 17:46:45 · 788 阅读 · 0 评论 -
页面分辨率兼容性处理
我这边是全屏来看的F11，所以用的是分辨率的宽度。目前自己了解两种办法：1.按设计稿进行固定尺寸开发，根据各种分辨率进行放大缩小zoom。function bodyScale() { // var devicewidth = document.documentElement.clientWidth; //获取当前分辨率下的可是区域宽度 var devicewidth = window.screen.width; //获取当前分辨率宽度 // var deviceheight =原创 2021-06-02 14:50:05 · 675 阅读 · 0 评论 -
继承详情和函数进阶
继承面向对象三大特征：封装、继承、多态对象的拷贝（继承）// 继承演示（对象的继承）function extend(child, parent) { for (var key in parent) { if (child[key]) continue; // 如果child中有该成员，不替换成parent对象中的成员 child[key] = parent[key]; }}var parent = { name: '王健林', age: 60, house原创 2021-05-30 23:10:13 · 228 阅读 · 0 评论 -
类的创建和继承，原型链
类的创建new一个function，在这个function的prototype里面增加属性和方法。原型继承： 无法给构造函数传递参数，改变不了里面的值Student.prototype = new Person();Student.prototype.constructor = Student;借用构造函数可以继承属性。 call() 改变函数中的this，直接调用函数 Person.call(this, name, age, sex); this指向Person如果创建多个...原创 2021-01-23 10:51:51 · 330 阅读 · 0 评论 -
JavaScript飞机大战案例
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl原创 2020-05-14 17:26:13 · 638 阅读 · 0 评论 -
JavaScript像素鸟案例
效果图：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <titl原创 2020-05-14 12:17:55 · 696 阅读 · 0 评论 -
原生JS 回到顶部、tab栏的切换
回到顶部：html里改变的头部还有 回到顶部按钮<div id="top" class="header" data-reactid=".0.0"></div> <div class="to-top" id="totop"></div>js代码：function my$(id) { return document.getE...原创 2020-04-26 17:48:21 · 955 阅读 · 0 评论 -
原生JS实现轮播图
主要JS代码： // 获取元素 var box = my$('box'); var screen = box.children[0]; var ul = screen.children[0]; var ol = screen.children[1]; // 箭头 arrow var arr = my$('arr'); var arrLeft = my$('le...原创 2020-04-26 16:43:15 · 308 阅读 · 0 评论 -
原生JS实现放大镜案例
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0;...原创 2020-03-20 10:05:42 · 288 阅读 · 0 评论 -
offset、client、scroll
offset、client、scroll3组和大小 位置相关的属性：offset、client、scrolloffset偏移量offsetParent用于获取定位的父级元素offsetParent和parentNode的区别var box = document.getElementById('box');// offsetParent 注意：获取距离当前元素最近的定位父元素，...原创 2020-03-20 10:04:28 · 265 阅读 · 0 评论 -
倒计时
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"> .time-item { width: 430px; ...原创 2020-03-17 21:59:32 · 229 阅读 · 0 评论 -
事件详解
事件详解注册/移除事件的三种方式var box = document.getElementById('box'); // 注册事件的第一种方式,所有浏览器都支持 // 但是无法给同一个对象的同一个事件注册多个事件处理函数box.onclick = function () { console.log('点击后执行');};//移除事件，函数只执行一次box.oncli...原创 2020-03-17 21:58:43 · 392 阅读 · 0 评论 -
WebAPI之DOM介绍， 获取页面元素，注册事件及应用，样式操作及应用
Web APIWeb API介绍API的概念API（Application Programming Interface,应用程序编程接口）是一些预先定义的函数，目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而又无需访问源码，或理解内部工作机制的细节。任何开发语言都有自己的APIAPI的特征输入和输出(I/O)Web API的概念浏览器提供的一套操作浏览器功...转载 2019-04-29 21:54:17 · 517 阅读 · 0 评论 -
调试debug
调试debug过去调试JavaScript的方式alert() 不方便，需要点击按钮console.log() 比较方便断点调试断点调试是指自己在程序的某一行设置一个断点，调试时，程序运行到这一行就会停住，然后你可以一步一步往下调试，调试过程中可以看各个变量当前的值，出错的话，调试到出错的代码行即显示错误，停下。调试步骤浏览器中按F12-->sources源...转载 2019-04-27 18:15:29 · 325 阅读 · 0 评论 -
JavaScript对象
遍历对象的属性通过for…in语法可以遍历一个对象for(var key in 对象名) {console.log(key + “==” + 对象名.key);}删除对象的属性function fun() { this.name = 'mm';}var obj = new fun(); console.log(obj.name); // mm delete obj.n...转载 2019-04-27 18:12:46 · 223 阅读 · 0 评论 -
JavaScript基础语法
网页、网站和应用程序网页：单独的一个页面网站：一些列相关的页面组成到一起应用程序：可以和用户产生交互，并实现某种功能。JavaScript是什么Netscape在最初将其脚本语言命名为LiveScript，后来Netscape在与Sun合作之后将其改名为JavaScript。JavaScript最初受Java启发而开始设计的，目的之一就是“看上去像Java”，因此语法上有类似之处，一些名...转载 2019-04-27 18:09:15 · 265 阅读 · 0 评论 -
切割字符串再拼接过滤日期格式
后台传来的日期格式是2019-3-3形式没有0，用户选择的格式是2019-03-03，需要把0过滤掉。 var test1 = $('#test1').val(); //获取到用户输入日期的值 console.log("需要查询的日期：" + test1); var test1 = $('#test1').val().split(""); //先把日期分割成...原创 2019-04-11 18:03:46 · 521 阅读 · 0 评论 -
JavaScript进阶知识点，最详细易懂！
1.以Var还可以一次声明多个变量，变量之间用","逗号隔开。2.操作符之间的优先级（高到低）:算术操作符 → 比较操作符 → 逻辑操作符 → "="赋值符号3. 定义数组var 数组名=new Array(可选写长度);.创建的新数组是空数组，没有值，如输出，则显示undefined。 虽然创建数组时，指定了长度，但实际上数组都是变长的，也就是说即使指定了长度为8，仍然可以将元素存...原创 2019-01-12 15:30:45 · 931 阅读 · 0 评论 -
JavaScript入门知识点，最详细易懂！
1. javascript作为一种脚本语言可以放在html页面中任何位置，但是浏览器解释html时是按先后顺序的，所以前面的script就先被执行。比如进行页面显示初始化的js必须放在head里面，因为初始化都要求提前进行（如给页面body设置css等）；而如果是通过事件调用执行的function那么对位置没什么要求的。 2.JS中的代码和符号都要在英文状态下输入。3.单行注释 //。...原创 2019-01-06 15:54:57 · 2032 阅读 · 1 评论