Web前端
诸葛卍军师
面朝大海,春暖花开。
展开
-
@选人功能的具体实现
@提及功能,H5输入框实现@人员,PC输入框实现@人员功能原创 2022-12-12 18:20:39 · 1503 阅读 · 1 评论 -
H5关于meta设置,以及IOS底部兼容
IOS底部安全区域配置,移动端meta设置原创 2022-12-15 18:01:33 · 1550 阅读 · 1 评论 -
CSS媒体查询用法和示例
媒体查询原创 2019-01-02 11:43:56 · 2252 阅读 · 0 评论 -
修改Input 的placeholder颜色
尝试过几种写法,发现只有一种生效:::placeholder { color: #B2B5C8;}:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #B2B5C8;}::-ms-input-placeholder { /* Microsoft Edge */ color: #B2B5C8;}...转载 2019-01-02 11:25:14 · 129 阅读 · 0 评论 -
Storage 封装(浏览器兼容和设置过期时间)
localstorage, storage封装原创 2019-01-02 14:47:18 · 187 阅读 · 0 评论 -
React 中 componentDidMount 和 componentWillMount 谁先执行完?
React生命 周期函数componentDidMount 和 componentWillMount 的执行时间1. 执行顺序 componentWillMount函数肯定在componentDidMount之前运行,前者是文档加载前执行,后者是加载后执行。2.执行时间 需要具体分析,方法里可能会有xhr请求、定时器多种效果影响,需要注意代码书写。3.谁先...原创 2019-01-03 11:39:25 · 11589 阅读 · 1 评论 -
Js同步加载图片资源
//用法await img2base64("https://cdn-corner.resource.buzzbuzzenglish.com/qr-code.svg", 'anonymous');//封装的方法export const img2base64 = async (url, crossOrigin) => { return new Promise(resolve ...原创 2019-01-14 10:54:56 · 3461 阅读 · 0 评论 -
将Html页面转img图片功能
方案 将html转成canvas,再利用canvas导出img功能达到目的。 实现import html2canvas from 'html2canvas';function DPR() { if (window.devicePixelRatio && window.devicePixelRatio > 1) { return ...转载 2019-01-14 11:04:08 · 5442 阅读 · 1 评论 -
移动端 多屏适配方案
var dpr, rem, scale;var docEl = document.documentElement;var fontEl = document.createElement('style');var metaEl = document.querySelector('meta[name="viewport"]');dpr = window.devicePixelRatio |...转载 2019-01-23 14:48:56 · 437 阅读 · 0 评论 -
根据设计稿 -- 移动端单位的设置
引入less文件:// 设计图750 使用flexible// px ==> rem, 设计稿尺寸 除以 75,单位 rem// 使用例如: height:40*base;@base: round(1/75,6) * 1rem;// less 写一个minin// 使用方法:.px2rem(height,40);// 对属性进行设置// @name ----...原创 2019-09-27 10:56:17 · 355 阅读 · 0 评论 -
Ajax 文件上传显示进度条(支持取消)- 供自己查看
建议先封装一下XhrRequest:export default class xhrHelper { static createXHR() { if (typeof XMLHttpRequest !== "undefined") { return new XMLHttpRequest(); } else if (typeof A...原创 2018-11-26 12:22:49 · 746 阅读 · 0 评论 -
前端部分好用的库github上(个人记录)
M3u8播放器功能: https://github.com/video-dev/hls.js hls.js复制功能 : https://github.com/zenorocha/clipboard.js clipboardJS各种操作: https://github.com/lodash/lodash lodash时间格式等处理:https://github....原创 2018-11-26 12:13:30 · 195 阅读 · 0 评论 -
Node开发微信公众号
node之微信公众号开发本文章主要介绍本人开发微信公众号历程,主要包括微信token验证,授权登陆以及用户openid和公开信息获取,微信jssdk的调用,图片上传下载等功能(请你在阅读此文之前,务必浏览一遍微信官方文档,如果没有,请点这里):微信服务器token验证授权登陆用户openid信息获取基础Access_token的获取和缓存微信JSSDK、签名认证素材上传下载原创 2017-03-08 12:00:43 · 719 阅读 · 0 评论 -
前端系列“小”问题
记录一些前端小问题1.在Angular中,html中的onchange事件angular中的function不响应(不使用ng-model和ng-change情况下):html部分:onchange="angular.element(this).scope().videoChange()"angular部分:$scope.videoChange = function(){ console原创 2017-08-08 18:11:33 · 251 阅读 · 0 评论 -
前端实现视频录制功能
web端实现视频录制技术参考地址 github源项目地址 ,需要注意的是:浏览器内置 navigator对象navigator.mediaDevices.getUserMedia()需要https或者localhost才能访问获取用户摄像头,并且用canvas显示html 代码(我使用的是jade模板,现在已经更新为pug) h1 Hello p Welcome to bridge+ 视频面试原创 2017-11-22 12:14:00 · 23654 阅读 · 4 评论 -
NodeJs 读取服务器文件
NodeJs 读取视频文件近期接到项目需求:用户上传自己录制的视频,然后可以在前端查看处理后的视频文件:前端上传视频node接收并保存node读取视频文件node流传输前端上传用户录制自己的视频文件,并上传到服务器端:代码块前端使用jquery的ajax,核心代码: var oMyForm = new FormData(); // 创建一个空的FormData原创 2017-11-21 17:41:29 · 4997 阅读 · 0 评论 -
javascript中 异步时使用For和Map
异步时For和Map的区别看代码var videoList = [ {num:1}, {num:2}, {num:3} ]; for(var i in videoList){ setTimeout(function(){ console.log(videoList[i].num); },2000)原创 2017-12-19 10:51:15 · 1523 阅读 · 0 评论 -
H5修改标题(适用安卓和IOS)
H5修改标题,企微H5修改标题,页面修改标题原创 2018-04-17 10:03:02 · 1453 阅读 · 0 评论 -
web移动端开发-遇到的系列问题
(安卓)Audio标签播放问题 描述问题: 移动端 使用audio.play() 方法,在安卓上不会播放。 iphone支持 ontouchstart事件,android视为不安全,不支持。 解决方案: 1. 采用onclick~ 两者都支持。 2. 判断iphone和android,用不同的触发事件。 ...原创 2018-04-20 10:57:18 · 469 阅读 · 0 评论 -
原生JS移动端实现: 下拉刷新
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> &a转载 2018-06-03 10:14:20 · 4925 阅读 · 0 评论 -
原生Js滑动页面底部加载更多-- (注:单页应用和非单页-写法不一样)
1. 原生JS(适用于PC端,iphone上有bug-- 推荐使用第二种) //用于计算-当前窗口的高度function getClientHeight() { if(document.body.clientHeight&&document.documentElement.clientHeight) { return (document.bo...转载 2018-06-03 17:09:23 · 569 阅读 · 0 评论 -
JS滑动到页面顶部(或底部)
window.scrollTo(0, document.documentElement.clientHeight);原创 2018-05-24 16:39:57 · 43858 阅读 · 1 评论 -
React中阻止事件冒泡
stopPropagation: function(e){ e.stopPropagation(); e.nativeEvent.stopImmediatePropagation(); }转载 2018-06-14 11:59:17 · 3020 阅读 · 0 评论 -
原生Js实现轮播图(React +Redux)
1、js部分import React from 'react';import Client from "../../../common/client";import ServiceProxy from '../../../service-proxy';import Track from "../../track";import {connect} from 'react-redux...原创 2018-11-02 14:46:06 · 583 阅读 · 0 评论 -
微信浏览器中video标签 Z-index 过高遮挡页面问题
添加部分属性:<video controls id="video-introduction" x5-playsinline webkit-playsinline playsinline x-webkit-airplay="allow" x5-video-player-type="h5" width={d...原创 2018-11-15 10:03:34 · 13238 阅读 · 0 评论 -
如何清除浮动带来的影响
如何清除浮动带来的影响在前端开发中,清除浮动的方法有多种,开发人员可以根据自己的喜好选择不同的方式。给父元素添加一些属性添加空div元素本人经历的特殊情况父元素添加属性1、将设置float的元素的父元素也设置float。 父元素也设置浮动,局限性较大。3、设置父元素的overflow为hidden。4、设置父元素的display为inline-block。 缺点:可能不符合情况要求。原创 2016-10-24 23:18:44 · 735 阅读 · 0 评论