自写功能
文章平均质量分 94
划水为生的前端
这个作者很懒,什么都没留下…
展开
-
div框选图片部分进行前端截图,可缩放截图区域,附带base64图片转blob,blob转file
代码部分<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <style> * { user-select: none; } body { margin: 50px; } .bg { position:原创 2024-05-16 14:54:06 · 246 阅读 · 0 评论 -
覆盖在图片上方的镂空遮罩,预览镂空区域所选图片
width;height;/* 自己选一个图片 */box-sizing;width;height;borderrgba;width;height;border;cursor;box-sizing;width;height;原创 2024-05-15 15:22:24 · 232 阅读 · 0 评论 -
拖拽并复制到指定区域
基于原生代码的拖拽到指定模块功能原创 2024-05-15 14:22:20 · 224 阅读 · 0 评论 -
原生js实现拖动改变弹窗大小,同时修改显示内容显示比例
原生实现可缩放弹窗及内容比例动态调整原创 2023-08-29 15:11:29 · 446 阅读 · 0 评论 -
js数组操作实现轮播效果
简介通过把对数组进行重排序后再对图片进行重加载实现点击按钮切换上一个、下一个功能。实现具体实现请看代码,关键点有注释<style type="text/css"> #cardShow img { position: absolute; /* 绝对定位,方便图片布局操作 */ } #cardShow { width: 100%; /* 因为是在移动端的样式 有进行尺寸转化这里先不改了 */ height: 33rem; position: relativ原创 2020-09-07 18:28:52 · 1107 阅读 · 0 评论 -
原生js配合canvas绘制折线图
场景最近在做的项目没有外网,有不能npm安装echarts,折腾来折腾去太麻烦了就直接用canvas自己写了一个简单的折线图构成简单介绍一下生成一个折现图大概需要些什么东西横坐标即包括最下方横轴、刻度线以及刻度值纵坐标纵轴刻度值、纵轴的话可以没有格线等比例的分割线,更明确的展示数据点位数据折线由数据连接而成的折现这里先放一下成品看一下效果好了,一个折线图基本构成也就这些了,下面直接上代码代码<style>.canvasBox { /* ca原创 2020-08-30 15:04:15 · 982 阅读 · 0 评论 -
在字符串拼接时向click事件传递一个对象的方法
场景在进行js字符串拼接的时候有时候会遇到需要在一段字符串的onclick事件中传递的参数是一个对象的问题,传递之后我们会发现并不是我们想要的结果(主要是不想一个参数一个参数的去写,有时候参数太多就会显得太过臃肿)。举例如下:<span onclick="f1([object Object])">点我</span>可以看到f1()方法内的参数变成了[object Object],这样的参数我们是没办法通过 xx.xx 这种格式进行数据操作的,有一种比较简单粗暴的方式是通过原创 2020-08-07 19:59:33 · 1395 阅读 · 0 评论 -
关于字符串替换的两种方法
用途很多时候我们会遇到后台返回的是一个参数,还需要有一个对照表进行数据替换,替换后再进行文本展示,但有的时候后台传递的参数是几个又不太能确定,所以简单写了个解决方法方法的话有两种,一种是根据后端传递的数据分割符号进行分割,分割后for循环逐一替换后再拼接成字符串返回,第二种是通过replace方法进行regexp判断后直接替换。首先整个对照表出来//数据对照var obj = { 'abc' : '123', 'bcd' : '234', 'dcd' : '567'}//需转化字符串原创 2020-08-07 19:59:08 · 4495 阅读 · 0 评论 -
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 · 564 阅读 · 0 评论 -
使用div+css制作一组可以绑定radio值的假单选框(js控制)
假单选框的制作为什么要做假单选框首先,先做一个样子出来第二步,将你制作的样式和radio进行关联完整代码展示总结为什么要做假单选框很多时候我们想要一个有自己风格的单选框,但是html原生dom的input[radio]又平平无奇没有任何特点,最重要的是它不能修改样式,所以为了我们能够更随心意的去使用拥有更好看的样式的单选框,我们需要采用div+css的方式去做一个有单选框样子的东西出来。首先,先做一个样子出来我们先来看看一个正经的radio长什么样子喏,就这个亚子,一点都不符合我们UI同学的审美原创 2020-05-09 21:49:05 · 674 阅读 · 0 评论 -
录入信息弹窗及点击空白关闭弹窗的简单组件
简单的弹窗因为内容比较简单,不做过多的赘述,直接上代码注:记得引入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 · 294 阅读 · 0 评论 -
小球自由落体及碰撞反弹
目录简述构成小球按钮运动轨迹总结简述通过setInterval()定时刷新小球位置来完成小球运动状态,模拟自由落体加速度及碰撞反弹效果构成整体的物体很少,只有一个小球及一个开始按钮,大概效果是点击开始按钮后赋予小球一个向右的初速度,同时有一个持续向下的趋势构成自由落体的感觉小球先生成一个小球<style>#ball { width: 40px; height: 40px; position: absolute; top: 20px; overflow: hidden;原创 2020-06-16 22:09:24 · 2333 阅读 · 0 评论 -
css+js完成黑洞吞噬小球成长功能
目录介绍原理完整代码总结介绍因为最近比较闲,就想着能不能自己做个h5游戏出来,所以先做个小东西试试手,既然要做游戏当然就要涉及到很多的运动轨迹以及碰撞后事件效果等问题,所以就做了这个小demo出来原理说起来原理其实也很简单的,想做一个黑洞吞噬效果的话首先我们至少需要两个物体黑洞这个的话比较简单,其实就是往中间放一个黑色的小球而已,可以根据我们需要稍微做一点样式上的优化<style> #blackhole { width: 40px; height: 40px; b原创 2020-06-04 20:16:25 · 521 阅读 · 0 评论 -
根据文本生成颜色作为头像或者背景
根据文本生成颜色用途原理实现用途之所以会写这个东西的原因是因为之前工作的时候有产品经理提了一个需求“我觉得我们现在这种用户头像都是默认的一个小人太单调了,一点都不能显示我们的逼格,能不能给做一个功能,要求根据用户的用户名生成一个带有随机颜色背景的以用户名第一个字作为显示的头像。”别说啊,这个需求讲道理还是挺合理的,至少我很喜欢(毕竟这需求不是让我做)。不过,既然感兴趣了,不妨就做他一做。原理既然要做了,那就要分析一下它的原理了,首先,我们经常在css中使用的颜色都是什么样子#555555这种纯数原创 2020-05-10 00:00:00 · 903 阅读 · 0 评论