wayne丶-CSDN博客

原创 js区获取当前客户端系统环境

/* * @Autor: 肖皓文 * @Date: 2020-12-21 19:24:11 *//** * @return { Object } */const ua = navigator.userAgent.toLowerCase();const platform = {};const MAP_EXP = { Weixin: /micromessenger/i, Mac: /(mac os x)\s+([\w_]+)/, Windows: /(window.

2020-12-21 19:48:07 2295

原创 JS获取本地文件的内容 (兼容性处理)

function upload(input) { //支持chrome IE10 if (window.FileReader) { var file = input.files[0]; filename = file.name.split(".")[0]; var reader = new FileReader(); reader.onload = function() { .

2020-12-10 10:26:12 1765

原创 D3 天眼查股权穿透股权结构

效果图如上大致效果就是仿照天眼查股权穿透图曲线会出现节点位置不对(曲线的算法是在不会技术菜解决不了)最后刀放到产品脖子他同意用折线代替在下面已经补充 JSON数据把请求换成请求本地json复制下来自己跑如果不行加我qq 写的比较乱有我没写清楚的地方加我QQ 25575513142019.9.18补图片导出保存代码贴在最下方...

2020-06-09 10:18:25 24394 72

原创 D3 天眼查股权结构图

效果大致就是上图 tianyancha上面该效果叫股权结构图上信息属于公示信息不存在泄密暂时不考虑兼容性和下载旋转等问题。如有这些问题可以查看我上一篇股权穿透图有对应解决方案。本文直接贴简版代码不做注释有问题再加我qq2557551314d3 用的是v4版本cssbody{ font-family:sans-serif; width: 100%;...

2020-01-02 10:45:39 6853 6

原创 D3 关联关系图力学图

经常分享天眼查企查查的一些好的可视化图，是因为本人也是在一家相同性质公司搬砖经常会被产品强制性要求仿做某个效果图。分享出来就是希望可以帮到大家。有问题我看到不忙的时候我会回复。首先该图中信息属于公示信息不违法也不牵扯机密。图1 这个是仿照其查查的关联关系图做的因为本公司数据量小没有采用企查查做法。当然我之前也吧企查查代码拔下来了参考了下。下面图2 这个是企查查话不多说...

2020-01-02 10:42:24 6458 4

原创 css 多列布局

记载几种常见的多列布局方案 ,比较基础不做解释看不懂的可以参考文档属性定宽+自适应html结构左侧定宽右侧自适应消除默认padding,margin并且给左右p标签设置眼色以便区分 <div class="parent"> <div class="left"> <p>left</p> </di...

2019-12-06 14:26:08 345

原创 css 水平居中，垂直居中，居中整合。

记载的都是比较基础的 css常见属性。child在不固定长宽的情况分享几种不同居中。html就公用一种结构，<div class="parent"> <div class="child"> wayne </div></div>水平居中1.text-align: center +disp...

2019-12-06 10:22:06 145

原创自用reset

清除和重置是紧密不可分的/* Reset理念：清除和重置是紧密不可分的维护：wayne([email protected])*//* 清除内外边距 */body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list ...

2019-11-26 10:08:41 215

原创 vue provide & inject 依赖注入

祖先后代 provide & inject先简单的BB一下Vue中父组件到子组件的通信主要由子组件的props属性实现。props一层层传递，爷爷给孙子还好，如果嵌套了五六层还这么写，感觉自己就是一个沙雕（别感觉了），所以这里介绍一个稍微冷门的APIprovide/inject，专门用来跨层级提供数据，现在很多开源库都使用这个api来做跨层级的数据共享，比如element...

2019-08-22 14:53:36 836

原创 Vue slot插槽

Vue 中的插槽在开发组件的过程中其实是非常重要并且好用的。Vue 的插槽也没有说很难使用，这篇文章简明介绍三种插槽的用法。vue官方文档插槽匿名插槽子组件定义 slot 插槽，但并未具名，因此也可以说是默认插槽。只要在父元素中插入的内容，默认加入到这个插槽中去。<template> <div> hello <slot>陌生人&...

2019-08-22 14:32:13 154

原创 Vue filters, filter 过滤器

过滤器作用：文本数据格式化两种过滤器：1 全局过滤器 2 局部过滤器全局过滤器filter说明：通过全局方式创建的过滤器，在任何一个vue实例中都可以使用实例：时间戳对象转换//组件中调用过滤器dateFormatYMD<div>{{ date| dateFormatYMD }}</div><script>//mi...

2019-08-08 10:18:00 385

原创 js 字符串对象整理

js字符串用于储存和处理文本。下面整理下字符串常用操作语法。1、定义字符串字符串可以是插入到引号中的任何字符。你可以使用单引号或双引号如：var name = 'wayne';var name = "wayne"; 你也要在字符串中添加转义字符来使用引号如：var str = 'It\'s is string';var str1 = 'my name is \"wa...

2019-08-06 15:40:18 185

原创 JavaScript获取当前域名 Url 路由路径路由参数

一、获取当前域名var domain = document.domain;var domain = window.location.host;获取到的当前域名不包括 http://，如本地 127.0.0.1所以把获取到的域名使用时候要加上 http://否则单击链接时导航会出错。二、获取当前Url　var url = window.location.href;...

2019-08-01 15:17:50 2860

原创 sql语句增删改查

-- show tables;-- 新增--insert into users (username,`password`,realname) values ('lisi','123','李四');-- 查询-- select * from users;-- select id,username from users;-- 条件查询-- select * from u...

2019-07-23 18:10:06 314

原创 vue better-scroll滚动插件实现左侧滚动监听

此贴为记录贴不做备注有相同需求的直接贴代码看效果注意：通常需要固定一下宽度或者高度或者使用flex布局方式的话子内容不要超出父内容宽度<template> <section class="box"> <div class="head"> head </div> <div cla...

2019-07-11 16:10:05 1956 1

原创 JavaScript 计算出指定月份前的时间

写的小案例对特殊日期没有做处理比方每个月月份不同的天数可以再加判断去做，仅作参考写的不好的地方欢迎指出var arr=['2017-03-31','2018-09-12','2018-12-04','2019-05-01','2019-06-31'] // 筛选出数组中符合规定时间区域的数据 function getpreDate() {//获取当...

2019-07-04 11:21:56 366

原创 javascript 各种宽高

网页可见区域宽： document.body.clientWidth 网页可见区域高： document.body.clientHeight 网页可见区域宽： document.body.offsetWidth (包括边线的宽) 网页可见区域高： document.body.offsetHeight (包括边线的高) 网页正文全文宽： document.body.scrollWidth ...

2019-06-27 08:58:11 203

原创 vue图片加载失败默认图片

css解决方案：img { position: relative;}img:after { content: url('替代圖片'); display: block; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background-co...

2019-06-18 16:30:24 8526

原创 Object.prototype.toString.call(obj)精确判断对象的类型

在 JavaScript 里使用 typeof 来判断数据类型，只能区分基本类型，即 “number”，”string”，”undefined”，”boolean”，”object”，“function” 六种。对于数组、null、对象来说，其关系错综复杂，使用 typeof 都会统一返回 “object” 字符串。要想区别对象、数组、函数单纯使用 typeof 是不行的，JavaScri...

2019-06-12 11:33:06 6305 4

原创让单行文本以及多行文本溢出显示省略号(…)

1，单行省略当我们在编写网页代码的时候，肯定会遇到过文字列表中的文字太多超出了我们所写的宽度，导致文本换行或者文本超出了界限，我们在做响应式的时候由于是百分比布局，无法计算一行会显示多少个文字，所以这并不是一个好的解决方案，我们使用css3就可以轻松的实现，而且简单好用。核心css语句：overflow:hidden; （顾名思义超出限定的宽度就隐藏内容） white-space: ...

2019-05-29 11:31:34 757

原创 ES6 fetch请求

先贴代码看下 ajax 和fetch 之间的区别{// 原生ajax function ajax(){ xmlHttp = new XMLHttpRequest(); xmlHttp.open('get','https://api.github.com/users',true) xmlHt...

2019-05-24 16:40:03 527

原创 ES6 Promise异步笔记

首先强烈推荐观看阮大神的 SE6入门里面关于promise的讲解更加深刻1，Promise is what ?Promise是异步编程的一种解决方案，所谓Promise,就是一个对象，用来传递异步操作的消息。说的通俗点 promise是一个承诺，承诺过一段时间就会给你一个结果Promise 对象有两个特点：promise对象状态不受外界影响。它有三种状态：Pending...

2019-05-24 11:26:33 261

原创 ES6 import和Node require

ES6之前已经出现了js模块加载的方案，最主要的是CommonJS和AMD规范。commonjs主要应用于服务器，实现同步加载，如nodejs。AMD规范应用于浏览器，如requirejs，为异步加载require的基本语法核心概念：在导出的文件中定义module.export, 导出的对象的类型不限定看是任何类型，在要引入的文件中调用require（）方法引入对象即可//a.js...

2019-05-22 16:54:06 495

原创本地存储localstorage 封装库

使用本地存储localstoragelocalstorage是 HTML5 提供的在客户端存储数据的新方法，主要作用是将数据保存在客户端中，并且数据是永久保存的，除非人为干预删除。localstorage作为本地存储来使用，解决了cookie存储空间不足的问题：cookie中每条cookie的存储空间为4k，但localStorage的存储空间有5M大小。另外，相比于cookie，loc...

2019-05-22 10:19:09 3009 1

原创多边形实现圆环效果

c's's实现效果图更直观的可以看图2主要思路利用多边形的特性吧图片裁成等份的效果用css属性实现<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=d...

2019-05-21 17:47:05 384

原创 getComputStyle的理解

getComputStyle的应用在js中，如果想获取到元素的属性值，我们一般用document.getElementById(‘element’).style.xxx方法，就可以获取元素的样式信息，可是它获取的只是DOM元素style属性里的样式规则，对于通过class属性引用的外部样式表，就得不到我们要的信息了。因此我们使用DOM标准里的全局方法getComputedStyle。比如get...

2019-05-21 17:40:08 554

原创 css3 实现3D立方体的两种方法

1，使用positon +rotate <style> .box{ width: 200px; height: 200px; padding: 50px; margin: 100px auto; perspective: 800; ...

2019-05-20 13:47:16 2489

原创 javascript 深拷贝（多层嵌套解决方案）

在js中，数组和对象的复制如果是用 = 号来进行复制，那只是浅拷贝。如下图：对arr的修改，会影响arr2的值，这显然在绝大多数情况下，并不是我们所需要的结果。var arr = [1,2,3,4]var arr2 = arrarr[0] = 5;console.log(arr)console.log(arr2) 数组的几种方法深拷贝总结var arr = [3,...

2019-05-15 15:25:55 4310 2

原创 vue watch监听方法

Vue.js 提供了一个方法 watch，它用于观察Vue实例上的数据变动。对应一个对象，键是观察表达式，值是对应回调。值也可以是方法名，或者是对象，包含选项。具体的用法可以直接看下面的示例，简单直接。基本用法：当Name值变化时，watch监听到并且执行<div> <p>Name: <input type="text" v-model="...

2019-05-13 17:02:38 15794

原创 js 几种数组去重方法欢迎补充

日常工作中和面试中也经常会遇到数组去重这个问题。在这里整理了几种比较常见的方案，声明数组var a = [1, 2, 3, 4, 5, 1, 2, 3,6]lesson1 ：双重forfunction norepeat(a) { // 第一层for用来控制循环的次数 for (var i = 0; i < a.length; i...

2019-05-06 16:25:13 141

原创 ES6 set数据结构

1.setSet 本身是一个构造函数，用来生成 Set 数据结构。let set = new Set()Set 函数可以接受一个数组作为参数，用来初始化。但是成员中的值都是唯一的。没有重复的值let se = new Set()let arr = [2,3,4,5,6,2,3,4,5,6]arr.forEach(item=> se.add(item))conso...

2019-05-06 11:09:07 168

原创 vue 区分pc以及移动端路由

移动设备应用越来越广泛的今天，许多网站都开始做移动端的界面展示，两者屏幕尺寸差异很大，所以展示的内容也有所差别。于是就遇到一个问题，如何判断你的页面是在移动端还是在PC端打开的。在App.vue文件中关键代码如下export default { name: "App", mounted() { if (this.isMobile()) { this.$rout...

2019-05-05 14:32:52 3324 4

原创使用 CSS 解决 @2x 和@3x 图片问题

移动端开发过程中，因为手机的dpr(设备像素比不同)，我们需要根据dpr来修改图标的大小:使用css通过@media 判断像素比去切换不同照片如下再通过css预处理器封装为一个公用方法方便使用使用 CSS 的 devicePixelRatio 媒查询属性/*默认大小*/.photo {width:100px;height:100px;}.photo {background-...

2019-04-27 16:00:05 8057

原创移动端1px边框

1px问题产生的原因从移动端的角度说个具体的场景，以iphone6为例。iphone6的屏幕宽度为375px，设计师做的视觉稿一般是750px，也就是2x，这个时候设计师在视觉稿上画了1px的边框，于是你就写了“border-width:1px”，so…1px边框问题产生了。对设计师来说它的1px是相对于750px的（物理像素），对你来说你的1px是相对于375px的（css像素）“实...

2019-04-27 10:41:03 168 1

原创 js数组常用方法

目录目录创建数组数组常用方法0.Array.isArray()用于确定传递的值是否是一个Array。1.Array.of() 返回一个由参数组成的数组2.Array.from() 将数组对象转换为数组不改变原对象返回新数组3.pop() 删除数组最后一个元素（改变原数组）返回被删除的元素4.shift() 删除数组的第一个元素 (改变原数组) 返回被删除...

2019-04-23 11:33:07 19295 3

原创 javascript 节流/防抖（网络请求性能优化）

在网页实际运行的某些场景下，有些事件时会被不间断的被触发的，如resize事件，而不像是我们想象中的，滚动一次触发一次。这种情况下，由于过于频繁地DOM操作和资源加载，严重影响了网页性能，甚至会造成浏览器崩溃，合理的使用节流可以防止以上情况发生节流/防抖就是规定在一个单位时间内，只能触发一次函数。如果这个单位时间内触发多次函数，只有一次生效。就好比如水滴攒到一定的重量才会落下一样，常见...

2019-04-10 11:14:39 315

原创 js json序列换和反序列化

先贴代码看效果var arr = [{name:'xhw'},{name:'cky'}]console.log(typeof arr)var arr1 = JSON.stringify(arr)//将 JavaScript json对象转换为JavaScript对象表示法的JSON字符串(对象转为字符串)console.log(arr1)console.log(typeof ar...

2019-04-04 10:27:08 600

原创 ES6 函数扩展笔记

{ //函数的新增特性 // 参数默认值 rest参数扩展运算符箭头函数 this绑定尾调用 function test(x,y='world'){//参数默认值如果没有第二个参数就拿默认参数 console.log('默认值',x,y) } test('hello') ...

2019-03-28 22:55:07 174

原创 ES6 数组方法笔记

{ let arr = Array.of(3,4,5,6,7,8,9,9,9,11) console.log('arr',arr) let arr1 = Array.of() console.log('arr1',typeof arr1)//array.of 转换为一个集合但并不是数组 } { l...

2019-03-28 22:00:58 149 1

原创 javascript基础 DOM操作增，删，改，查

//1创建新节点　　createDocumentFragment() //创建一个DOM片段　　createElement() //创建一个具体的元素　　createTextNode() //创建一个文本节点//2添加、移除、替换、插入　　appendChild() //添加　　removeChild() //移除　　replaceChild() //替换　　insertB...

2019-03-25 17:05:33 167

空空如也

空空如也