工具库，demo
关注
分享
扫一扫
小demo，或者是工具
twinkle||cll
More interest，less interests (多一些兴趣爱好的向往，少一些功名利禄的追求)
展开
-
js获取屏幕上圆和椭圆的点坐标
【代码】js获取屏幕上圆和椭圆的点坐标。原创 2022-12-29 17:04:44 · 1083 阅读 · 0 评论 -
浏览器（cmd）控制台输出带有颜色
一般在浏览器中看到人家打印的带有颜色，所以咋也来实现一下。如下：效果在浏览器的效果使用方式console.log('\x1B[3m%s\x1B[23m', 'italic')console.log('\x1B[1m%s\x1B[22m', 'bold')在cmd里面的效果使用方式console.log('\x1B[3m%s\x1B[23m', 'italic')console.log('\x1B[1m%s\x1B[22m', 'bold')一些常用的颜色代码 'bol.原创 2021-07-18 21:54:52 · 758 阅读 · 0 评论 -
js 将图片转化成黑白
效果：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>图片转化成黑白案例</title> <style> .conntainer原创 2020-06-24 15:55:18 · 1449 阅读 · 0 评论 -
python使用极限方法求 π （随机数）
# 实现π的计算import randomimport time# 随机点的个数， 点越多，月精确， 取极限的思想DARTS = 10000# 在圆弧里面点的个数hits = 0.0start = time.time()for i in range(1, DARTS + 1): # 获取一个点的横坐标，纵坐标， 然后勾股定理 x, y = random.random(), random.random() dist = pow(x ** 2 + y ** 2, 0.原创 2020-06-17 18:11:52 · 1336 阅读 · 0 评论 -
canvas实现海报 两张图片合成一张并且可以保存
<style> * { margin: 0; padding: 0; } :root, html, body { height: 100vh; width: 100vw; } </style></head> <img src='' alt='海报'>原创 2020-05-22 15:09:22 · 1345 阅读 · 0 评论 -
canvas 实现雪花飘落 html5
<style> * { margin: 0; padding: 0; } :root, html, body { width: 100vw; height: 100vh; } #canvas { background-color: #000000; ..原创 2020-05-22 13:29:51 · 624 阅读 · 0 评论 -
html5 h5使用canvas 画一个圆角矩形
使用canvas画圆角矩形 （4条边， 4个角）ctx.moveTo 先设置起点A点 下面的（x,y）是B点， （x1, y1）是C点 方向，往哪边边拐ctx.arcTo(x, y, x1, y1, 圆角大小) B点是A点与C点在圆弧上切线的交点， <canvas id="can" width="500" height="300"></canvas><script> var canvas = document.getElementById('can'原创 2020-05-16 10:33:54 · 1941 阅读 · 0 评论 -
css 实现旋转照片墙自动旋转
<style> * { margin: 0; padding: 0; } :root, html, body { height: 100%; width: 100%; } body { perspective: 3000px; transform-style: preserve-3d; } @keyframes img..原创 2020-05-10 18:05:05 · 2203 阅读 · 1 评论 -
css3 实现打字效果 小工具
<style> * { margin: 0; padding: 0; } @keyframes cursors { 0% { border-left-color: rgba(0, 0, 0, 0); } 50% { border-...原创 2020-05-08 17:24:11 · 427 阅读 · 0 评论 -
css3实现正方体 纯css
<!-- 样式 --><style> * { margin: 0; padding: 0; } :root, html, body { width: 100%; height: 100%; background-color: bisque; ...原创 2020-05-08 17:17:35 · 456 阅读 · 0 评论 -
css3 transition 实现炫酷钢琴键 炫酷
<style> * { margin: 0; padding: 0; } ul { list-style: none; } .wrapper { width: 100vw; height: 100vh; background: #000; ...原创 2020-05-07 17:47:54 · 520 阅读 · 0 评论 -
css, css3, flex实现圣杯布局
<style> .wrapper { width: 500px; height: 540px; margin: 50px auto; border: 1px solid #dedede; resize: both; overflow: hidden; } .w...原创 2020-05-05 18:05:25 · 435 阅读 · 0 评论 -
flex实现流式布局， css3
<style> .wrapper { width: 400px; height: 340px; margin: 50px auto; border: 1px solid #dedede; resize: both; overflow: hidden; }...原创 2020-05-05 17:34:20 · 2116 阅读 · 0 评论 -
css3 制作镂空的文字效果
.lou-kong { width: 500px; height: 200px; margin: 100px auto; font-size: 100px; background-color: #000; line-height: 200px; ...原创 2020-05-03 20:54:02 · 1052 阅读 · 0 评论 -
原生js实现对象的克隆
// 对象的浅克隆 作用是把一个对象克隆到另一个对象// 缺陷是只能克隆原始值 不能克隆引用值function shallowClone(origin, target) {// 第一步 我们需要把对象源里面的属性克隆到目标或者数组上var target = target || {};for(var prop in origin){target[prop] = origin[prop];...原创 2020-02-06 11:31:21 · 338 阅读 · 0 评论 -
前端vscode必装插件
工欲善其事必先利其器，开发前端的过程中，一个好的编辑工具可以事倍功半。我认为比较好的有:vscode：免费开源，在开发vue和react 挺好的，如果vue 和 react 结合ts ,那么这个编辑器讲会是一个神器，爽的不得了。而且比较轻量级的。webstorm: 收费可破解，vue 和 react 不结合 ts 也挺好用的，本人在不使用ts 的时候就用这个，但是有一个致命的缺点，特别重。vscodeAuto Rename Tag 自动补全html 标签的代码Chinese (Simpl.原创 2021-02-11 21:34:22 · 802 阅读 · 2 评论 -
typescript(ts)实现俄罗斯小方块
先看效果原创 2021-01-30 18:58:41 · 666 阅读 · 0 评论 -
CentOS7.5环境下搭建禅道
https://www.cnblogs.com/opsprobe/p/11398216.html转载 2021-01-18 12:54:42 · 131 阅读 · 0 评论 -
ts 手动实现 ts 中的map
ts 手动实现 ts 中的map实现的功能如下:按照键，删除对应的键值对 del（）循环每一个键值对 forEach()得到当前键值对的数量 size判断某个键是否存在 has()重新设置某个键对应的值，如果不存在，则添加 set()清除键值对 clear()效果如下：代码如下：export interface Cb<K, V> { /** * 键值对的 key 和 val, 无返回 */ (key: K, val:原创 2021-01-17 09:53:48 · 4294 阅读 · 0 评论 -
Vscode 使用 markdown preview enchance插件运行markdown 语法
第一步：安装插件：第二步： 使用contrl + , 打开 界面搜索 markdown preview ,勾选 script excute第三步：使用 ctrl + shift + A 搜索 markdown preview enhanced customize css, 然后把less 文件的内容放入里面第四步：使用 ctrl + shift + A 搜索 markdown preview enhanced extend Parse, 然后把js 文件的内容放入里面然后就可以使原创 2020-07-28 22:15:04 · 887 阅读 · 0 评论 -
node 封装递归读取文件
class File { constructor(filename, name, ext, isFile, size, createTime, updateTime) { this.filename = filename;// 文件的根目录 this.name = name; // name: '文件名', this.ext = ext; // ext: '后缀名', this.isFile = isFile;// i原创 2020-12-01 19:15:24 · 295 阅读 · 2 评论 -
手动实现es6的set集合 模拟set集合实现对应的功能
// 底层实现set, 手写实现set， 为了更加深刻的理解set集合 class MySet { // 此处定义一个数组来模拟set, 原生的set是用c或者c++ 可以操作浏览器底层的设计 _datas = Symbol("内部维护一个数组来模拟set") // 这里用户可以传入参数，也可以不传递参数 constructor(iterator = []) { if (typ.原创 2020-06-21 09:44:27 · 250 阅读 · 0 评论 -
js 使用fetch来上传文件 formdata()
<input type="file" name="" id="file"> <script> // 文件上传 // 流程: // 1. 客户端将文件数据发送给服务器 // 2. 服务器保持上传的文件到服务端 // 3. 服务器响应给客户端一个文件访问地址 // 键的名称(表单域名称): 服务端要求 // 请求方法: Post // 请求表单.原创 2020-06-19 22:36:51 · 9163 阅读 · 2 评论 -
vue el-table导出数据表，不含有操作列和前面那个空白的checkbox
/**@this file function: 此文件是用于文件相关的助手类@author: Cll@Date: 2019/11/4 0004 10:58*/import XLSX from ‘xlsx’import FileSaver from ‘file-saver’import {TypeHelper} from “@/helper/typeHelper/TypeHelp...原创 2019-11-04 15:47:53 · 1705 阅读 · 5 评论 -
html5 h5 draggable的理解，及其实现拖拽功能
dragable:默认值为false,可以用于拖拽，但是一个虚拟的。a标签，img标签默认自带拖拽，(只有chrome,safari可以使用，firefox不支持，ie不支持),所有的标签元素，当拖拽周期结束后，默认事件就是回到原处，事件是由行为触发的，但是一个行为不止可以触发一个事件，可以触发多个事件拖拽周期： 拖拽开始，拖拽进行中，拖拽结束拖拽的组成： 被拖拽的物体， 目标区域被拖拽的物体：事件：ondragstart：拖拽开始事件， 拖拽开始需要移动一点才会触发，鼠标按下不会触发， e.原创 2020-05-16 10:25:24 · 2623 阅读 · 0 评论 -
css3 使用cloumns实现小说翻页功能
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>小说翻...原创 2020-05-04 14:27:19 · 1015 阅读 · 0 评论 -
css3 实现elementui的手风琴效果
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>css...原创 2020-05-02 16:26:36 · 1024 阅读 · 0 评论 -
js实现数组去重，在原型链上开发
// 实现数组的去重 原型链开发Array.prototype.unique = function(){ var obj = {}, len = this.length, newArray = []; for (var i = 0; i < len; i++) { // 判断对象上的键值是否为undefined if (!obj[th...原创 2020-02-07 16:44:23 · 897 阅读 · 0 评论 -
js辨别数据的类型(包装类)
// 辨别原始值和引用值的数据类型// 1. 原始值 引用值// 实现思路如下： 对于5个原始值 string number boolean undefined null来说，出来null使用typeof判断出来是object的话，其他的都是正常的，对于引用值 array, objcet, function 等使用除了array 使用typeof 判断出来是object的外，其他的也是可以...原创 2020-02-07 16:22:10 · 276 阅读 · 0 评论