JavaScript（09）
关注
分享
扫一扫
JavaScript
avoidaily
当你凝视深渊，深渊也在凝视你
展开
-
js数组对象，按相同属性分组
【代码】js数组对象，按相同属性分组。转载 2023-02-18 11:09:22 · 630 阅读 · 0 评论 -
史上最全flex兼容写法整理
justify-content-space-between 设置主轴元素均分且紧贴两边。align-content-between 与交叉轴两端对齐，轴线之间的间隔平均分布。justify-content-space-around 设置主轴元素均分。align-content-center 与交叉轴的中点对齐。align-content-start 与交叉轴的起点对齐。align-content-end 与交叉轴的终点对齐。align-items-center 设置侧轴居中对齐。转载 2023-02-16 16:43:46 · 708 阅读 · 0 评论 -
一些常见的移动端适配方案
假如设置了根元素 html 的 font-size 为 18px，那么 1rem 等于 18px，rem 的大小会随着根元素 html 的 font-size 的改变而改变。rem 方案就是利用了这一点，根据不同的屏幕尺寸，来设置不同的根元素 html 的 font-size 的大小，以此来达到适配不同屏幕尺寸的目的。当我们的设计稿宽度是 750px 时，1vw 就等于 7.5px。目前比较推荐的移动适配方案是 rem&vw，了解其中的适配原理对于前端而言是非常重要的，相关问题也经常出现在面试题中。转载 2023-02-01 14:40:58 · 515 阅读 · 0 评论 -
文件下载的正确打开方式
这里主要的逻辑是当我们的请求成功后，我们会拿到响应体的response，这个response就是我们要下载的内容，然后我们把它转换成blob对象，然后通过URL.createObjectURL来创建一个url，然后通过a标签的download属性来实现文件下载。它的作用是指定下载的文件名，如果不指定，那么下载的文件名就会根据请求内容的Content-Disposition来确定，如果没有Content-Disposition，那么就会使用请求的URL的最后一部分作为文件名。的，对比于a标签，这种方式。转载 2023-02-01 14:36:04 · 258 阅读 · 0 评论 -
a标签中href的几种用法
a标签的一种写法，所以就来整理下a标签中href的几种用法。一、JS伪协议的几种调用方法（参考总结的）1、 a href="javascript:js_method();"这是常用的方法，但是这种方法在传递this等参数的时候很容易出问题，而且javascript:协议作为a的href属性的时候不仅会导致不必要的触发window.onbeforeunload事件，在IE里面更会使gif动画图片停止播放。W3C标准不推荐在href里面执行javascript语句。2、a href="javascri转载 2022-03-25 11:38:05 · 11986 阅读 · 1 评论 -
jQuery操作编辑页面，span与input标签之间的随时转换
1、input，select，textarea转spanvar switchToSpan=function () { // console.log($(this).attr("id")); var cId=$(this).attr("id");//获取当前点击input的id //console.log($("#"+cId).prop('nodeName').toLowerCase()); var thisTag=$("#"+cId).prop('nodeName').toL转载 2022-03-21 14:52:52 · 877 阅读 · 0 评论 -
js汉字转成拼音
<!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"> <title>汉字原创 2022-02-08 17:30:40 · 341 阅读 · 0 评论 -
【JavaScipt小技巧（更新ing）】
1. 展开运算符展开运算符太有用了，不提也罢。它允许对数组或字符串等迭代符进行扩展。这对于添加新的值是非常有用的。let arr = [1, 2, 3, 4, 5, 6]let newArr = [...arr, 7, 8]// newArr -> [1, 2, 3, 4, 5, 6, 7, 8]let obj = [{name: "tom", like: "sing"}, {name: "jack", like: "dance"}]let newObj = [...obj, {name原创 2022-02-08 11:15:01 · 288 阅读 · 0 评论 -
canvas获取浏览器指纹-唯一的设备标识
function bin2hex(str) { var result = ""; for (i = 0; i < str.length; i++) { result += int16_to_hex(str.charCodeAt(i)); } return result;}function int16_to_hex(i) { var result = i.toString(16); var j = 0; while (j +原创 2022-01-20 14:13:26 · 795 阅读 · 0 评论 -
js 实现拖拽排序
<!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"> <title>js转载 2021-10-25 15:09:53 · 456 阅读 · 0 评论 -
JavaScript的事件委托（事件代理）原理
事件委托又称事件代理，JS高程上讲：事件委托就是利用事件冒泡，只制定一个时间处理程序，就可以管理某一类型的所有事件。举例：等待签收快递的时候，一是可以在门口等快递送达；二是委托给公司前台代为签收。现实当中，我们大都采用委托的方案。前台收到快递后，她会判断收件人是谁，然后按照收件人的要求签收，甚至代为付款。这种方案还有一个优势，那就是即使公司里来了新员工（不管多少），前台也会在收到寄给新员工的快递...原创 2020-04-28 13:00:54 · 6702 阅读 · 0 评论 -
前端图片优化小记
前端页面需要展示的图片较多时，根据具体的场景的不同有不同的解决方案：图片优化方案：1.使用base64编码2.图片延迟加载3.使用css、iconfont、svg代替普通图片4.选择正确的图片格式5.选择正确的图片尺寸1.使用base64编码使用场景：从淘宝首页来看，使用base64的图片，除了上图的二维码(8K)，其他大小基本维持在2K以下，主要应用在各种小logo的展示（小背...转载 2020-04-17 17:58:57 · 271 阅读 · 0 评论 -
JavaScript的离线存储——localStorage、sessionStorage以及cookie
相同：三者都是存储数据在客户端使用：用户初次登录时cookie、localStorage存储以及获取数据// cookie存储function saveCookie(cookieName,cookieValue,cookieDates){ var d = new Date(); d.setDate(d.getDate()+cookieDates); document.cookie...原创 2020-04-17 12:19:50 · 246 阅读 · 0 评论 -
token和session的区别
一、session的状态保持及弊端当用户第一次通过浏览器使用用户名和密码访问服务器时，服务器会验证用户数据，验证成功后在服务器端写入session数据，向客户端浏览器返回sessionid，浏览器将sessionid保存在cookie中，当用户再次访问服务器时，会携带sessionid，服务器会拿着sessionid从数据库获取session数据，然后进行用户信息查询，查询到，就会将查询到的用户...转载 2020-04-16 15:35:08 · 519 阅读 · 0 评论 -
关于Webpack打包工具
https://www.jianshu.com/p/42e11515c10fhttps://www.cnblogs.com/fps2tao/p/10879910.htmlwebpack它是现代JavaScript应用程序的静态模块打包器（module bundler），有入口、出口，loader（加载器）和插件（plugins）。当webpack处理应用程序时，它会递归的构建一个依赖关系图，...原创 2020-04-13 17:40:01 · 437 阅读 · 0 评论 -
setTimeout和setInterval以及同步和异步
1、setTimeout（fn，time）超时调用，超过时间time，就执行fn。2、setInterval（fn，time）间歇调用，每调用周期时间time，就执行fn两者调用后，都返回一个数值id，此id是计划执行代码的唯一标识符，可以通过他来取消尚未执行的调用。clearTimeout（id）和clearInterval（id）注意：取消间歇调用的重要性远远高于取消超时调用。因为在不...原创 2020-04-13 16:42:09 · 7314 阅读 · 1 评论 -
前端路由---hash，history两种模式
SPA（单页面应用）需要在不刷新页面的情况下做页面更新的能力，这就需要引入前端路由，实际上，前端路由是利用了浏览器的hash或history属性。一、什么是路由1、路由用途解释：随浏览器地址的变化，展示给用户看到的页面也不同。2、路由实现原理解释：URL到函数的映射二、路由又分前端路由和后端路由：后端路由： 又称服务器端路由，当服务器收到客户端发来的HTTP请求，就会根据请求的URL，来...原创 2020-04-10 18:35:54 · 1605 阅读 · 0 评论 -
js找出字符串中出现最多的字符，再统计出现的次数
//js实现一个函数，来判断一个字符串出现次数最多的字符，并统计这个次数function countStr(str){ // 形参接受 var myobj = {}; // 存储出现最多的字符 for( var i=0, len=str.length,num; i<len; i++ ){ num= str.charAt(i) if( myobj[num] ){ // 保存次...原创 2020-04-10 18:14:31 · 757 阅读 · 3 评论 -
promise（ES6）和async/await（ES7）的区别
两者都是做异步处理的, 使异步转为同步，目的都是为了解决异步回调产生的“回调地狱”。**同步：**顺序执行，始终和前文保持在一个上下文，可以快速捕获及处理异常。由于js是单线程，当代码量多时容易造成阻塞，耗费时间。**异步：**由浏览器（多线程）提供，解决阻塞，异步任务始终在同步任务全部执行完毕后才执行，像回调函数，ajax、setTimeout。提高了执行效率，节省时间，但是会占用更多资源，...原创 2020-04-09 22:31:52 · 3092 阅读 · 0 评论 -
发布-订阅方式实现异步并发
异步意味着我们不会像同步那样顺序或串行地获取到程序每一步的执行结果，什么时候得到结果是未知的发布订-阅者模式实现异步并发，它的关键在于： 每次程序调用都会去执行(即发布)已经被订阅过的所有方法，在订阅的方法中去判断是否满足条件，满足条件则执行接下来的其它操作…定义对象, 该对象具有订阅方法、发布方法、用于存放订阅方法的集合let obj = { // 用于存放所有订阅的方法，在每...转载 2020-04-09 14:43:39 · 849 阅读 · 0 评论 -
js技巧
1、新建各种元素var arr = [],obj = {},str = '';2、感叹号将非布尔值转为布尔值var str = "abc"; console.log(!str); //false需要将内容转换为相反的,则使用两个感叹号即可 (!!str // true)3、双波浪号： 将内容转为数字，或小数取整（不是四舍五入）var a = '123.9999';~~a //...转载 2020-04-05 01:13:48 · 101 阅读 · 0 评论 -
pc网站随鼠标滚动动态出现效果
1.scroll滚动监听窗口事件，配合动画或css3<link rel="stylesheet" href="../res/static/css/animate.min.css">js$('.panel').addClass('animated fadeInUp'); // 1：直接添加$(document).scroll(function() { 2：监听窗口滚动添加 ...原创 2020-03-11 18:19:15 · 1042 阅读 · 0 评论 -
layui tab选项卡Hash地址的定位和跳转到指定tab栏
Hash地址的定位，页面改变某一选项区中的内容后，其他内容同步刷新，内容选项定位在指定的区域；html：<div class="layui-tab layui-flex" lay-filter="test"> <ul class="layui-tab-title"> <li class="layui-this" lay-id="11">11111<...原创 2020-03-11 11:25:53 · 3604 阅读 · 0 评论 -
js常用的循环遍历方法
for in 循环(for of 循环：遍历所有数据结构的统一的方法)for in 循环主要用于遍历普通对象，i 代表对象的 key 值，obj[i] 代表对应的 value但是遍历数组时候，要注意，因为 i 输出为字符串形式，而不是数组需要的数字下标，这意味着在某些情况下，会发生字符串运算，导致数据错误，比如：‘52’+0 = ‘520’ 而不是我们需要的 52。另外 for in 循环...转载 2020-03-03 15:26:07 · 211 阅读 · 0 评论 -
原生Form表单提交方式
var idcard = result.data.data;var url = " 请求的地址"; var postForm = document.createElement("form");//表单对象 postForm.method = "post"; postForm.action = url; var timeInput = document.createElement("inp...转载 2020-01-10 16:52:49 · 2693 阅读 · 0 评论 -
js判断对象数组中是否存在某个对象
1：直接用数组的indexOf方法就好，存在返回当前索引不存在返回-1var arr=[1,2,3,4]arr.indexOf(3) // 2arr.indexOf(5) // -12：要只是判断的话是可以遍历后判断对象的属性是否相同的，像这种：arr.forEach(item=>{ if(item.name=='Alex'){ alert('存在这个元素...转载 2019-12-27 17:00:46 · 2053 阅读 · 0 评论 -
考点！！js声明前置时候，是变量声明先前置还是函数声明先前置？
func1(); // 输出：我是函数声明func2(); // 报错 console.log(a); // 输出：undefinedfunction func1() { console.log("我是函数声明");}var func2 = function() { console.log("我是函数表达式");}var a = 10;12345...转载 2019-05-16 13:04:40 · 417 阅读 · 0 评论 -
关于API（数组+字符串）的整合
内容较长，请慎重观看…一、数组API：js中数组的声明方式：var tmp = []; // 简写模式var tmp = new Array(); // 直接new一个var tmp = Array(); // 或者new也可以在new数组的时候可以传入一个参数，表示数组的初始化长度// new的时候传入一个参数表示初始化数组长度var tmp = new Array(3); ...原创 2019-07-07 21:05:02 · 291 阅读 · 0 评论 -
return，break，continue三者区别
1、breakbreak语句会使运行的程序立刻退出包含在最内层的循环或者退出一个switch语句。由于它是用来退出循环或者switch语句，所以只有当它出现在这些语句时，这种形式的break语句才是合法的。如果一个循环的终止条件非常复杂，那么使用break语句来实现某些条件比用一个循环表达式来表达所有的条件容易得多。for(var i=1;i<=10;i++) { if(i...转载 2019-07-17 19:22:03 · 690 阅读 · 0 评论 -
数组去重方法
方法一：// 字典方式:同查找数组中出现次数最多。// 1： 借用对象属性方法，将数组中的元素添加为对象的属性，遍历数组元素的时候查询对象是否已经有该属性，如果有则不重复添加var arr=[1,2,3,3,2,1,4];//下标 0 1 2 3 4 5 6 // 声明一个空对象，来保存遍历数组的元素 var dict={}; // 遍历arr数组元素，每遍历...原创 2019-07-17 21:41:37 · 126 阅读 · 0 评论 -
一些js编程题
1、promise 异步同步的区别console.log('begin');setTimeout(()=>{ console.log('setTimeout 1') Promise.resolve().then(()=>{ console.log('promise 1'); setTimeout(()=>{ console.log('setTimeout2 ...原创 2019-08-01 14:57:24 · 450 阅读 · 0 评论 -
javascript 循环 while ，for ，switch ，do..while，for ..in/for..of 区别
循环实例：<!--do...while循环--><script>do { var input = prompt('How are you')} while (!input);</script>for循环获取所有的偶数:<script>for (var num = 0; num <= 12; num += 2) {doc...转载 2019-08-01 15:19:30 · 267 阅读 · 0 评论 -
js实现一个repeat（重复）方法
<!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-Comp...原创 2019-08-01 16:54:27 · 5480 阅读 · 0 评论 -
原生js写轮播
注意图片路径<!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-...原创 2019-08-01 18:03:51 · 107 阅读 · 0 评论 -
js的一些排序方法
<!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-U...转载 2019-08-02 00:26:41 · 142 阅读 · 0 评论 -
web存储
转载 2019-08-13 22:45:44 · 86 阅读 · 0 评论 -
验证码的生成，在0-9和a~z之间随机取4个值，不能重复
var arr=[‘0’,‘1’,‘2’,‘3’,‘4’,‘5’,‘6’,‘7’,‘8’,‘9’,‘a’,‘b’,‘c’,‘d’,‘e’,‘f’,‘g’,‘h’,‘i’,‘g’,‘k’,‘l’,‘m’,‘n’];//准备一个新数组，用于存放随机产生的值var newArr=[ ];//循环四次，每次随机取一个值，共取四个值for(var i=0;i<4;i++){//循环语句只控制...原创 2019-03-27 13:09:24 · 2610 阅读 · 0 评论