
干货
文章平均质量分 60
小茄子Seven
to be a better developer
展开
-
纯css实现虚点线渐变效果
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/实现思路:渐变背景色+与背景色相同的边框虚点线+background-origin设置背景图定位效果图:代码:<!--虚点线元素容器-->body { background-color: #636465; position: relative; height: 100vh;}.demo { width: 200px; height:.原创 2022-01-25 14:15:14 · 2621 阅读 · 0 评论 -
分享一个类优惠券样式-带内圆角,带阴影
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/在前端日常开发排版布局过程中,虽然万物都可切图搞定,但是难免会不太灵活,所以针对一些不太常见的设计样式,如下图这种类似优惠券的一种样式,如果能有方式在代码层面搞定,尽量还是不要选择切图了。乍一看感觉也没什么难度,仔细一看,才发现事情并不简单。通常想要实现这种内圆角的效果,首先想到的就是使用背景渐变来实现,但这边比较麻烦的点在于,不规则的内圆角下面的阴影。进过一番尝试,最终使用drop-shad.原创 2021-05-20 17:43:42 · 413 阅读 · 1 评论 -
关于String.replaceAll()兼容性问题
之前在项目中维护同事代码,发现部分浏览器及低版本Chrome浏览器都出现报错情况。排查发现是由于replaceAll()函数兼容性问题所导致解决方案利用splite()和join()let str = '2021.01.25'//要将其转换成2021-01-25console.log(str.split('.').join('-'))//2021-01-25使用replace()代替let str = '2021.01.25'//要将其转换成2021-01-25console原创 2021-01-25 17:29:27 · 7153 阅读 · 0 评论 -
axios跨域问题小记
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/问题描述:后端设置了允许跨域,前端访问接口时依旧提示跨域原因:设置axios实例时,设置了withCredentials:true.let myHttp = axios.create({ baseURL: env.apiPath, timeout: 30000, headers: { 'Content-Type': `application/json.原创 2020-12-16 14:58:00 · 268 阅读 · 0 评论 -
获取渐变色的中间色值
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/需求场景:一个进度条渐变色块,使用标签表明当前进度,标签背景色要与当前位置色值统一。思路:根据渐变的两个色值,计算得到两个色值中间100个色值列表,根据百分比,取对应的色值。代码://css.gradientDiv{ width: 300px; height: 10px; background: linear-gradient(90deg,#FAD961,#F76B1C); p.原创 2020-12-11 14:26:03 · 2853 阅读 · 0 评论 -
echart实例仓库(基于vue)
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/对于一个在大数据公司搬砖的前端,这几年除了地图,遇到最多的就是各种图表的需求了。基本上Echart作为一个图表库,已经能满足绝大多数项目中的图表需求了。BUT~常规的配置基本是无法满足产品大大们高端的品味的,So~难免也会遇到一些个性化的配置需求。可能也是年纪大了,不太好,你们也知道,一些特别个性化的配置频率是很低的,基本也是配完一次就丢在那边了,等到下次突然发现有个类似的配置需求时,作为一个程序员.原创 2020-12-01 16:36:36 · 898 阅读 · 0 评论 -
横向上下交错时间线列表布局
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/分享一个横向上下交错时间线列表布局完整代码<template><div class="timelineBox-wrap"> <div class="timelineBox" id="box"> <div class="timeline-up"> <div :cl.原创 2020-10-10 16:56:26 · 1147 阅读 · 0 评论 -
JS原生date对象的实际应用,满满的干货!
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/Date对象用于处理日期和时间一、new Date()默认状态下,new Date()会返回当前日期和时间,格式如下var date = new Date() //Tue Sep 29 2020 16:38:00 GMT+0800 (中国标准时间)创建特定的时间,传参如下:new Date(“month dd,yyyy hh:mm:ss”);new Date(“month dd,yyy.原创 2020-09-29 17:19:28 · 184 阅读 · 0 评论 -
toLocaleString也太好用了吧!(超方便转千分位,中文数字等)
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/基本概念目前,我查找了一下,下面三种数据类型都可以使用toLocaleString的方法number.toLocaleString([locales [, options]]):返回这个数字在特定语言环境下的表示字符串array.toLocaleString([locales [, options]]):返回一个字符串表示数组中的元素date.toLocaleString([locales .原创 2020-09-29 13:42:48 · 7480 阅读 · 0 评论 -
关于clientHeight,offsetHeight,scrollHeight ,offsetTop,scrollTop...想要搞清楚,看这一篇就够了!
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/网上关于clientHeight, offsetHeight,scrollHeight…的相关文章其实很多,整理这篇文章的主要目的还是在于加深一下自己对于这些元素的记忆,每次用到的时候,总是模棱两可的,需要再去查阅一下,希望自己总结之后,彻底把这几种height搞明白!以height为例,width相关方法与其相同详细列举除了各种height所代表的具体值容易把人搞晕之外,js和jquery.原创 2020-08-19 17:37:15 · 368 阅读 · 0 评论 -
代码大全2——变量名的力量知识点总结!
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/前言:你是否在开发过程中随心所欲的进行变量命名?作为一个码龄差不多四五年的程序员,在开发过程中常常要面对各种类、变量、函数的命名。虽然这些年也差不多也逐渐形成了一些个人风格的命名规则,但并没有成一个比较规范的系统,因此很多时候还是比较随心的。最近看了《代码大全2》中变量名的力量一章,于是把书中的知识点挑出了一些列了出来。相信,对于有一定经验的程序员,可以帮助重新审视自己的日常编码习惯,从而改.原创 2020-08-11 17:18:42 · 472 阅读 · 0 评论 -
多node版本控制工具:nvm
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/有时候,不同的项目对于node版本的要求不同,如何快捷的控制我们电脑的node版本就成了我们需要考虑的问题这里记录一下我平常使用的node版本控制工具:nvmnvm is a version manager for node.js, designed to be installed per-user, and invoked per-shell. nvm works on any POSIX-c.原创 2020-07-03 10:41:49 · 178 阅读 · 0 评论 -
使用JS实现数值动态变化动画效果
更多文章可关注我的个人博客:https://seven777777.github.io/myblog/本文主要回顾整理一下之前(大概一年前,????,这一年实在比较忙 )写的一个页面动画。之前其实写了两种方案,最终使用的如下的方案:不过本篇文章会将两种方案都整理出来,方便日后有同样的需求时可以快速复用,同时也可以给正在实现这个需求的同学们一些参考!话不多说,开整!一、滚动式变化这一种的呈现方式也是我在项目中最终应用的方式,个人觉得更好看一点 ????1.关于实现原理其实想要实现这种滚动式原创 2020-06-03 15:43:42 · 15125 阅读 · 8 评论 -
Echarts使用干货整理(持续更新)
1. 纵坐标轴标签溢出问题:grid配置之前的设置倾向于: grid:{ left:"", right:"", bottom:"", top:"" }grid有个属性是containLabel1。containLabel 为 false 的时候:(默认为false)grid.left grid.rig...原创 2019-09-29 14:40:42 · 390 阅读 · 0 评论 -
你不知道大概也不会去用但可以了解一下的Console隐藏骚操作!
console.log()差不多是我们平时开发过程中最常用的调试手法了,但其实关于Console还有很多其他方法可以帮助我们提高开发效率,虽然不常用,但可以作为扩展知识,稍作了解。关于控制台可以先全面了解一下 console 控制台选项卡中的内容。第一行:清空 console 控制台top — 在默认状态下,Console 的上下文(context)为 top(顶级)。不过当你检查元素...原创 2019-07-30 15:34:14 · 900 阅读 · 0 评论 -
(干货!!)js遍历:for..in,for..of,forEach
前言日常开发中,数组或是对象的遍历是一个经常会遇到的事情,关于遍历,其实Js提供了很多方法,但是对于他们之间的区别却理解的不是很透彻,通常情况就是抓起来一个forEach就用。为了提高代码质量,我认为有必要深入了解一下不同遍历的特点。当然,本文不作太多深入讲解,只是就各种的特点进行整理展示。一、for..in,for..of,forEach1、遍历对象for..in:输出 索引let o...原创 2018-11-07 17:21:44 · 544 阅读 · 0 评论 -
js 关于正确率的控制
经常会遇到一些开发场景需要我们按照一定的概率执行某件事,经常遇到的比如电商活动的抽奖,前段时间写一个类似头脑王者的答题小程序,如果没有玩家匹配时,需要与机器人,而机器人的答题正确率需要设定。那么关于正确率具体实现的思路是什么呢,其实很简单,就是利用“随机数”实现代码如下://首先创建一个随机数nlet n = Math.floor(Math.random() * 100);//然后根据给...原创 2018-11-06 15:11:55 · 753 阅读 · 0 评论 -
关于引用类型:数组和对象的赋值
js中的数组和对象都是引用类型,其实说白了,数组的数据类型也是对象,因此我们在实际项目中需要注意,如果直接将一个对象赋值给另一个空对象,这个操作仅仅是让两个对象的指针指向了同一个地方。此时的两个对象中的任意一个的值发生改变,势必都会影响到另一个。let arr1=[1,2,3];let arr2=arr1;console.log(arr1,arr2)//[1,2,3],[1,2,3]ar...原创 2018-10-26 10:42:00 · 679 阅读 · 0 评论