js
文章平均质量分 50
九段刀客
你期待的并且相信的,终将实现!
展开
-
JavaScript操作DOM总结
nodeTypeNode类型元素节点:1属性节点:2文本节点:3注释:8<!-- p,div,span,a标签都是元素节点 --><p>p标签</p><!-- p标签里面的内容是文本节点 --><!-- 空行也是文本节点 -->nodeName 和 nodeValue元素节点的nodeName始终是标签名(如...原创 2019-08-04 18:07:44 · 170 阅读 · 1 评论 -
canvas截图并转base64
canvas截图转base64原创 2022-10-18 18:38:18 · 295 阅读 · 0 评论 -
Canvas学习笔记之七:实现图片圆形剪切
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #test { box-shadow: 0 0 10px #333; } <...原创 2020-01-26 21:03:53 · 3066 阅读 · 0 评论 -
canvas画双条件线
const dom = ref_canvas.value; dom.width = 100; dom.height = 100; let ctx = dom.getContext('2d'); ctx.strokeStyle = '#fff'; ctx.lineWidth = 2; ctx.moveTo(0, 50); ctx.lineTo(50, 50); ctx.lineTo(50, 25); ...原创 2021-12-15 20:00:15 · 102 阅读 · 0 评论 -
Canvas学习笔记之五:插入图片和添加文字
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #test { box-shadow: 0 0 10px #333; } <...原创 2020-01-26 20:44:39 · 3635 阅读 · 0 评论 -
easy mock实现根据参数动态判断返回
{ "success": true, "data": { name: function({ _req,Mock }) { if (_req.query.name) { return _req.query.name + Mock.mock("@name") } else { return '姓名不能为空' } } }}原创 2022-04-28 18:53:34 · 507 阅读 · 0 评论 -
vue 项目中使用 axios + mockjs实现请求的拦截和数据模拟
先用vue-cli脚手架建一个项目,后面是项目创建完成的操作安装依赖npm install mockjs --save目录结构如下mock目录部分mock文件夹用来存放模拟的逻辑和数据,mock/index.js是一个入口文件,用来存放所有的mock入口,需要在main.js中直接引入import '@/mock/index.js',如果后期有一部分接口需要模拟,有些不需要模拟,可以在这个mock入口里写判断。import { login } from './login';login(.原创 2020-10-23 17:37:54 · 1193 阅读 · 0 评论 -
JavaScript高级程序设计学习笔记一:js数组push、pop、shift、unshift
push向数组末尾添加项let a = [1,2,3]a.push(4,5)console.log(a)pop删除数组最后一项let a = [1,2,3]a.pop()console.log(a)shift删除数组第一项let a = [1,2,3]a.shift()console.log(a)unshift向首添加项let a = [1,2,3]...原创 2020-02-10 13:46:15 · 289 阅读 · 0 评论 -
js实现函数柯里化
函数柯里化是把接收多个参数的函数,变换成接收一个单一参数的函数,并且返回接收余下的参数而且返回结果的新函数的技术。问题比如下面这到题:也就是要把传入的参数最终加起来返回结果。而每次传入的参数是未知的。那么解决办法等add函数的参数个数,和最终传入的参数个数一样时,再执行add方法。function curry() { //这个函数如何实现}function add(num1, num2, num3, num4) { return num1 + num2 + num3 + num4;}.原创 2021-03-11 18:18:50 · 326 阅读 · 0 评论 -
threejs 设置导入的gltf模型的大小
threejs设置导入的gltf模型大小原创 2022-06-19 20:03:57 · 4574 阅读 · 0 评论 -
node切换版本使用nvm
下载nvm并安装https://github.com/coreybutler/nvm-windows/releases查看可安装node的版本试过安装非这个列表里面的 版本卡住了,安装列表里面的非常快nvm list available安装指定版本的node···nvm install 14.17.2···已经安装版本查看nvm list 可以查看自己已经安装的nodejs版本列表切换和使用只能用管理员权限的cmdnvm use 14.17.2...原创 2022-05-28 12:39:24 · 397 阅读 · 0 评论 -
使用xlsx.js 40行代码实现excel预览
借助xlsx.js将excel转成table,自己再加点样式就可以了转成table的效果原Excel<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="node_modules/xlsx/dist/xlsx.full.min.js"></script&.原创 2022-05-27 19:59:12 · 1411 阅读 · 1 评论 -
js将数组中的相同项放在毗邻位置
<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title>原创 2022-03-08 19:29:20 · 587 阅读 · 0 评论 -
base64编码和解码
let encodedData = window.btoa("Hello, world"); // 编码let decodedData = window.atob(encodedData); // 解码原创 2021-09-01 10:12:44 · 123 阅读 · 0 评论 -
原生js实现将处理完的HTML代码添加到页面中
实现类似jQuery中的$(“body”).append(text)const dom = ` <div class="box"> <h4>记笔记</h4> <button class="btn-green" >绿色</button> <button class="btn-pink">粉色</button> <textarea class="words" style原创 2021-03-12 17:36:59 · 678 阅读 · 0 评论 -
用js的getSelection()实现类型电子书阅读器的划词文字高亮选中功能
这里只是一个demo帮助理解文字高亮选中的实现原理,还有多段选中,重复选中等功能没有实现,如果想用现成的产品可以参考一位大佬的博客https://segmentfault.com/a/1190000018981813<!DOCTYPE html><html lang="cmn"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device原创 2021-01-08 14:50:05 · 1394 阅读 · 1 评论 -
js监听滚动条判断滚动条触底
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .box{原创 2020-09-28 09:46:48 · 2782 阅读 · 0 评论 -
call,bind,apply的区别
功能bind\apply\call 都会改变函数调用时this的指向区别执行方式:apply\call会立即执行该函数,bind是返回绑定this指向后的函数,参数bind\apply\call 第一个参数用于this指向改变后的对象apply其余参数使用数组包裹参数,bind和call第一个参数用于this指向改变后的对象,其余参数直接传递示例代码<!DOCTYPE html><html lang="en"><head> <meta原创 2020-08-12 09:49:07 · 197 阅读 · 0 评论 -
简单的js和html实现,table导出多sheet的excel,不需要xlsx.js那些复杂的依赖
这个方法是从stack overflwo里面搬运过来的,原文地址<!DOCTYPE html><html lang="zh"><head> <meta charset="UTF-8"><script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script><body> <button onclick="tablesToEx原创 2020-06-17 18:34:01 · 2417 阅读 · 10 评论 -
js四舍五入,toFixed和Math.round的区别
先来个例子看下结果let num0 = 0.864let num1 = 0.865let num2 = 0.866console.log(num0.toFixed(2))console.log(Math.round(num0 * 100) / 100)console.log(num1.toFixed(2))console.log(Math.round(num1 * 100) / 100)console.log(num2.toFixed(2))console.log(Math.roun原创 2020-05-21 16:19:13 · 593 阅读 · 0 评论 -
前端用qrcodeJs生成二维码
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <div id="qrcode"></div> <scrip...原创 2020-05-04 10:38:14 · 346 阅读 · 0 评论 -
js获取当前天是一年中的第几天
解决思路用当前天的时间戳 - 当前年第一天的时间戳 ,用时间戳差计算出多少天。代码Date.prototype.getDayYear = function(){ const year = this.getFullYear(); const month = this.getMonth(); const date = this.getDate(); //当前年第一天0时0分0秒的时间戳...原创 2020-05-02 17:41:24 · 1693 阅读 · 0 评论 -
WebSocket前端连接和后端NodeJs服务
后端nodejs代码var express = require('express');var http = require('http');var WebSocket = require('ws');var app = express();app.use(express.static(__dirname));var server = http.createServer(app);...原创 2020-04-15 12:46:56 · 644 阅读 · 0 评论 -
父子关系数据转树格式数据,并实现排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script>let data = [ { label:'灯塔', ...原创 2020-04-02 17:12:56 · 256 阅读 · 0 评论 -
JavaScript排序
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> let a = [ { label:'武汉'...原创 2020-04-02 16:44:28 · 193 阅读 · 0 评论 -
父子关系数据,转成树结构数据
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> let data = [ { label:...原创 2020-03-31 12:18:43 · 544 阅读 · 0 评论 -
浏览器数据库indexedDB+vue实现简单的新增、删除和获取数据列表
代码<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .tips{ position: fixed; right: 0;...原创 2020-03-26 13:08:30 · 3121 阅读 · 1 评论 -
web worker API实现js多线程
使用一个主线程先看一下正常的单线程,需要等循环结束后,input才能输入,因为js和DOM渲染都在一个线程里面进行,for循环的js会导致阻塞。<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title>&...原创 2020-03-21 21:13:48 · 180 阅读 · 0 评论 -
js正则学习笔记去左右空格、去html标签、手机号验证、邮箱验证
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> body{ background-color: gray; } </style></...原创 2020-03-05 20:26:20 · 302 阅读 · 0 评论 -
uni-app配置Android证书,并查看证书md5和SHA1、SHA256
官方配置文档 https://ask.dcloud.net.cn/article/357771、安装Java的JRE官网下载地址(有点麻烦)https://www.oracle.com/technetwork/java/javase/downloads/index.html我用的野生下载地址https://www.cr173.com/soft/61157.html2、生成签名证书...原创 2020-02-26 14:43:36 · 3497 阅读 · 0 评论 -
前端实现语音合成功能
兼容性比较差PC端chrome、Firfox、Edge浏览器可以实现。移动端只有Firfox可以实现,测试过微信公众号,微信小程序,安卓的webview,华为浏览器等都不支持<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Docum...原创 2020-02-22 11:21:22 · 1208 阅读 · 1 评论 -
原生js和vue-jsonp实现jsonp跨域实现使用必应每日壁纸
原生js实现jsonp跨域注意jsonp跨域需要后台支持。实现效果这里是用的必应每日壁纸api代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><...原创 2020-01-09 11:04:33 · 881 阅读 · 0 评论 -
js拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #point { width: 100px; height: 100px;...原创 2019-12-20 17:59:20 · 108 阅读 · 0 评论 -
js中对数组的操作,forEach、every、filter、some、map、reduce、reverse
forEach对数组的每个元素执行一次提供的函数。功能和for循环类似不过不能提前终止循环。第一个参数,当前元素 必填第二个参数,当前索引 可选第三个参数,当前的数组 可选(一般不用)let a = ['tom','jeck','jep','jeck']a.forEach((item,index,array)=>{ console.log(item,index,array...原创 2020-01-03 15:56:17 · 252 阅读 · 0 评论 -
js数组includes和indexOf
includes存在返回true,否则返回falseindexOf:返回给定元素的第一个索引,没有返回-1<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><...原创 2020-01-02 18:05:14 · 202 阅读 · 0 评论 -
浏览器实现监测电池状态信息 navigator.getBattery
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script> navigator.getBattery().then(fu...原创 2019-12-20 10:07:03 · 826 阅读 · 2 评论 -
视口可见性浏览器API new IntersectionObserver() 实现图片懒加载
关于new IntersectionObserver()的详细文档可以参考 阮一峰IntersectionObserver API 使用教程效果代码<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title&g...原创 2019-12-19 10:56:45 · 318 阅读 · 0 评论 -
九段刀客:js九宫格转盘抽奖实现原理
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>九宫格抽...原创 2019-12-14 16:18:57 · 1222 阅读 · 0 评论 -
js获取文字宽度
必须要在DOM中后才可以获取到宽度let dom = document.createElement('span');dom.style.display = 'inline-block'dom.textContent = '测试文字宽度';document.body.appendChild(dom)console.log(dom.clientWidth)document.body.rem...原创 2019-12-09 15:08:42 · 3363 阅读 · 0 评论 -
js对HTML中class的增加、删除、查询
let dom = document.getElementById(‘id’)新增 dom.calssList.add('className’)删除 dom.classList.remove(‘className’)查询 dom.classList查<div id="test" class="box list"></div><script> l...原创 2019-12-08 11:21:46 · 560 阅读 · 0 评论