关注
分享
面向Web3，春暖花开
这个作者很懒，什么都没留下…
展开
-
vue URL 显性显示query参数，不转义中括号[]
将路由中query参数正常显示在浏览器的URL中原创 2022-11-03 15:26:53 · 1092 阅读 · 0 评论 -
阻止 form 表单 input 回车触发 button 按钮 click 事件
如上代码，在 input 输入框中按下回车键会自动触发 Action 事件，这就会影响业务流程，也算是个bug，但这是为什么呢？方法1：给 button 加 type 类型方法2：给 input 加阻止回车鼠标事件相关链接vue 阻止事件冒泡，捕获方法阻止 form input 输入框按回车自动提交表单...原创 2022-06-15 16:53:52 · 2206 阅读 · 0 评论 -
阻止 form input 输入框按回车自动提交表单
发现问题：写东西时发现form 表单 中的 input 在 按下回车键（enter）时自动提交表单，而且在地址栏中显示提交的内容，这个东西就很鸡肋，我如果填的是密码，就会感觉这东西很不正规，那咱就找解决方法吧！解决过程在搜索时发现原来在 form 表单中只有一个 input 输入框时按回车键浏览器默认会触发表单提交，默认这两个字对 js 来说首先想到的就是 阻止浏览器默认行为，在此奉上一份vue 阻止事件冒泡，捕获方法文章，方便查阅解决方法找到问题的原因，那解决就很简单了，阻止浏览器默认行为不就得原创 2021-01-21 16:51:21 · 1124 阅读 · 0 评论 -
前端利用 i18n 实现多语言切换
前端实现多语言切换 ： 实现前端页面的资源国际化一、vue 中引用 vue-i18n 实现国际化安装 vue-i18nnpm install vue-i18n新建语言文件包： cn.js / en.js …cn.jsexport default { lang: 'cn', hello: '你好',}en.jsexport default { lang: 'en', hello: 'hello',}新建一个 i18n.js 中引入 vue-i18n （前提是要.原创 2020-11-17 17:01:01 · 4989 阅读 · 0 评论 -
前端 JS 调起打印机打印页面
window 对象有一个简单的方法可以直接调起打印机打印整个页面内容window.print();但是真正应用的时候肯定需要一个按钮点击打印，这个按钮肯定不需要显示在打印内容中，那如何打印指定部分的内容呢？这时候我们一定会想到 JS 中的截取内容方法——字符串截取（slice, substr, substring）Bingo，直接上代码：<body> <!--startpart--> <section> 需要打印的内容 </section>原创 2020-11-03 12:25:22 · 6963 阅读 · 3 评论 -
比较两个一维数字或字符串数组里的值是否相同
前提比较两个一维数字或字符串数组里的元素是否相同。数组长度相同，里面的元素顺序可以不同，但元素的内容相同。实现function compareArr(arr1,arr2){ //先比较两个数组的长度是否一样，若不一样那肯定是不相同 if(arr1.length!=arr2.length){ return false; } //初始化相同的元素个数为0 var count = 0; for (var i = 0; i < arr1.length; i++) {原创 2020-09-28 11:05:22 · 854 阅读 · 0 评论 -
js progress 滑动条实现投资计算器
此文为js实现投资计算器，并且对复投与非复投的盈利进行对比。如下图：技术方面就用到一个简单的滑块，因为感觉比较简单所以打算手写一下，不想再因为这一个小东西引入一个庞大的UI插件，该文就此诞生。滑块核心js就这么一点点，其余均为盈利计算。// 移动端事件onTouchEvent(e) { // 滑块移动横向距离 this.touchx = e.touches[0].pageX - 40; this.computedAmount(e.target.id);},// pc 端事件.原创 2020-05-08 18:50:15 · 403 阅读 · 0 评论 -
JS实现16进制转字符串
将一个十六进制的值转为普通的UTF字符串function hexTostr(hex) { var trimedStr = hex.trim(); var rawStr = trimedStr.substr(0, 2).toLowerCase() === "0x" ? trimedStr.substr(2) : trimedStr; var len = rawStr.length; ...原创 2020-01-20 15:37:05 · 6103 阅读 · 0 评论 -
js 自定义事件的使用和触发
1. 事件的创建JS中，创建事件方法，是使用Event构造器：var myEvent = new Event('eventName');为了能够传递数据，需要使用 CustomEvent 构造器：var myEvent = new CustomEvent('eventName', { detail:{ // 将需要传递的数据写在detail中，以便在EventLi...原创 2019-10-25 17:47:48 · 415 阅读 · 0 评论 -
js字符串方法大全
文章目录string对象构造函数concat方法 连接字符串indexOf 获取索引值startsWith endsWith includescharAt charCodeAt codePointA fromCharCodesubstr(fromIndex,length)substring(startIndex,endIndex)slice(startIndex,endIndex)split()分...原创 2019-10-24 14:38:43 · 1018 阅读 · 0 评论 -
js 排序算法
冒泡排序相邻两个对比，小的在前，function bubbleSort(arr) { for (var outer = arr.length - 1; outer > 0; outer--) { var isSort = true; for (var inner = 0; inner < outer; inner ) { if (arr[i...原创 2019-10-24 13:48:38 · 852 阅读 · 0 评论 -
国际手机号码格式化 和 手机邮箱中间部分用****替换
国际手机号码格式化1.下载libphonenumber-jsnpm i libphonenumber-js2.普通js用法在下载的文件里找到 libphonenumber-js --> bundle,这个文件夹里的js都是打包后的libphonenumber-js,根据项目需求引入不同的文件<script src="libphonenumber-max.js"><s...原创 2019-10-24 10:48:12 · 2544 阅读 · 0 评论 -
js cookie,sessionStorage,localStorage 操作
sessionStorage// 设置sessionStorage.setItem(name, val);// 获取sessionStorage.getItem(name);// 删除sessionStorage.removeItem(name);// 清空sessionStorage.clear();localStorage// 设置localStorage.setIt...原创 2019-10-21 18:37:02 · 473 阅读 · 0 评论 -
js获取地址栏参数
采用正则表达式获取地址栏参数因为工作中遇到要获取地址栏中的query参数，所以直接列出代码：function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).mat...原创 2019-08-30 15:18:26 · 217 阅读 · 0 评论 -
纯js实现双向数据绑定
对于投票页的选择与取消类似于外卖订单中的选择与取消，本demo没有用到MVC框架，纯js完成。由于数据量过大所以需要完成一个模糊搜索的功能进行选择与取消，所以引入了一个插件（dataTables) 。弹窗的效果直接用了该项目框架里的组件，也可以根据自己的喜好使用弹窗。或者自己写也可以，我是为了省事，哈哈。接下来直接附上源码：点击下载源码效果图： 我的个人博客,有空来坐坐...原创 2019-09-12 09:48:18 · 166 阅读 · 0 评论 -
JS 深拷贝与浅拷贝
文章目录引言一、简介1.浅拷贝2.深拷贝二、实现方法1.浅拷贝方法一：简直粗暴的直接赋值方法二：Object.assign(target,source) `ES6`方法三：for in 循环方法四：Object.create(target,source);2.深拷贝方法一：JSON.parse(JSON.stringify(source))方法二：递归拷贝方法三：Object.create()方法...原创 2019-09-12 09:47:41 · 116 阅读 · 0 评论 -
vue 阻止事件冒泡，捕获方法
要想了解 VUE 阻止事件冒泡和捕获方法，首先要了解一下 JS 事件和 JS 阻止事件冒泡，捕获方法1. js 事件的三阶段捕获阶段目标阶段:执行当前对象的事件处理程序冒泡阶段2. js 阻止事件冒泡，捕获阻止事件冒泡： event.stopPropagation() 或 event.cancelBubble = true (IE)阻止浏览器默认行为： event.preve...原创 2019-09-23 16:58:56 · 16955 阅读 · 1 评论 -
webpack4 + ejs + urllib-sync 构建注重SEO的多页面应用
导言：前段时间写了一个官网，因为是官网所以比较注重SEO，但是官网又是多语言，不同语言的meta又不同，为了方便爬虫爬取信息所以用到webpack，通过webpack打包成不同的语言文件 ( eg: cn,en,ko …)，webpack4 默认支持ejs语法1.首先配置webpackwebpck.base.js（只显示其中一小部分的配置）//利用glob.sync实现多页面打包con...原创 2019-09-23 18:42:12 · 821 阅读 · 0 评论 -
H5网页判断是否安装APP并调起APP
通常情况下，如果公司有APP则前端需要做的就是给APP下载做引流，即在一些活动页中做下载引导。可是在做下载引导的时候我们通常会遇到一个问题就是：如何查看是否安装此APP网页端如何调起此APP比如：调起某公司的APP只需要链接到 mathwallet://mathwallet.org 即可可是如果没有安装此APP则点击按钮就没有任何反应了，具体怎么判断是否安装了呢？请看以下代码&...原创 2019-09-29 18:47:49 · 4063 阅读 · 4 评论 -
如何用js改变伪元素样式
通常设置伪元素的样式直接用CSS很方便.test:after{ content:''; display:block; width:100%; height:100%; background:red;}可是有时候想用js动态的去改变伪元素的样式，但是js获取不到伪元素，这就很头疼，不过我们可以换个思路来解决这个问题:方法一：直接给元素追加一个<style>标签$('...原创 2019-09-30 10:02:13 · 2870 阅读 · 0 评论 -
简单ajax与jsonp封装方法
ajax的核心是通过XmlHttpRequest获取非本页内容，而jsonp的核心则是动态添加<script>标签来调用服务器提供的js脚本ajax函数封装function ajax(obj){ var defaults={ type:"get", url:"#", data:{}, dataType:"j...原创 2019-09-11 11:22:21 · 170 阅读 · 0 评论 -
一键领取勋章动画
css与js结合完成动画效果简单粗暴，直接上代码： 源码下载链接：https://wang_ya_nan.gitee.io/pages/image/2017/11/24/onekey_L9GCqtw.zip效果图：我的个人博客,有空来坐坐...原创 2019-09-11 10:31:27 · 371 阅读 · 0 评论 -
swiper与SUI框架轮播图冲突解决
swiper与SUI框架轮播图冲突解决代码<!DOCTYPE html><html> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>我的生活</ti...原创 2019-09-06 11:39:18 · 626 阅读 · 0 评论 -
js实现复制到粘贴板方法
js + clipboard 插件实现复制到粘贴板方法-兼容pc及移动端（ios/安卓）HTML: <div id="content”>复制改内容到粘贴板</div> <button id=“btn" data-clipboard-target="#content" data-clipboard-action="copy”>点击</butto...原创 2019-08-30 15:24:27 · 559 阅读 · 0 评论 -
js实现手机摇一摇功能
js的devicemotion事件监控手机晃动，判断用户晃动了手机 // 定义一个摇动的阈值:为了防止正常移动的误判，需要给该变化率设置一个合适的临界值 var shakeThreshold = 500; // 记录上一次摇动的时间 var lastUpdate = 0; // 定义x、y、z记录三个轴的数据以及上一次触发的数据 var x, y, z, lastX, ...原创 2019-08-30 15:22:48 · 1511 阅读 · 0 评论 -
JS生成二维码
利用js实现将链接或文字生成一个二维码。并且可以改变二维码的样式，二维码添加logo等。> 利用js实现将链接或文字生成一个二维码。并且可以改变二维码的样式，二维码添加logo等。那么如何实现呢？实现步骤：1.引入js : jquery.qrcode.js , jquery.js , utf.js<script type="text/javascript" src="js/...原创 2019-08-30 15:20:46 · 451 阅读 · 5 评论 -
js跳出循环
总结了几种循环跳出工作中遇到forEach循环需要跳出，试了break报错非法语法，return false也不起作用，因此总结一下以下几种方法终止（跳出）循环1. for循环var arr=[1,2,3,4,5,6];for(var i=1;i<arr.length;i++){ console.log(i) if(i==2){ break; }}//结果：...原创 2019-08-30 15:19:08 · 493 阅读 · 0 评论 -
JS防篡改对象
1. 一级保护措施：不可扩展对象在默认情况下，所有对象都是可以扩展的，也就是说，无论什么时候都可以向对象中添加属性和方法。例如以下，先定义一个对象，再向其添加一个新属性：`var obj = { name: "Tom"}obj.age = 20;console.log(obj.age); //20`即使先定义好一个对象，后面也可以向其新添加属性和方法。1.1 Objec...原创 2019-08-30 15:15:40 · 239 阅读 · 0 评论 -
js大整数运算
对于大整数，是指超过规定类型的整数，它一般的存储类型为字符串类型char。在JS中，需要将字符串中的每一位字符利用parseInt()转成整数，再做加减，否则最后的结果是字符串的连接举个栗子?9999999999999999 == 10000000000000000; // true当 x 大于 2^53 且二进制有效位数大于 53 位时，就会存在精度丢失。这和小数的精度丢失本质上是一...转载 2019-08-29 08:26:36 · 1335 阅读 · 0 评论 -
fancyBox入门
一款优秀的弹出框Jquery插件源码解读，快速上手<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <!-- 引包 --> <link href=...原创 2019-08-29 08:14:08 · 2672 阅读 · 0 评论 -
解决ios下的微信页面背景音乐无法自动播放问题
不支持audio的autoplay，部分的IOS微信（本文提供的解决方案）关于音乐自动播放的问题存在三种：支持audio的autoplay，大部分安卓机子的自带浏览器和微信，大部分的IOS微信（无需特殊解决）不支持audio的autoplay，部分的IOS微信（本文提供的解决方案）不支持audio的autoplay，部分的安卓机子的自带浏览器（比如小米，开始模仿safari）和全部的...原创 2019-08-31 07:59:16 · 712 阅读 · 2 评论 -
js提取图片主体色设置为盒子的背景色
此处用到了jquery.adaptive-backgrounds.js插件问题因为产品提出需求要将头像的主体色设置为父元素背景色，所以找到了好用的jquery.adaptive-backgrounds插件用法引入jQuery.js和jquery.adaptive-backgrounds.js引入文件之后,按照下面这样即可完成一个简单的demo：$(document).ready(f...原创 2019-09-01 10:13:39 · 1609 阅读 · 0 评论 -
js 数组方法大全
总结一下js中数组的一些方法以下所有例子中的 arr 数组均为 [1, 2, 3, 4, 5]，并且每个例子之间的arr相互不影响var arr = [1, 2, 3, 4, 5];一、遍历（9种方法）数组的遍历都 不会 改变原数组1. forEach作用： 对数组进行遍历返回值： undefinedvar arr2 = arr.forEach((value, index...原创 2019-09-06 11:35:49 · 417 阅读 · 0 评论 -
webpack4知识点—babel
解析es6:使用babel-loader先下载依赖包npm i @babel/core @babel/preset-env babel-loader -Dmodule.exports={ module:{ rules:[ { test/\.js$/, //————>指定匹配规则 ...原创 2019-09-04 10:14:44 · 307 阅读 · 0 评论 -
webpack4进阶知识点（二）
1.eslintjs代码检查工具,帮助发现代码错误规则，保持团队的代码风格统一 ：eslint-config-airbnb如何执行落地？和CI/CD系统集成和webpack集成使用eslint-loader，构建时检查js规范2.webpack打包基础组件和基础库library：指定库的全局变量libraryTarget:支持库的引用方式webpack.config.js...原创 2019-09-04 10:07:35 · 342 阅读 · 0 评论 -
webpack4进阶知识点（一）
1.移动端px自动转rem下载px2rem-loadernpm i px2rem-loader -D页面渲染时计算根元素的font-size使用手机淘宝的lib-flexiblenpm i lib-flexible -S并将其内联在网页内(raw-loader下节会讲解)<head> <script>${require('raw-loader!b...原创 2019-09-04 09:59:07 · 563 阅读 · 1 评论 -
webpack4基础知识点（二）
1.解析css,less,sass先下载依赖包//解析cssnpm i style-loader css-loader -D//解析lessnpm i less less-loader -D//解析sassnpm i sass sass-loader -Dmodule.exports={ module:{ rules:[ { ...原创 2019-09-04 09:49:30 · 161 阅读 · 0 评论 -
webpack4基础知识点（一）
1.安装好node,新建一个目录，进入该目录然后执行2.局部安装webpack，webpack-cli3.npm script 运行webpack4.webpack核心概念--entry原创 2019-08-27 12:20:16 · 293 阅读 · 0 评论 -
three.js入门 DEMO
css与js结合完成动画效果入门 DEMO<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script src="https://threejs.org/build/three.j...原创 2019-09-02 12:06:13 · 2606 阅读 · 0 评论 -
复制浏览器控制台打印的数据
因为控制台打印的数据内容层次很深，一个一个属性点开看很麻烦，怎么直接复制出来？因为控制台打印的数据内容层次很深，一个一个属性点开看很麻烦，怎么直接复制出来？下面来说一下具体步骤，简单方便，超级好用哦！！！方法一：1.点击数据右键会出现2.点击 Store as global variable ，然后会在控制台出现一个临时变量(如上图temp1)3.在控制台里执行copy(temp1...原创 2019-08-27 12:44:02 · 3332 阅读 · 1 评论