js
文章平均质量分 53
维多利亚少年-
科技来源于创新
展开
-
js正则校验[{key:xx,val:xx}]格式
通过js正则表达式校验指定格式[{“key”:“123”,“val”:“123”},{“key”:“123”,“val”:“123”}]原创 2022-11-26 19:26:55 · 198 阅读 · 0 评论 -
js正则校验IP和IP段
【代码】js正则校验IP和IP段。原创 2022-11-26 18:19:37 · 2052 阅读 · 0 评论 -
vue3 + vite中按需使用ace-builds实现编辑器
vue3中按需使用ace-builds在页面中实现编辑器原创 2022-09-15 16:59:58 · 7314 阅读 · 5 评论 -
js正则判断域名和IP的端口路径是否正确
通过正则来判断输入的ip端口路径http://127.0.0.1:3000/list是否正确const reg = new RegExp("/^http(s)?:\/\/(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|[0-9])\.((1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\.){2}(1\d{2}|2[0-4]\d|25[0-5]|[1-9]\d|\d)\:([0-9]|[1-9]\d{1,3}|[1-5]\d{4}|6[0-5]{2}[0-3][0-原创 2022-04-21 14:52:07 · 2782 阅读 · 0 评论 -
js 数组去重;排序数组;取大小值;对象数组排序
1.sort排序sort是es6新增的方法 排序会直接改变的是原数组const arr = [1,51,25,41,5]arr.sort((a, b) => { // b-a从大到小 a-b从小到大 return b - a})sort函数也可以排序对象数组const arrobj = [ { id: 1, name: 'haha' }, { id: 20, name: 'sasa' }, { id: 15, name: 'fafa' }原创 2022-03-12 21:16:26 · 509 阅读 · 0 评论 -
JS数据结构中的集合结构详解
不管是哪一种编程语言,都有集合。虽然 es6 中提供了 Set类,我们可以直接使用,但是这里为了让大家理解集合的内部实现机制,这里我们来手动封装一个 集合类 。什么是集合集合通常是由一组无序的, 不能重复的元素构成可以将它看成一种特殊的数组,特殊之处在于里面的元素没有顺序, 也不能重复没有顺序意味着不能通过下标值进行访问, 不能重复意味着相同的对象在集合中只会存在一份创建一个集合类主要是封装一个集合的构造函数,在集合中, 添加了一个 items 属性, 用于保存之后添加到集合中的元素. 因为原创 2022-03-09 13:34:33 · 1592 阅读 · 0 评论 -
网页阅读进度功能实现
通过js和css实现文章顶部的阅读进度功能使用 JavaScript 实现阅读进度功能1. html和csshtml css 部分非常简单,通过嵌套的两个 div 实现,外部的 div 提供底色背景,内部 div 显示阅读进度<head><style>.read_pro { position: fixed; top: 0; left: 0; width: 100%; height: 3px; background-colo原创 2022-02-09 14:16:27 · 1092 阅读 · 0 评论 -
File、Blob、dataURL 和 canvas 的详解与应用转换
基本介绍1. File(1) 通常情况下, File 对象是来自用户在一个 input 元素上选择文件后返回的 FileList 对象,也可以是来自由拖放操作生成的 DataTransfer 对象,或者来自 HTMLCanvasElement 上的 mozGetAsFile() API。(2) File 对象是特殊类型的 Blob,且可以用在任意的 Blob 类型的 context 中。比如:FileReader, URL.createObjectURL(), createImageBitmap(),原创 2021-05-14 15:20:49 · 298 阅读 · 1 评论 -
实现PC端的图片拖动效果
<!DOCTYPE HTML><html><head> <style> * { margin: 0; padding: 0; } #div1 { position: absolute; right: 50%; transform: translateX(-50%);原创 2021-03-29 16:44:36 · 285 阅读 · 0 评论 -
Js 数字每日动态增长的实现
let number = 0// 千位分隔符的动态数组let thousandsNumber = 0// 基础人数let baseNumber = 2100// 每天动态增加的人数 7个let curNumber = Math.floor((+new Date() - (4*60*60*1000)) / 1000000) + ''// 限制最大人数let maxNumber = Math.floor(Number(curNumber.substring(2, curNumber.length原创 2021-03-11 15:02:59 · 669 阅读 · 0 评论 -
canvas实现H5接物类小游戏
在vue中实现接物类小游戏先放张效果图<template> <div id="container"> <div id="guidePanel"></div> <div id="gamepanel"> <div class="score-wrap"> <div class="heart"></div>原创 2021-03-11 10:50:41 · 1349 阅读 · 1 评论 -
Js 将数字转换为大写金额
export const changeToChinese = (Num) => { //判断如果传递进来的不是字符的话转换为字符 if (typeof Num == "number") { Num = new String(Num); }; Num = Num.replace(/,/g, "") //替换tomoney()中的“,” Num = Num.replace(/ /g, "") //替换tomoney()中的空格 Num = N原创 2021-03-09 15:30:51 · 742 阅读 · 0 评论 -
Js 16进制颜色转RGB/RGBA字符串
export const colorToRGB = (val, opa) => { var pattern = /^(#?)[a-fA-F0-9]{6}$/; //16进制颜色值校验规则 var isOpa = typeof opa == 'number'; //判断是否有设置不透明度 if (!pattern.test(val)) { //如果值不符合规则返回空字符 return ''; } var v = val.replace(/#/原创 2021-03-09 15:27:43 · 613 阅读 · 0 评论 -
javascript执行机制(宏观和微观)
当拿到一段 JavaScript 代码时,浏览器或者 Node 环境首先要做的就是;传递给 JavaScript 引擎,并且要求它去执行。然而,执行 JavaScript 并非一锤子买卖,宿主环境当遇到一些事件时,会继续把一段代码传递给JavaScript 引擎去执行,此外,我们可能还会提供 API 给 JavaScript 引擎,比如 setTimeout 这样的API,它会允许 JavaScript 在特定的时机执行。所以,我们首先应该形成一个感性的认知:一个 JavaScript 引擎会常.原创 2021-03-07 22:26:19 · 381 阅读 · 0 评论 -
详细介绍javascript有哪些语法
1. 脚本和模块js有两种源文件:脚本(语句)和 模块(语句,import声明,export声明)脚本可由浏览器或者node环境引入执行;模块只能由import引入执行从概念上:脚本是主动性JavaScript代码段,控制宿主完成一定任务的代码;模块是被动性的JavaScript代码段,是等待被调用的库;现代浏览器可用script引入模块,加上type=“module”,如果不加这个,默认引入的是脚本,如果我们在脚本中使用export,会抛错<script type="module" s原创 2021-03-07 15:19:58 · 303 阅读 · 0 评论 -
教你成为代码绅士,写出高效简介的代码(2)
1. 与 (&&) 短路运算如果你只有当某个变量为 true 时调用一个函数,那么你可以使用与 (&&)短路形式书写。//badif (isLoggedin) { goToHomepage();}//goodisLoggedin && goToHomepage();当你在 React 中想要有条件地渲染某个组件时,这个与 (&&)短路写法比较有用。例如:<div> { this.state.isLoading &原创 2021-02-18 17:58:48 · 163 阅读 · 0 评论 -
vue动画-实现购物车的动态添加动画
需求分析:进入产品列表,点击缩略图旁+号,有个该商品被动态添加到购物车的动画。让我们实现这个动画吧。如下图:通过动图可以发现移动的曲线是蜿蜒曲折的,这就用到了贝塞尔曲线。他的弧度是这样的。贝塞尔曲线链接实现原理:先创建一个隐藏的圆点在购物车icon那里。当点击+号时,让圆点先移动到当前点击+的位置并让其显示。然后开始动画,让圆点移动回到原来的购物车icon位置并让其隐藏。使用vue提供的vue动画和贝塞尔曲线来实现移动动画vue动画详情链接HTML<template>原创 2020-08-11 16:41:31 · 2502 阅读 · 0 评论 -
编写简单的动态进度条
需求描述进入页面后动态生成进度条,并且展示百分比数字实现方案**通过transition和定时器等来完成这个功能html<div class="progress"> <div class="progress_bar"> <span class="progress_num"></span> </div> <!-- <div class="progress_bar">原创 2020-07-14 17:55:28 · 2728 阅读 · 0 评论 -
ios设备出现attempted-to-assign-to-readonly-property报错
attempted to assign to readonly property的中文解释为:尝试分配定义只读属性let tablist = document.querySelectorAll('.div')for (let i = 0; i < tablist.length; i++) { tablist[i].style = ''}// 或者let dom = document.querySelector('.div')dom.style = 'font-weight: 700原创 2020-07-13 17:10:46 · 7678 阅读 · 0 评论 -
js常用正则以及面试中的正则题
常用表单验证的正则/*是否带有小数*/function isDecimal(strValue ) { var objRegExp= /^\d+\.\d+$/; return objRegExp.test(strValue); } /*校验是否中文名称组成 */function ischina(str) { var reg=/^[\u4E00-\u...原创 2020-03-20 18:53:12 · 197 阅读 · 0 评论