2020年4月2日
可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定
摘要： D3.js 就是在元素选择与元素数据绑定的技术上进行后续操作的，所以元素选择与数据绑定是基础。 1、选择器 d3.select() d3.selectAll()介绍下常见用法如下（这里先说下基本用法，第四章会详细介绍）： <!DOCTYPE html><html lang="en"><head> < 阅读全文
posted @ 2020-04-02 15:46 &执念 阅读(3349) 评论(0) 推荐(0) 编辑
可视化工具D3.js教程 入门 （第一章）—— hello world
摘要： 1、利用D3.js 在网页上显示一些文字内容； 代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>hello</title> <script src="https://d3js.org/d3.v5.min 阅读全文
posted @ 2020-04-02 15:43 &执念 阅读(3943) 评论(0) 推荐(0) 编辑
可视化工具D3.js教程 入门 (V5版)
摘要： 可视化工具D3.js，就不赘述他的简介与下载了，官网上看，直接上教程： 可视化工具D3.js教程 入门 （第一章）—— hello world 可视化工具D3.js教程 入门 （第二章）—— 选择元素与数据绑定 可视化工具D3.js教程 入门 （第三章）—— 理解 Update Enter Exit 阅读全文
posted @ 2020-04-02 15:42 &执念 阅读(8617) 评论(0) 推荐(0) 编辑
2020年3月30日
JSOIN.parse（）报错：Uncaught SyntaxError: Unexpected token o in JSON at position 1 at JSON.parse (<anonymous>)
摘要： 记录下引起这个报错的原因： JSON.parse（）参数应该是string类型 由于传递的参数是object 类型 那么JSON.parse() 就会把object类型默认转成string 结果为“[object object]” "["字符就当是数组去解析，然后遇到第二个字符“o” 他就蒙圈了 然 阅读全文
posted @ 2020-03-30 13:55 &执念 阅读(4659) 评论(0) 推荐(0) 编辑
2020年3月26日
给webstorm换个背景图
摘要： 1、打开setting——plugins 2、下载一个webstorm插件 Sexy Editor 如下图： 3、下载完成之后重启 4、重启之后打开setting 找到 SexyEditor 选项 并点击右侧底部的 Add images 按钮 5、 选择自己喜欢的图片 6、可以调整透明度 尺寸等 7 阅读全文
posted @ 2020-03-26 23:17 &执念 阅读(4027) 评论(0) 推荐(1) 编辑
css遮罩 mask属性
摘要： 先上一张咱们的原始图 rs7.jpg 如下： 一、mask-image属性 1.基本的png图遮罩展示 我们使用的遮罩图片 ad.png，如下： html： <img src="rs7.jpg" alt="" class="mask-img"> css： .mask-img { width: 300 阅读全文
posted @ 2020-03-26 14:45 &执念 阅读(4377) 评论(0) 推荐(0) 编辑
2020年3月25日
svg图标
摘要： 对于web中的icons的各种实现的利弊，请参考：Web中实现Icon的利弊 本文以阿里矢量图标库为例，说下svg图标简单的使用： 挑选图标下载到本地，文件结构如下： 运行demo_index.html文件，里面有很详细的介绍： Unicode 引用 font-class 引用 Symbol 引用 阅读全文
posted @ 2020-03-25 17:11 &执念 阅读(1519) 评论(0) 推荐(0) 编辑
2020年3月19日
BFC原理
摘要： BFC是什么？ BFC(Block Fomatting Context)为块级格式化上下文的的简称。 简单点说，把BFC看成一个渲染区域或者容器，在BFC这个容器内部的的元素无论如何布局都不会影响其外部的元素。 并且BFC还有它自己的一些特性，下面会说到。 BFC模式的形成条件如下（满足以下任意一条 阅读全文
posted @ 2020-03-19 13:34 &执念 阅读(354) 评论(0) 推荐(0) 编辑
2020年3月18日
轮播图与图片查看器
摘要： 记录下两款好用的轮播图插件： Swiper 官网：https://www.swiper.com.cn/ 常用配置项： var swiper = new Swiper('.swiper-container', { nextButton: '.swiper-button-next',//后退 prevB 阅读全文
posted @ 2020-03-18 16:54 &执念 阅读(529) 评论(0) 推荐(0) 编辑
2020年3月17日
超大分辨率屏幕适配方案
摘要： 主要记录以下几点： 1、整体的布局为采用 流式布局(%) 或 弹性布局（Flexbox）； 2、字体大小、内外间距、dom元素尺寸等 ，使用rem单位； 3、可以配合css的calc（）函数、单位vh、vw进行，个别情况可以考虑采用媒体查询； 阅读全文
posted @ 2020-03-17 16:35 &执念 阅读(1880) 评论(0) 推荐(0) 编辑