- 博客(195)
- 资源 (6)
- 收藏
- 关注
RSS订阅原创 flex确保 footer 始终处于页面的底部。
为了启用 flex模式，我们将 body 的 display 属性设置为 flex, 然后将方向属性设置为列, （默认是行，也就是横向布局）。我们希望 header 和footer 只占用他们应该占用的空间，将剩余的空间全部交给主体内容区域。flex-grow：元素在同一容器中对可分配空间的分配比率，及扩展比率。/* 我们希望 header 采用固定的高度，只占用必须的空间。将 flex-grow 设置为1，该元素会占用所有的可使用空间。flex-shrink：如果空间不足，元素的收缩比率。
2024-07-09 09:58:34
450
原创 文字超出...展示
display: -webkit-box; /*值必须为-webkit-box或者-webkit-inline-box*/-webkit-box-orient: vertical; /*值必须为vertical*/-webkit-line-clamp: 2; /*值为数字，表示一共显示几行*/overflow: hidden;
2022-05-20 13:55:28
269
原创 queryString常用的取url链接上的参数
import queryString from "query-string-umd";//console.log(queryString.parseUrl(location.href).query);let obj = queryString.parseUrl(location.href).query;//举例：http://localhost:3001/50175%E6%9C%BA%E6%9E%84%E9%87%91%E9%93%B6%E5%8D%A1%E5%8F%91%E5%8D%A1/app/d
2022-05-13 17:06:38
509
原创 获取14天之前的年月日
let current = new Date(); //当前日期 current.setDate(current.getDate() - 14); //获取14天前的日期 let y = current.getFullYear(); let m = current.getMonth() + 1 < 10 ? "0" + (current.getMonth() + 1) : curre..
2022-05-13 17:06:05
583
原创 string.字符串处理
String.substring( )：用于返回一个字符串的子串用法如下：string.substring(from, to)其中from指代要抽去的子串第一个字符在原字符串中的位置to指代所要抽去的子字符串最后一个字符的后一位（这个参数可以不加）下面就对String.substring( )做举例：1、string.substring(from)：此时相当于从from位置截取到原字符串末尾1 var s = “hello”;2 s.substring(1);//就是从下标为1的字符（这里是’
2022-05-13 17:05:37
360
1
原创 判断手机类型
const u = navigator.userAgent; if (u.match(/Android/i) != null) { //android代码 return "Android"; } else if (u.match(/iPhone|iPod/i) != null) { //IOS return "IOS"; } else { return "WP"; }
2022-05-13 17:04:23
128
原创 filter数组过滤
//filter()方法创建一个新的数组，新数组中的元素是通过检查指定数组中符合条件的所有元素//不会改变原数组//return后面判断结果，取布尔值，true的话就添入新的filter数组中，false的话，不会添进filter的数组中//过滤waitList(list) { if (list) { return list.filter(e => e.auditStatus === 0) || []; } },...
2021-09-15 09:38:15
276
原创 正则验证邮箱、8到16位数字字母特殊符号组合
//邮箱/^([a-zA-Z]|[0-9])(\w)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$///8-16位数字、字母、特殊符号组合/^(?![0-9]+$)(?![a-zA-Z]+$)[a-zA-Z0-9!@#$%^&*_]{8,16}$/
2021-07-26 13:54:47
2416
原创 vue中滚动到指定位置
几种方法：1.scrollIntoView() <div ref="wrapper"> <div @click = goAnchor()></div> <ul id="idName" ref="refName"> <li></li> ... </ul> </div>goAnchor(){ document.getElementById("idName").sc
2021-07-16 08:52:11
671
原创 翻牌效果css
<html><head><meta charset="UTF-8"><title>翻牌</title><style type="text/css">*{margin:0;padding:0;}.flip_wrap{ width:454px; height:454px; margin:100px auto; perspective:800px;/*perspective属性定义3D元素距视图的距离,以像素计。该属性允许
2021-07-09 15:32:16
310
原创 大转盘效果
//html<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>大转盘</title> <meta name="keywords" content=""> <meta name="description" content=""> <meta name="viewport" co
2021-07-09 15:31:32
138
原创 倒计时vue组件
<!-- * 倒计时 --><template> <span class="contDown-tip">{{countdownTxt}}</span></template><script>export default { name: "countDown", data() { return { countdownTxt: "", //倒计时展示 countdownTime:
2021-07-08 08:20:35
370
原创 js map用法
let memberIds = this.nodeList.map((e, index) => { return { memberId: e.memberId, sortIndex: index }; }); //map() 方法返回一个新数组，数组中的元素为原始数组元素调用函数处理后的值。...
2021-07-07 10:55:18
255
原创 pc页面布局
.main-box { position: relative; top: 0; left: 50%; width: 1920px; margin: 0 auto -40px -960px;}
2021-07-07 10:36:56
140
原创 正则校验中文、英文、手机号
中文/1+/英文/[A−Za−z]+/英文/^[A-Za-z]+/英文/[A−Za−z]+/手机/^1[3456789]\d{9}$/\u0391-\uFFE5 ↩︎
2021-07-07 10:28:50
193
原创 js身份证格式校验
// 身份证格式校验idNoValidator(item) {let self = this;return function(rule, value, callback) {if (item.idType === “NI”) {if (iDValidatorInstance.isValid(value)) {let birthday = self.utils.getBirthdayFromIdCard(value);if (self.utils.calcAge(birthday) < 1
2021-07-07 10:26:59
194
原创 flex头尾固定，中间滚动
<!doctype html><html lang="en"><head> <meta charset="utf-8"> <title>Page Not Found</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { .
2021-05-12 15:42:01
233
原创 JS滑动到底部
$(window).scroll(function(){ var scrollTop = $(this).scrollTop(); var scrollHeight = $(document).height(); var windowHeight = $(this).height(); if(scrollTop + windowHeight == scrollHeight){ alert("已经到最底部了！"); }});...
2021-04-23 08:35:56
1247
原创 冒泡排序从小到大
let arr = res.data.body; //冒泡排序从小到大 //外层循环：控制比较轮数 从0开始，次数小于长度-1 for (let i = 1; i < arr.length; i++) { //内层循环：控制每轮比较次数 数组长度-i for (let j = 0; j < arr.length - i; j++) { ...
2021-04-20 10:37:01
370
原创 vue.js动态绑定input的checked
不管<input type='radio checked='true''> 你的checked属性值是true或者false，他都会选中。其实原理是这样的，复选框里只要有checked属性，不管是否为其赋值，结果为空或true或false或任意值，均为选中状态。选中不选中，不是看checked的属性值，而是看有没有checked这个属性，所以，动态选中，不用v-model,也不用checked='true'，判断是否需要渲染checked这个属性就好了.view 改一下：..
2021-04-09 15:57:22
3436
原创 获取base64格式的图片大小
//获取base64图片大小，返回kb数字 showSize(base64url) { //把头部去掉 let str = base64url.replace('data:image/png;base64,', ''); // 找到等号，把等号也去掉 let equalIndex = str.indexOf('='); if (str.indexOf('=') > 0) { str = s.
2021-03-31 13:25:31
3717
1
原创 裁剪图片image-clip.js
js:import { ga } from 'ga';import jcApp from '@ceair/jc-base-app/all/1.10.1'import apiConfig from '@/js/config/api.js'import 'layerApp';import 'layerAppCss';import { message, isInApp, saveP, getCookie, parse_url, APPLogin, changeTitle.
2021-03-29 09:37:42
1648
原创 css文字渐变样式
background-image: -webkit-linear-gradient(bottom,#94140a,#a90a11,#b70918);-webkit-background-clip: text;-webkit-text-fill-color: transparent;
2021-03-03 12:19:57
109
原创 css修改滚动条样式
/*修改滚动条样式*/ //::-webkit-scrollbar 滚动条整体部分 .box-content::-webkit-scrollbar{ width:5px; height:53px; } //::-webkit-scrollbar-track 滚动条的轨道（里面装有Thumb） .box-content::-webkit-scrollbar-track{ background: #ffffff; } .
2021-02-05 13:41:45
152
2
原创 vue常用的修饰符
.stop：等同于JavaScript中的event.stopPropagation()，防止事件冒泡；.prevent：等同于JavaScript中的event.preventDefault()，防止执行预设的行为（如果事件可取消，则取消该事件，而不停止事件的进一步传播）；.capture：与事件冒泡的方向相反，事件捕获由外到内；.self：只会触发自己范围内的事件，不包含子元素；.once：只会触发一次。...
2021-02-02 15:37:18
352
原创 H5页面头部meta
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
2021-02-01 15:57:30
313
原创 vue父子组件之间的传值
父组件向子组件传值第一个就是要明白怎么在父页面中向子组件中传值？你可以给子组件传入一个静态的值： 但我们一般都是需要传动态的值，所以需要v-bind绑定，当然，你传的值可以是数字、对象、数组等等，参见vue官网。 第二个就是要知道如何在子组件中接受父页面传过来的值，有几点需要了解： 组件实例的作用域是孤立的。 子组件要显式的用props选项声明它预期的数据，如： // 某个子组件中：export default { props: { title: { ..
2021-01-12 13:44:01
185
原创 大转盘抽奖活动
转动方法//转动 rotate(num, RuleCode, prizeType) { let _these = this; let slice = 6, roll = 8, dur = 6; // 块和圈数和转动时间 let oneDeg = 360 / slice; let q = Number(num); let d = oneDeg / 2; let preRoll = roll * 3
2021-01-11 10:40:53
143
原创 标准盒模型和IE盒模型
盒模型的组成，由里向外content,padding,border,margin.在IE盒子模型中，width表示content+padding+border这三个部分的宽度在标准的盒子模型中，width指content部分的宽度box-sizing的使用 box-sizing: content-box 是W3C盒子模型 box-sizing: border-box 是IE盒子模型box-sizing的默认属性是content-box...
2021-01-04 11:03:11
119
原创 三角形css
.a{ width: 0; height: 0; border-width: 100px; border-style: solid; border-color: transparent #0099CC transparent transparent; transform: rotate(90deg); /*顺时针旋转90°*/ }<div class=.
2021-01-04 11:01:55
111
原创 export和export default的区别
使用上的不同export default xxximport xxx from './'export xxximport {xxx} from './'
2021-01-04 11:00:17
86
转载 js数组去重
方法一 For嵌套for 使用splice去重更改原数组 正向遍历循环遇到删掉 原数组递减1{ let arr = [1,1,'true','true',true,true,15,15,false,false, undefined,undefined, null,null, NaN, NaN,'NaN','NaN', 0, 0, 'a', 'a',{},{}]; function distinct (arr) { for(let i = 0; i <.
2021-01-04 10:51:43
113
转载 $route 和 $router 的区别
$route 和 $router 的区别 $route $route对象表示当前的路由信息，包含了当前 URL 解析得到的信息。包含当前的路径，参数，query对象等。1、$route.path字符串，对应当前路由的路径，总是解析为绝对路径，如 “/foo/bar”。2、$route.params一个 key/value 对象，包含了 动态片段 和 全匹配片段，如果没有路由参数，就是一个空对象。3.$route.query一个 key/value 对象，表示 URL 查询
2021-01-04 10:22:10
147
原创 移动端 1px 的4个方案
移动端 1px 变粗的原因移动端 css 里面写了 1px ，实际比 1px 粗。其实原因很好理解：这两个 'px' 的含义是不一样的。移动端的 <header> 头里有这样一段代码：<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">代码解析：name="viewport" content="wid.
2020-12-31 10:21:55
199
原创 前端跨域请求axios里面withCredentials: true
项目中遇到的，举例：//立即领取 receive(x) { let _this = this; jcLoading.open(); axios({ method: "post", url: apiConfig.getCoupon, withCredentials: true, data: { type: x }, //请求头配置
2020-12-04 08:35:43
2573
原创 图片上传
/** * @method uploadImg 上传图片处理 * @param dom dom元素 * @param callback 上传图片后的回调处理 * @param imgSet 设置图片的宽高及quality模糊度 */function uploadImg(dom,callback,imgSet={}) { // 通过dom读取文件数据;是个伪数组(可一次选择多张图片)，要使用数组遍历并转为base64; let files = dom.files; for(l.
2020-11-02 13:21:28
100
转载 图片上传（转载）
思路：完成这个功能，首先需要美化上传图片的按钮，然后添加一个<img/>标签，在图片上传之后，用新图片的src替换原来<img/>标签中的src。如下图所示，是原始的按钮样式：美化步骤：（1）将上传图片标签采用绝对定位，使之位于一个图片，按钮，div等标签上。或者给图片，按钮或div设置绝对定位，总之，是要让上传文件按钮和用户指定的按钮重合。（2）给上传图片标签设置大大小，使之和与它重叠的图片，按钮，div等标签大小一致。（3）我将此标签设置为透明：opaci
2020-10-14 10:16:20
662
原创 window.location.hash的小妙用
location是javascript里边管理地址栏的内置对象，比如location.href就管理页面的url，用location.href=url就可以直接将页面重定向url。而location.hash则可以用来获取或设置页面的标签值。比如http://domain/#admin的location.hash="#admin"。通过window.location.hash=hash这个语句来调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用（实质上欺骗了浏览器）。然后再根据hash值
2020-09-27 10:32:30
3747
原创 图片预加载（等图片加载完了再展示页面）
<template> <div class="home" v-if="finished"> <img :src="head" /> <div class="tab-box" ref="tabBG" :style="tabImage"> <div class="tab tab1" @c...
2020-01-15 15:54:27
2452
自己写的前端开发框架 并完成后台管理数据交互
2017-11-08
微信小程序仿美团
2017-11-08
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人