web H5
文章平均质量分 67
hyupeng1006
前端路上一起前进!互相关注、相互学习
展开
-
requestAnimationFrame详解-js性能优化
它是一个浏览器的宏任务requestAnimationFrame的用法与settimeout很相似,只是不需要设置时间间隔而已。requestAnimationFrame使用一个回调函数作为参数,这个回调函数会在浏览器重绘之前调用。它返回一个整数,表示定时器的编号,这个值可以传递给cancelAnimationFrame用于取消这个函数的执行。原创 2023-02-03 10:21:06 · 4484 阅读 · 0 评论 -
圣诞节下雪氛围代码-H5实现程序员的浪漫
此效果使用前端H5代码实现前四个是固定音乐,最后一个是可以选择自己存在电脑上的音乐 ,圣诞树会随音乐节奏闪动,氛围感满满。原创 2022-12-15 09:38:43 · 417 阅读 · 1 评论 -
前端缓存(浏览器缓存和http缓存)详解
web缓存主要指的是两部分:浏览器缓存和http缓存。其中http缓存是web缓存的核心,是最难懂的那一部分,也是最重要的那一部分。浏览器缓存:比如,localStorage,sessionStorage,cookie等等。这些功能主要用于缓存一些必要的数据,比如用户信息。比如需要携带到后端的参数。亦或者是一些列表数据等等。不过这里需要注意。像localStorage,sessionStorage这种用户缓存数据的功能,他只能保存5M左右的数据,多了不行。cookie则更少,大概只能有4kb的数据。....转载 2022-08-30 11:27:55 · 9963 阅读 · 6 评论 -
js获取数组中最大最小值及对应索引值
获取数组中最大最小值及对应索引值原创 2022-06-01 13:48:51 · 2112 阅读 · 0 评论 -
js 根据经纬度计算两地之间的距离
根据两地之间的经纬度来计算他们的距离。原创 2022-06-01 13:45:27 · 1017 阅读 · 0 评论 -
后端返回字符串类型的数组对象格式,使用JSON.parse转化报错问题
后端返回字符串类型的数组对象格式,js不能使用JSON.parse直接转,否则会报错这种情况需要使用eval转换 let val = "[{sec: 1, result: '123'}]" let valArr = eval('(' + val + ')') console.log(valArr)原创 2022-05-16 15:16:10 · 1324 阅读 · 3 评论 -
VUE实现高德地图轨迹绘制
步骤:安装依赖npm install vue-amap -Smain.js中注册import AMap from 'vue-amap'Vue.use(AMap)AMap.initAMapApiLoader({ key: '你申请的key', plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap..原创 2022-05-16 15:10:00 · 6747 阅读 · 5 评论 -
二维码扫码登录原理详解
二维码登录的本质二维码登录本质上也是一种登录认证方式。既然是登录认证,要做的也就两件事情! 告诉系统我是谁 向系统证明我是谁 比如账号密码登录,账号就是告诉系统我是谁, 密码就是向系统证明我是谁; 比如手机验证码登录,手机号就是告诉系统我是谁,验证码就是向系统证明我是谁;那么扫码登录是怎么做到这两件事情的呢?我们一起来考虑一下手机端应用扫PC端二维码,手机端确认后,账号就在PC端登录成功了!这里,PC端登录的账号肯定与手机端是同一个账号。不可能手机端登录的是账号A,而扫码登录原创 2021-09-23 15:15:45 · 3523 阅读 · 1 评论 -
前端模块化-总结
直接上demo。index.jsx:import React from "react";import ReactDOM from "react-dom";import { Button } from "antd";import ResizeableTable from "./ResizeableTable";import "./styles.css";const data1 = [ { key: 0, date: "2018-02-11", amount:原创 2021-07-14 11:37:23 · 2458 阅读 · 0 评论 -
页面性能优化办法有哪些?
引子互联网有一项著名的8秒原则。用户在访问Web网页时,如果时间超过8秒就会感到不耐烦,如果加载需要太长时间,他们就会放弃访问。大部分用户希望网页能在2秒之内就完成加载。事实上,加载时间每多1秒,你就会流失7%的用户。8秒并不是准确的8秒钟,只是向网站开发者表明了加载时间的重要性。那我们如何优化页面性能,提高页面加载速度呢?这是本文主要要探讨的问题,然而性能优化是个综合性问题,没有标准答案,想要面面俱到罗列出来,并非易事。本文只关注一些核心要点,以下是我总结性能优化常见的办法:一、资源压缩与合并原创 2021-06-16 09:25:50 · 2205 阅读 · 0 评论 -
项目实现登录携带token
1.用户第一次登录,调用后端登录接口,发送用户名和密码2.后端验证用户名和密码是否正确,成功则返回token,3.前端拿到token,将token存储在sessionStorge()和vuex中,并跳转到主页4.前端每次跳转路由就判断sessionStorge中是否有token,没有就跳转到登录页5.每次调用后端,都要在请求头部添加token6.后端判断是否有token,有token,就验证token,验证成功就返回数据,验证失败,token过期,或没有就返回4017.前端如果,拿到401就清除原创 2020-12-02 11:05:53 · 1024 阅读 · 0 评论 -
URL.createObjectURL和URL.revokeObjectURL用法说明及文件下载代码封装
一.URL.createObjectURLURL.createObjectURL()方法会根据传入的参数创建一个指向该参数对象的URL. 这个URL的生命仅存在于它被创建的这个文档里. 新的对象URL指向执行的File对象或者是Blob对象.语法:objectURL = URL.createObjectURL(blob || file);参数:File对象或者Blob对象这里大概说下File对象和Blob对象:File对象,就是一个文件,比如我用input type="f...原创 2020-11-24 15:41:48 · 2333 阅读 · 0 评论 -
decimal.js 解决高精度问题
js有精度问题, 对于一些金额的计算就总是与偶莫名其妙的问题 decimal.js是使用的二进制来计算的, 所以能解决js的精度问题基本的加减乘除因为只用到了基本的加减乘除, 其他的也没去研究 const a = 9.99; const b = 8.03; // 加法 let c = new Decimal(a).add(new Decimal(b)) // 减法 let d = new Decimal(a).sub(new Decimal(原创 2020-11-05 16:43:42 · 694 阅读 · 0 评论 -
多种异步函数执行顺序解析(如:setTimeout和promise同时存在的情况)
除了广义的同步任务和异步任务,我们可以分的更加精细一点:macro-task(宏任务):包括整体代码script、setTimeout、setInterval micro-task(微任务):Promise、process.nextTick 不同的任务会进入到不同的event queue。比如setTimeout和setInterval会进入相同的Event Queue。 s......原创 2020-03-24 17:57:12 · 977 阅读 · 1 评论 -
拿到JS异步函数返回值的几种方式
在我们的编码过程中,为了满足业务需求,经常需要获取JS异步函数的返回值。今天就来汇总一下拿值的几种方式。1,通过回调函数的方式来拿返回值,这个想必大家不会陌生function getSomething(cb) { var r = 0; setTimeout(function() { r = 2; cb(r)//回调函数 },10)}f...原创 2020-01-19 10:44:19 · 5798 阅读 · 0 评论 -
前端开发小技巧一
1、为形参y设置初始值。function log(x, y = 'World') { console.log(x, y);}log('hello') //hello worldlog('hello', false) //hello false(如果不用这种方式,而是在函数内部去判断是否为空,那么如果传过来的y值为 空或者为 布尔值的false,那么就会出问题)...原创 2018-12-04 15:47:29 · 150 阅读 · 0 评论 -
AJAX中出现OPTIONS请求
<h2 id="背景"><a href="#背景" class="headerlink" title="背景"></a>背景</h2><p>之前有一个项目使用<code>Zepto</code>来发送<code&转载 2019-01-21 19:54:50 · 2368 阅读 · 0 评论 -
jquery-获取form表单中的所有数据列表
<script>$(function() { $('#submit').click(function() { var d = {}; var t = $('form').serializeArray(); $.each(t, function() { d[this.name] = this.value; }); alert(J...原创 2018-11-16 10:48:42 · 2335 阅读 · 0 评论 -
如何用 CSS + HTML + JS 创建桌面应用
05月31更新于5月222018 Node如何用 CSS + HTML + JS 创建桌面应用 发表于 2018-03-28 | 热度241 ℃ | 字数统计: 2,327 (字) | 阅读时长: 10 (分钟) 最近研究了一下基于 Chromium 定制浏览器的方案,查阅了大量资料,具体方案也有了大概的蓝图转载 2018-11-08 13:39:37 · 1199 阅读 · 0 评论 -
Javascript API集锦
一、Array.find()和findIndex()原创 2018-11-09 10:17:13 · 205 阅读 · 0 评论 -
实战中前端开发技巧一
一、场景:根据后端返回的不用状态码,页面显示不同的内容,重点在于内容可以是自定义。html部分: <text class="status-{{ statemap[item.status].style }} ">{{ statemap[item.status].name }}</text>js定义在data中的自定义初始值:statemap: {001: { ...原创 2018-10-29 17:15:07 · 233 阅读 · 0 评论 -
js获取当天 当周 当月的开始时间和结束时间
function getSystemDate(){ var systemDate = new Date(); // 获取当年 var year = systemDate.getFullYear(); // 获取当月 (月+1是因为js中月份是按0开始的) var month = systemDate.getMonth...转载 2018-08-30 16:05:36 · 3270 阅读 · 0 评论 -
调用百度地图API---定位、显示热力图、路径导航等
版权声明:本文为博主原创文章,...转载 2019-07-15 15:36:58 · 1411 阅读 · 0 评论 -
CSS选择器
1、.van-cell:not(:last-child)::after {} (设置除了最后一个元素之外的其他元素)原创 2018-09-04 15:24:37 · 335 阅读 · 0 评论 -
js url 传递对象参数
使用 encodeURI() 方法,它可以接收一个字符串对象,在 JS 中就可以使用 JSON.parse() 转会对象。w3c给出的解释是: encodeURI() 函数可把字符串作为 URI 进行编码。 var eg = { keyName: 'U_key', MODULE_CODE: '123' PRIMARY_KEY: 'abc'}var jsonObj =...原创 2019-01-26 15:42:17 · 5465 阅读 · 0 评论 -
保留小数点后几位补0和不补0的情况 及数字前面补0的情况
一、保留小数点两位,但同时去除小数点后多余0前端javascript而言,因为小数点精度计算经常有误差,为确保得到2位小数点,调用了toFixed函数。但是,toFixed以后,不管小数点后是不是0,都保留2位。var a = 6.02;var b = 3.01var c = a/b.toFixed(2) ;//c得到了2.00var d = a/b.toFixed(2)*1...原创 2019-01-22 15:18:17 · 17730 阅读 · 0 评论 -
使用svg图标文字
准备:https://icomoon.io/app/#/select 使用现有的图标或导入自己的svg图标,生成之后download下来 解压后,只使用到 fonts文件夹和style.css ,把这两个放在自己的项目文件里使用:在要使用的html里,给某个元素添加上对应的图标文字的类名即可。如果要再对图标文字样式调整(比如:大小、颜 色),即再给这个元素另加一个类名进行调整原创 2018-02-01 10:16:04 · 1539 阅读 · 0 评论 -
js处理url链接参数
// 获取url完整链接let getQueryString = function (url, name) { // console.log("url = " + url) // console.log("name = " + name) var reg = new RegExp('(^|&|/?)' + name + '=([^&|/?]*)(&|/?|$...原创 2019-06-13 16:38:14 · 1217 阅读 · 0 评论 -
H5软键盘兼容方案
最近一段时间在做H5聊天项目,踩过其中一大坑:输入框获取焦点,软键盘弹起,要求输入框吸附(或顶)在输入法框上。需求很明确,看似很简单,其实不然。从实验过一些机型上看,发现主要存在以下问题: 在Android和IOS上,获知软键盘弹起和收起状态存在差异,且页面webview表现不同。 在IOS12上,微信版本v6.7.4及以上,输入框获取焦点,键盘弹起,页面(w...原创 2019-04-25 17:34:08 · 563 阅读 · 0 评论 -
js浅拷贝与深拷贝
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/baidu_36065997/article/details/80309991 </div> <link rel="stylesheet" href="...转载 2019-04-30 11:20:35 · 217 阅读 · 0 评论 -
移动端调试工具
移动端调试困难很多时候,我们在进行移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试,这个时候,如果没有出现问题,皆大欢喜。但是一旦出现问题,我们就很难解决,因为缺乏可视化的界面。不似在PC端,我们能直观的去改变样式,或者是进行断点调试。有时,在移动端我们不得不借助于alert来调试,但是这样的调试方法效率极其低下,很多时候,都是靠经验,或者是靠排...转载 2019-03-28 18:12:54 · 631 阅读 · 0 评论 -
jQuery获取当前元素是该父元素的第几个元素&获取父元素的第n个子元素
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <ul> <li>第一个元素</li&g...原创 2019-04-01 15:11:20 · 1907 阅读 · 0 评论 -
moment.js(js date)日期格式化
moment.js(js date)日期格式化处理插件强大,官方网站:http://momentjs.com/你也可以查看官方网站E文原版moment.js api。moment.js中文apiMoment.js简单易用的轻量级JavaScript日期处理类库当前日期格式化moment().format(‘MMMM Do YYYY, h:mm:ss a’); -> 四月 6日 20...原创 2019-02-14 18:11:22 · 4687 阅读 · 0 评论 -
js获取当前域名、Url、相对路径和参数以及指定参数
一、js获取当前域名有2种方法 1、方法一 var domain = document.domain; 2、方法二 var domain = window.location.host; 3、注意问题 由于获取到的当前域名不包括 http://,所以把获取到的域名赋给 a 标签的 href 时,别忘了加上 http://,否则单击链接时导航会出错...转载 2018-09-04 14:31:21 · 4561 阅读 · 0 评论 -
Sotket.io
客户端代码// Client (index.html)<script src="/socket.io/socket.io.js"></script><script> var socket = io.connect('http://localhost'); socket.on('news', function (data) { cons...原创 2018-08-09 16:21:36 · 176 阅读 · 0 评论 -
H5全屏
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .box{ width: 250px;原创 2018-02-28 15:21:26 · 365 阅读 · 0 评论 -
H5地理定位API
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title></head><body> <script>原创 2018-02-28 14:55:34 · 554 阅读 · 0 评论 -
H5多媒体-video
注:代码中引入的文件都没放过来,只看写的思路和方法就行<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <!-- 引入字体图标的文件--> &原创 2018-02-28 14:15:12 · 266 阅读 · 0 评论 -
CSS3-伪元素before和after
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> /* 伪 元素: 伪:假的 元素:标签* (:after :befo原创 2018-02-28 09:44:03 · 330 阅读 · 0 评论 -
CSS3-target伪类选择器
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <title></title> <style> .nav{ position: fixed;原创 2018-02-28 09:40:22 · 480 阅读 · 0 评论