- 博客(15)
- 收藏
- 关注
RSS订阅
原创 根据文本生成颜色作为头像或者背景
根据文本生成颜色用途原理实现用途之所以会写这个东西的原因是因为之前工作的时候有产品经理提了一个需求“我觉得我们现在这种用户头像都是默认的一个小人太单调了，一点都不能显示我们的逼格，能不能给做一个功能，要求根据用户的用户名生成一个带有随机颜色背景的以用户名第一个字作为显示的头像。”别说啊，这个需求讲道理还是挺合理的，至少我很喜欢（毕竟这需求不是让我做）。不过，既然感兴趣了，不妨就做他一做。原理既然要做了，那就要分析一下它的原理了，首先，我们经常在css中使用的颜色都是什么样子#555555这种纯数
2020-05-10 00:00:00
878
原创 js数组操作实现轮播效果
简介通过把对数组进行重排序后再对图片进行重加载实现点击按钮切换上一个、下一个功能。实现具体实现请看代码，关键点有注释<style type="text/css"> #cardShow img { position: absolute; /* 绝对定位，方便图片布局操作 */ } #cardShow { width: 100%; /* 因为是在移动端的样式 有进行尺寸转化这里先不改了 */ height: 33rem; position: relativ
2020-09-07 18:28:52
1081
原创 原生js配合canvas绘制折线图
场景最近在做的项目没有外网，有不能npm安装echarts，折腾来折腾去太麻烦了就直接用canvas自己写了一个简单的折线图构成简单介绍一下生成一个折现图大概需要些什么东西横坐标即包括最下方横轴、刻度线以及刻度值纵坐标纵轴刻度值、纵轴的话可以没有格线等比例的分割线，更明确的展示数据点位数据折线由数据连接而成的折现这里先放一下成品看一下效果好了，一个折线图基本构成也就这些了，下面直接上代码代码<style>.canvasBox { /* ca
2020-08-30 15:04:15
935
原创 input[range]的简单使用及样式修改
使用最近项目上有个需求要做一个可以拖动的条，并且可以根据拖动的不同位置进行相应的操作，所以就找了找有没有什么html5可以直接用的东西，因此就找到了input[type=“range”]这个东西。东西是找到了，但是有一个问题，样式巨丑。。。 所以在此简单介绍下如何修改样式及一个做成的小demo样式的修改和其他不能设置直接设置的input组件一样，range的使用也是先把它默认的样式给他干掉，即在对应的css中先加上一句 -webkit-appearance: none 或者 appearance: n
2020-08-28 18:23:09
4572
原创 在字符串拼接时向click事件传递一个对象的方法
场景在进行js字符串拼接的时候有时候会遇到需要在一段字符串的onclick事件中传递的参数是一个对象的问题，传递之后我们会发现并不是我们想要的结果（主要是不想一个参数一个参数的去写，有时候参数太多就会显得太过臃肿）。举例如下：<span onclick="f1([object Object])">点我</span>可以看到f1()方法内的参数变成了[object Object]，这样的参数我们是没办法通过 xx.xx 这种格式进行数据操作的，有一种比较简单粗暴的方式是通过
2020-08-07 19:59:33
1367
原创 关于字符串替换的两种方法
用途很多时候我们会遇到后台返回的是一个参数，还需要有一个对照表进行数据替换，替换后再进行文本展示，但有的时候后台传递的参数是几个又不太能确定，所以简单写了个解决方法方法的话有两种，一种是根据后端传递的数据分割符号进行分割，分割后for循环逐一替换后再拼接成字符串返回，第二种是通过replace方法进行regexp判断后直接替换。首先整个对照表出来//数据对照var obj = { 'abc' : '123', 'bcd' : '234', 'dcd' : '567'}//需转化字符串
2020-08-07 19:59:08
4464
原创 nodejs批量修改制定路径所有文件后缀
用途最近在改一些jsp文件，但是没有对应的服务器环境，所以需要把大量的jsp文件改成html文件后再做修改，手动改过来再手动改回去又累又没有效率，所以随手写个小脚本搞一下。话不多说上代码//导入文件操作模块var fs = require('fs')//相关配置，原后缀、新后缀、所需修改的路径var cofOrgEnd = 'jsp'var cofNewEnd = 'html'var dirPath = '../test'//先读取制定目录下所有文件及文件夹名称fs.readdir(di
2020-08-07 19:58:29
554
原创 录入信息弹窗及点击空白关闭弹窗的简单组件
简单的弹窗因为内容比较简单，不做过多的赘述，直接上代码注：记得引入jquery<style type="text/css"> #popWindow { position: absolute; width: 100%; height: 100%; top: 0; left: 0; /* 增加背景色,提高视觉观感 */ background-color: rgba(54,54,54,0.5); /* 因为是用作展示的，默认显示出来，用的时候需要把注释去掉 *
2020-07-20 19:40:34
285
原创 小球自由落体及碰撞反弹
目录简述构成小球按钮运动轨迹总结简述通过setInterval()定时刷新小球位置来完成小球运动状态，模拟自由落体加速度及碰撞反弹效果构成整体的物体很少，只有一个小球及一个开始按钮，大概效果是点击开始按钮后赋予小球一个向右的初速度，同时有一个持续向下的趋势构成自由落体的感觉小球先生成一个小球<style>#ball { width: 40px; height: 40px; position: absolute; top: 20px; overflow: hidden;
2020-06-16 22:09:24
2285
原创 css+js完成黑洞吞噬小球成长功能
目录介绍原理完整代码总结介绍因为最近比较闲，就想着能不能自己做个h5游戏出来，所以先做个小东西试试手，既然要做游戏当然就要涉及到很多的运动轨迹以及碰撞后事件效果等问题，所以就做了这个小demo出来原理说起来原理其实也很简单的，想做一个黑洞吞噬效果的话首先我们至少需要两个物体黑洞这个的话比较简单，其实就是往中间放一个黑色的小球而已，可以根据我们需要稍微做一点样式上的优化<style> #blackhole { width: 40px; height: 40px; b
2020-06-04 20:16:25
489
原创 redis-py使用参考
目录常用类型场景分类具体用法STRING基本操作set的批量设置批量获取设置name值为value并返回原value值修改指定位置字符串获取指定范围内的字符串修改某二进制值获取二进制值bitcount字符串长度自增incrbyfloat自减在原值后追加HASHhash的存储hash的批量存储获取name中键为key的value获取所有键值对获取多个key对应的value获取name的键值对个数获取name的所有key值获取name的所有value值判断name中是否存在该key删除key对应键值对hincr
2020-05-17 14:45:48
322
原创 关于input['date']的简单使用
input['date']的初级使用发现使用默认值通过js进行赋值发现刚开始工作的时候，遇到了需要选择时间的功能需求，当时我就蒙了，虽然说在日常生活中见过很多的日期插件，但是却一直不知道其实 input 本身就有一个名叫 date 的type（当时差点准备自己动手用JS写一个了，后来吐槽的时候一位前辈告诉我的。。。）使用input[‘date’] 的使用其实也很简单，就和 input 的其他 type 使用方法一样，只需要在创建的时候声明一下 type 就可以了<input type="da
2020-05-09 23:10:04
3279
原创 浏览器带确定取消的提示框confirm的使用
confirm的使用为什么使用confirm简单介绍一下alert介绍一下confirm()补充为什么使用confirm很多时候我们需要在弹出提示的时候根据用户的选择再做出一些操作，可能很多人和我一样，一直以为浏览器的弹窗只有 alert() 一种方式，今天来给大家介绍一下带确定和取消的提示框 confirm()简单介绍一下alert我们经常使用的 alert() ，一般都是在查看我们js中的返回值，或者测试点击功能时候使用的，例如<input type="button" onclick="
2020-05-09 22:30:51
4410
原创 使用div+css制作一组可以绑定radio值的假单选框（js控制）
假单选框的制作为什么要做假单选框首先，先做一个样子出来第二步，将你制作的样式和radio进行关联完整代码展示总结为什么要做假单选框很多时候我们想要一个有自己风格的单选框，但是html原生dom的input[radio]又平平无奇没有任何特点，最重要的是它不能修改样式，所以为了我们能够更随心意的去使用拥有更好看的样式的单选框，我们需要采用div+css的方式去做一个有单选框样子的东西出来。首先，先做一个样子出来我们先来看看一个正经的radio长什么样子喏，就这个亚子，一点都不符合我们UI同学的审美
2020-05-09 21:49:05
653
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人