前端
关注
分享
扫一扫
忍者1
这个作者很懒，什么都没留下…
展开
专栏收录文章
- 默认排序
- 最新发布
- 最早发布
- 最多阅读
- 最少阅读
-
前端跨域传递Cookie设置
因为最近在使用Vue和SpringBoot结合开发，异步请求使用axios这个插件，本身在后端已经配置了跨域，前端指定了axios.defaults.baseURL，对于get请求是没有问题的，本来以为可以安心写页面了，结果发现对于后端配置的需要验证authc才能访问的post页面完全不能访问。查询资料才知道，因为前端访问时候没有把cookie放到请求头里面，查阅了一下资料，这里记录下。axios我的配置是这样的：var axios = require(‘axios’)axios.defaults.ba转载 2021-10-29 17:48:34 · 1344 阅读 · 0 评论 -
让我们来实现一个css三级导航
<!DOCTYPE html><html> <head> <meta charset="UTF-8" /> <title></title> <style type="text/css"> *{ margin: 0px; padding: 0px; } li{list-style: none;} .menu ul { margin: 0px; padding: 0px; .转载 2021-09-10 10:24:43 · 159 阅读 · 0 评论 -
你知道css圣杯布局与双飞翼布局吗？
圣杯布局<!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转载 2021-09-10 09:47:13 · 93 阅读 · 0 评论 -
关于CSS预处理器less的使用（未完待续）
简单明了，直接上教程：下面我们先大体了解些我接下来讲的less的功能特性：属性嵌套混合方法继承导入函数其他1、属性（1）、值变量@dividerColor:#000;div{background: @dividerColor;}（2）、选择器变量@footer: .footer;@{footer}{}（3）、属性变量@color:color;div{@{color}:#000;}（4）、url 变量@images:’…/images’ ;div{bac转载 2021-09-10 09:17:02 · 142 阅读 · 0 评论 -
移动端video兼容你需要知道的几点
<video :src="item" loop poster="http://image3.xyzs.com/upload/e1/7c/1440551648673169/20150827/144067879418296_0.jpg" webkit-playsinline="true" x5-playsinline="" x5-video-player-type="h5" x5-video-player-fullscre...转载 2021-09-09 11:20:37 · 437 阅读 · 0 评论 -
用svg画一个梯形角标
活不多说，直接上代码。 <div class="status0" > <svg class="rect" width="120px" height="200px"> <polygon points="50,0 100,0 125,30 125,80 " class="pp"/> </svg> <div class="desc"></div> .转载 2021-09-09 10:46:39 · 460 阅读 · 0 评论 -
css写一个原生switch开关按钮
<!DOCTYPE html><html><head> <title>switch开关按钮</title> <style type="text/css">#checked { width: 60px; position: relative; margin: 20px auto;}.labelBox { margin-bottom: 20px; background: #409eff...转载 2021-09-09 10:30:24 · 502 阅读 · 0 评论 -
CSS之纪念日主题网页变灰
简洁版：body{filter: grayscale(100%);zoom:1;}健全版：html {-webkit-filter: grayscale(100%);-moz-filter: grayscale(100%);更多请见：http://www.mark-to-win.com/tutorial/50955.html转载 2021-09-09 09:56:42 · 123 阅读 · 0 评论 -
你会用css写一个加载动画吗？
<!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>css 转圈</转载 2021-09-08 18:26:27 · 102 阅读 · 0 评论 -
你听过js中函数执行吗
一、主动执行函数。众所周知，函数一般有下面几种表现方式：第一种：函数声明function demo_one(){console.log(“this is demo-one”);}第二种：函数表达式var demo=function(){console.log(“this is demo-two”);}第三种：匿名表达式function(){console.log(“this is demo-three”);}var name=“maomin”;function main(){/转载 2021-09-08 17:22:24 · 182 阅读 · 0 评论 -
你真的懂this指向？
先搞清楚一点，如果this在函数里面，那么它指向的是“函数执行后”的上一级调用对象。 var a="this is a"; function main() { console.log(this.a)//这里this指向window. } main()//这里相当于window.main()，默认window对象了，所以可以省略;var o={x:“this is x”,y:“this is y”,say:function(){console.log(thi转载 2021-09-08 16:47:56 · 78 阅读 · 0 评论 -
改变this指向了解一下
首先呢，我们知道return可以改变this指向function Fn(name){this.name=name;return {};//undefined,改变了this的指向,指向该未定义对象}var fn=new Fn(“maomin”);console.log(fn.name);另一种是我们常用的方法，就是给将this赋值给一个变量。function fn1(age) {var that=this;that.age=age;console.log(this.age)//21}转载 2021-09-08 16:06:32 · 99 阅读 · 0 评论 -
不如封装一个原生Ajax
封装原生Ajax我们常常引用jq就是为了使用上面的ajax,方便又实用。但是jq文件一个高达几十kb,还有近几年jq的发展趋势不容乐观，jq中还迟迟没有改进。于是自己造轮子，下面封装了原生JS ajax 。你可以直接复制拿过来用。function ajax(obj) {// 对实参处理obj = obj || {};// 定义局部变量var xmlhttp, type, url, async, dataType, data;// 默认type为GETtype = obj.type || ‘G转载 2021-09-08 15:43:17 · 98 阅读 · 0 评论 -
js难点之原型，真难？
构造函数的首字母必须大写，用来区分于普通函数;这里的this指向实例化后的对象p;function P(name) {this.name=name;this.say=function(){console.log(“我是”+this.name)//我是毛敏;}}P.prototype.money=“一百万”;P.prototype.name=“maomin”;var p=new P(“毛敏”);//实例化alert(p.name);p.say();//使用这个方法console.lo转载 2021-09-08 15:19:15 · 169 阅读 · 0 评论 -
jq实现多开关效果互不影响
有时候我们会用jq写一些特效，jq在控制DOM方面是非常方便的，虽然jq在最近几年没什么进展。下面就是一个实例图：我们可以用jq这样实现： //html <div id="dd0" alt="0" οnclick="changeok('0')"> <img src="images/j.png" alt="" class="j1" /> <img src="images/d.png" alt="" class="true1"转载 2021-09-07 17:11:24 · 156 阅读 · 0 评论 -
你记住JS中offsetWidth、clientWidth、width、scrollWidth、clientX、screenX、offsetX、pageX吗？
offsetWidth //返回元素的宽度（包括元素宽度、内边距和边框，不包括外边距）offsetHeight //返回元素的高度（包括元素高度、内边距和边框，不包括外边距）clientWidth //返回元素的宽度（包括元素宽度、内边距，不包括边框和外边距）clientHeight //返回元素的高度（包括元素高度、内边距，不包括边框和外边距）style.width //返回元素的宽度（包括元素宽度，不包括内边距、边框和外边距）style.height //返回元素的高度（包括元素高度，不包括内转载 2021-09-07 16:12:26 · 138 阅读 · 0 评论 -
今天我们来看下数组方法中splice()与slice()的区别
先上代码 arrayObj.splice();将一个或多个新元素插入到数组的指定位置，插入位置的元素自动后移，返回新数组。 var arr2=[1,2,3,4,5]; 从索引1开始，删除3个元素，插入2个字符串 var arr3=arr2.splice(1,3) console.log(arr2)//[1,5] console.log(arr3)//[2,3,4]更多请见：http://www.mark-to-win.com/tutorial/50946.html...转载 2021-09-07 15:35:22 · 112 阅读 · 0 评论 -
实现一个js抽奖玩玩？
简易版： demo 开始 停止 更多请见：http://www.mark-to-win.com/tutorial/50945.html转载 2021-09-07 15:07:50 · 167 阅读 · 0 评论 -
JS命名空间是啥
var c=c||{};c.person=function(name){this.name=name;}var b=new c.person(“maomin”)c.person.prototype.getname=function(){console.log(this.name);//maomin}b.getname();更多请见：http://www.mark-to-win.com/tutorial/50944.html转载 2021-09-07 12:29:14 · 74 阅读 · 0 评论 -
看了这篇我也懂了this
// this指向// 1.指向全局变量windowvar a = 1;function func() {var a = 2;console.log(this.a);}func(); //2// 2.指向调用它的对象(funx()中的this只对直属上司（直接调用者obj）负责，不管有多少个。)var b = 3;function funx() {console.log(this.b);}var obj = {b: 4,funx}obj.funx(); //4var aa转载 2021-09-07 12:14:28 · 109 阅读 · 0 评论 -
截取指定字符前后字符串
<!doctype html><html><head> <meta charset="utf-8"> <title>分割字符串</title></head><body> <input type="text" class="int"> <button onclick="getStr()">截取</button></bod转载 2021-09-07 11:29:26 · 203 阅读 · 0 评论 -
关于防抖与节流的应用方案
防抖：一段时间完成一个操作；节流：定时完成操作。应用场景：防抖：1、seach搜索联想，用户在不断输入输入值时，用防抖来节约请求资源。2、windows触发resize的时候，不断的调整浏览器窗口大小会不断的触发这个事件，用防抖来让其只触发这一次。3、防止重复提交。节流：1、鼠标不断点击触发，mousedown(单位时间内只触发一次)。2、监听滚动事件，比如是否滑到底部自动加载更多，用throttle。<!DOCTYPE html> <html lang="en"转载 2021-09-07 11:02:48 · 226 阅读 · 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>检测输转载 2021-09-07 10:31:50 · 241 阅读 · 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&转载 2021-09-07 09:58:49 · 1177 阅读 · 0 评论 -
js实现上传头像（看了你就懂，相信我）
效果图：html:<div class="tx ovf"> <div class="tit">头像</div> <div class="ovf tx-img"><img src="" alt=""> <div class="upload-b"><span>修改头像</span><input type="file" class="upload1"&转载 2021-09-06 19:43:42 · 984 阅读 · 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>验证码转载 2021-09-06 18:43:44 · 160 阅读 · 0 评论 -
来实现一个js平滑滚动到顶部的小功能
需要添加类名 top// 平滑滚动到顶部var scrollTopSmooth = function (position) { if (!window.requestAnimationFrame) { window.requestAnimationFrame = function (cb) { return setTimeout(cb, 10); }; } var scrollTop = document.documentE转载 2021-09-06 16:39:30 · 280 阅读 · 0 评论 -
使用JQ实现点击其他区域关闭窗口的功能
<div class="fc"> <div class="fc_box"> <div class="fc_c"> <p class="fc_t ovf"><span>预约挂号</span><span>只显示可预约</span></p> <div class="fc_b"> &转载 2021-09-06 15:14:34 · 480 阅读 · 0 评论 -
快来看JS的的几个常用算法（持续更新中）
数组去重// 第一种方法let arr = [1,1,2,3,4];function fun(v) { return Array.from(new Set(v))}console.log(fun(arr)) //[1,2,3,4]// 第二种方法let qc= [...new Set(arr)]console.log(qc) //[1,2,3,4]数组并集let arr0 = ['a','b','c'];let arr2 = ['c','d'];let a=new Set(转载 2021-09-06 12:00:52 · 111 阅读 · 0 评论 -
15个实用实用正则（小哥进来看看？）
// 1 用户名正则//用户名正则，4到16位（字母，数字，下划线，减号）var uPattern = /1{4,16}KaTeX parse error: Undefined control sequence: \d at position 146: …*(?=.{6,})(?=.*\̲d̲)(?=.*[A-Z])(?=…%^&? ]).KaTeX parse error: Expected 'EOF', got '#' at position 46: …est("caibaojian#̲")转载 2021-09-06 11:32:35 · 153 阅读 · 0 评论 -
select选择标签自定义下拉按钮
<select><option value="" disabled selected style="display:none;">请选择时间</option></select>select::-ms-expand { display: none; } //兼容ie隐藏select{ appearance: none; -moz-appearance: none; -webkit-appearance: none转载 2021-09-06 11:08:06 · 401 阅读 · 0 评论 -
html2canvans实现浏览器快速截图(这里有demo哦)
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>html2canvas</title> <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script> <script src="https://cdn.jsdelivr.net转载 2021-09-06 09:57:19 · 196 阅读 · 0 评论 -
js小效果之根据对应项目名跳转
<p><a href="http://192.168.2.61/pc/pc_MLMM/project.html?name=0">乳龄工程</a></p> <p><a href="http://192.168.2.61/pc/pc_MLMM/project.html?name=1">腹龄工程</a></p> <p><a href="http://192.168.2.61/pc/pc_MLMM/转载 2021-09-06 09:19:02 · 91 阅读 · 0 评论 -
图片上传转换成Base64，然后再转成 file 提交给后端
图片上传代码转换成Base64<input type="file" name="upimg" id='upimg'><script> window.onload = () => { let upDOM = document.getElementById('upimg') upDOM.addEventListener('change', (e) => { console.log(e) console.log(upDOM.fi转载 2021-09-03 15:24:02 · 545 阅读 · 0 评论 -
HTML collection数组转换成正常的dom对象数组
HTML collection对象是一个类数组，如何将它转化为正常的数组，我们可以这样：var obj = document.getElementsByClassName(‘songlists’)上面的是HTML collection，下面是转化方法var arr = Array.prototype.slice.call(obj)OR[].slice.call(obj);更多请见：http://www.mark-to-win.com/tutorial/50927.html...转载 2021-09-03 15:02:45 · 215 阅读 · 0 评论 -
如何写一个js指定时间倒计时
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>计时</title> </head> <body> <div style="display: flex; justify-content: center; align-items: cent转载 2021-09-03 12:59:17 · 249 阅读 · 0 评论 -
js小效果之跟随鼠标移动的小球
<!DOCTYPE html><html><head> <title>follow mouse</title></head><style type="text/css"> *{ margin: 0; padding:0; } #div1{width: 50px;height: 50px;background: red;color:#fff;text-al转载 2021-09-03 12:34:49 · 465 阅读 · 0 评论 -
面试官：来实现一个js上下信息循环滚动
<!doctype html><html><head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=yes,viewport-fit=cover"> <title>.转载 2021-09-03 12:11:03 · 328 阅读 · 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>fix转载 2021-09-03 11:35:55 · 211 阅读 · 0 评论 -
原生JS关于数组对象相同属性的相加与数组去重
数组对象相同属性的相加let obj = {};const arr = [{ name: ‘A’, stock: 1 },{ name: ‘B’, stock: 1 },{ name: ‘A’, stock: 33 },{ name: ‘B’, stock: 2 },{ name: ‘C’, stock: 0 }];// 第一种方式arr.forEach(v => obj[v.name] = obj[v.name] === undefined ? v.stock : obj[v.n转载 2021-09-03 10:48:26 · 1409 阅读 · 0 评论