技术
yzy_blog
这个作者很懒,什么都没留下…
展开
-
微信小程序中引入字体图标(阿里iconfont)
引言这篇博客算是转载的一篇文章,我在写一遍方便熟悉具体流程和方法。支持原博客作者,点击以下链接:微信小程序使用字体图标————————–更新一下—————————————————–最近发现阿里icon font官网中不可以直接在库中下载代码了,这里说一下,从哪里下载代码。将选好的图标加入库中,然后在库中点击 <添加至项目>如果没有项目,新建一个项目就好了然后在你的项...转载 2019-10-28 18:07:19 · 325 阅读 · 0 评论 -
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法(简单复制)
javascript 数组以及对象的深拷贝(复制数组或复制对象)的方法(其实有些是简单复制)前言在js中,数组和对象的复制如果使用=号来进行复制,那只是浅拷贝。如下图演示: 如上,arr的修改,会影响arr2的值,这显然在绝大多数情况下,并不是我们所需要的结果。 因此,数组以及对象的深拷贝就是javascript的一个基本功了。数组的深拷贝条条大道通罗马,实现数组的深拷贝,是...原创 2018-07-04 17:12:32 · 368 阅读 · 0 评论 -
一些简单排序方法
冒泡排序冒泡排序比较任何两个相邻的项,如果第一个比第二个大,则交换他们。var bubbleSort = function() { var length = array.length; for (var i=0; i<length; i++){ for(var j=0; j<length-1; j++){ if(arra...原创 2018-07-23 16:07:25 · 147 阅读 · 0 评论 -
栈
栈是一种遵从后进先出(LIFO)原则的有序集合。新添加的或待删除的元素都保存在栈的同一端,称作栈顶,另一端就叫栈底。在栈里,新元素都靠近栈顶,旧元素都接近栈底。function Stack() { let items = []; //向栈添加元素 this.push = function(element) { items.push(element); ...原创 2018-07-05 21:30:25 · 176 阅读 · 0 评论 -
队列
队列是遵循FIFO(First In First Out,先进先出,也称为先来先服务)原则的一组有序的项。队列在尾部添加新元素,并从顶部移除元素。最新添加的元素必须排列在队列的末尾。function Queue() { let items = []; //向队列添加元素 this.enqueue = function(element) { items.pus...原创 2018-07-05 21:59:44 · 484 阅读 · 0 评论 -
圆形进度条(canvas)
效果如下图:代码如下<canvas class="pull-right list_canvas" width="200" height="200" style="height:100px;width:100px"></canvas> function drawarc(percent, ctx, sR) { if (percent原创 2018-07-24 10:27:57 · 560 阅读 · 0 评论 -
改变video的src
直接改变video的source是不能播放视频的 <!-- 第一种 --> <video id="video_play"> <source src="" type="" id="video1"> </video> <button id="click1"&g原创 2018-07-24 13:23:57 · 9092 阅读 · 2 评论 -
集合(set类)
function Set() { let items = {}; //has(value)方法 //1 this.has = function(value) { return value in items; }; //2 this.has = function(value) { return item...原创 2018-07-06 18:36:58 · 1630 阅读 · 0 评论 -
前端性能优化
1.dns-prefetch2.请求合并合并请求减少http请求消耗,提升访问性能- css sprite- 静态资源合并(css,js合并)- 接口合并3.压缩压缩代码使css、js等静态文件变小。压缩图片使图片变小。- Css、js等静态资源压缩- 图片压缩,在不影响显示质量的情况下。- Gzip压缩4. http缓存基于http缓存的机制,我们...原创 2018-08-23 15:32:01 · 166 阅读 · 0 评论 -
img的url转base64
function getBase64Image(img) { var canvas = document.createElement("canvas"); $("canavs").hide(); canvas.width = img.width; canvas.height = img...原创 2018-08-28 18:38:11 · 5556 阅读 · 1 评论 -
turn.js
中文 API初始化参数配置选项<div id="flipbook"> <div class="hard"> Turn.js </div> <div class="hard"></div> <div> Page 1 </div> &原创 2018-08-21 19:50:15 · 1441 阅读 · 0 评论 -
前端问题记录
前端问题记录(转载:来源https://github.com/qianbin01/frontend_train) HTML相关 CSS相关 JAVASCRIPT相关 DOM相关 HTTP相关 VUE相关 算法相关 网络安全相关 webpack相关 Html相关1 html语义化意义:根据内容的结构化(...转载 2018-10-17 15:14:27 · 438 阅读 · 0 评论 -
函数表达式使用的注意事项
函数声明提升sayHi();function satHi() { alert("Hi");}//这个是没问题的,函数在代码执行之前会先读取函数声明。但是当使用函数表达式的时候下面的例子会抛出错误。sayHi(); //错误;函数不存在var sayHi = function() { alert("Hi");}函数声明与表达式之间的区别。//不要这样做i...原创 2018-10-30 11:37:29 · 468 阅读 · 0 评论 -
技术面试官的9大误区
版权声明:本文为foruok原创文章,转载请通过订阅号“程序视界”联系foruok获取授权。 https://blog.csdn.net/foruok/article/details/84522553如果你做过技术面试官,就至少犯过下面9大误区中的一个:压制求职者拿自己擅长的东西问求职者寻找全才根据自己喜好评判求职者盲目相信求职者自己说得太多,让求职者说得太少不了解公司、团...转载 2018-11-28 14:57:07 · 202 阅读 · 0 评论 -
解决mac上用chrome调试的跨域问题
open -n /Applications/Google\ Chrome.app/ --args --disable-web-security --user-data-dir=/Users/chanpin/Desktop/chromeData原创 2019-05-31 09:40:03 · 918 阅读 · 0 评论 -
使用渐变,一个div实现进度条
<style> div{ --c: #0ff; --p: 60%; height: 20px; background-color: silver; border-radius: 30px; background-image: radial-gradient(closest-side...原创 2019-08-14 17:55:23 · 392 阅读 · 0 评论 -
最常见的 Git 问题和操作清单汇总
引言本文整理自工作多年以来遇到的所有 Git 问题汇总,之前都是遗忘的时候去看一遍操作,这次重新整理了一下,发出来方便大家收藏以及需要的时候查找答案。一、必备知识点仓库Remote:远程主仓库; Repository:本地仓库; Index:Git追踪树,暂存区; workspace:本地工作区(即你编辑器的代码)二、git add 提交到暂存...转载 2019-08-28 16:21:06 · 165 阅读 · 0 评论 -
vue2.0之多页面的开发
vue2.0之多页面的开发我们平常用vue开发的时候总觉得vue好像就是专门为了单页面应用而诞生的,其实不是。因为vue在工程化开发的时候很依赖webpack,而webpack是将所有的资源整合到一块,弄成一个单页面。但是vue不止可以做单页面,它还可以做多页面,如果要做多页面的话需要对他的依赖,也就是webpack就是重新配置才可以。本文将详细讲webpack的配置。vue的开发有两种,一种是直...转载 2018-06-28 15:17:49 · 3230 阅读 · 1 评论 -
loading加载
页面加载时需要加载,请求接口也需要loading。在前端loading的需求无处不在,就是为了让用户体验更好。做loading的方式也有很多:下面我处理loading的用一张小的png图,yong .wgui-message{ position: fixed; top: 50%; left: 50%; z-index: 11010; ...原创 2018-06-27 17:12:56 · 18539 阅读 · 0 评论 -
HTML 5 Web 存储
在客户端存储数据HTML 5提供了两种在客户端存储数据的新方法:localStorage - 没有时间限制的数据存储sessionStorage - 针对一个session的数据存储之前,这些都是由cookie完成的。但是cookie不适合大数据的存储,因为它们由每个对服务器的请求来传递,这使得cookie速度很慢而且效率也不高。在HTML 5中,数据不是由每个服务器请求传递的,而是只有在请求...转载 2018-03-15 11:27:54 · 105 阅读 · 0 评论 -
react时间戳转换成需要格式
后端返回前端日期时间,一般给你的都是时间戳,然后前端展示需要转换成需要格式。以下是我开发中常遇到需要转换成的格式,看代码。class DateApi { /** * 将输入的毫秒字符串or毫秒数转换成指定的字符串格式 * @param {string} msStr 毫秒字符串 or 毫秒数 * @param {string} format yyyy-MM-dd...转载 2018-03-15 11:43:52 · 7245 阅读 · 0 评论 -
react秒转换成分钟的形式
有时候需要将秒转换成分钟class DurationApi { /** * 将输入的秒数 * @return {string} 转换后的01:23 */ static format(ms) { let fmt = ''; let minute = parseInt(ms, 10); let second ...原创 2018-03-15 11:46:41 · 1477 阅读 · 0 评论 -
jcanvas实现图片上传
jcanvas官网:https://projects.calebevans.me/jcanvas/中文翻译:http://asprain.cn/jCanvas/p843.htm具体实现:需要引入jcanvas.min.js,exif.js。 exif.js是修正图片带有exif的orientation信息的时候,在安卓上没办法正常显示的问题。html: <div class =“canvas...原创 2018-03-15 17:08:13 · 820 阅读 · 0 评论 -
css面试题
1 介绍一下w3c标准的CSS的盒子模型?与低版本IE的盒子模型有什么不同的?标准盒子模型:宽度=内容的宽度(content)+ border + padding + margin低版本IE盒子模型:宽度=内容宽度(content+border+padding)+ margin2 box-sizing属性?用来控制元素的盒子模型的解析模式,默认为content-boxcontext-box:W3C...转载 2018-03-19 15:56:23 · 234 阅读 · 0 评论 -
tab切换---react
直接上代码import React from 'react';import './tabChange.css'class TabChange extends React.Component{ constructor(props) { super(props); this.state = { tab: { current_index: 0, }, ...原创 2018-03-23 14:42:12 · 740 阅读 · 0 评论 -
美化type="radio"的样式
效果如上图。代码如下<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>radio</title> <meta name="viewport" content="width=d原创 2018-03-28 11:44:27 · 1720 阅读 · 0 评论 -
层级结构展开
json m = {“a”:1,“b”:{“c”:2,“d”:[3,4]}}转换成o = {“a”:1,“b.c”:2,“b.d”:[3,4]}一个朋友写的JS实现方法:函数JtoO(json){ var o = {}; var path = []; 函数s(json){ for(var i in json){ ...原创 2018-04-17 10:47:25 · 969 阅读 · 0 评论 -
不一样的方式实现text-decoration: underline;
你们有没有遇到过这样的需求呢???用text-decoration: underline;实现的是这样的,这样产品是不接受的。解决方法,利用背景图可以实现的。如下:背景图 代码:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>css下划线&a原创 2018-03-29 14:25:11 · 1096 阅读 · 0 评论 -
初识ReactJs
## react优势- 组件化,而不是写一大堆HTML模板js逻辑与HTML标签紧密相连并且极易理解- 单向数据流数据一旦更新,就直接重新渲染整个app,这是让react如此牛逼的关键点 ### 管理ui的状态并不简单 修改DOM树 修改数据 接收用户的输入 异步API数据请求 ### 和传统的服务器渲染相似 #### 传统方式 浏览器请求页面 服务器请求数据库 将数据传给模...原创 2018-04-12 11:05:59 · 166 阅读 · 0 评论 -
video在微信下小窗播放
video在微信下小窗播放ios,Android都支持代码如下<video src="merchant/hipp/Hipp_15s_0428.mp4" class="videoShow" preload="auto" x5-playsinline="" playsinline="" webkit-playsinline="" controls=""&转载 2018-04-13 16:02:22 · 1315 阅读 · 0 评论 -
react生命周期
- getDefaultProps对于组件来说,这个方法只会被调用一次。对于那些没有被父辈组件指定props属性的新建实例来说,这个方法返回的对象可用于为实例设置默认的props值。- getInitialState对于组件的每个实例来说,这个方法的调用次数有且只有一次。在这李你将有机会初始化每个实例的state。与getDefaultProps方法不同的是,每次实例创建时该方法都会被调用一次。在...原创 2018-04-13 18:12:03 · 130 阅读 · 0 评论 -
提示弹窗的封装
function showTip(tip, delay, position_top) { tip = tip || '出错,请检查'; position_top = position_top ? position_top : '50px'; position_top = (position_top.index...原创 2018-05-16 13:30:47 · 643 阅读 · 0 评论 -
react自制日期选择器
自己写的react日期选择器,有bug请留言。效果如图:代码如下:import React from 'react';class Calendar extends React.Component { constructor(props) { super(props); this.state = { year: props.year, month: props.month, day:...原创 2018-05-31 20:25:37 · 2050 阅读 · 0 评论 -
图片出错加载默认图片
html<img src="images/true.jpg" onerror="whenError(this)">jsfunction whenError(a){ a.onerror=null; a.src='images/error.png'; console.log("图片出错的时候调用默认图片")};原创 2018-06-08 18:40:14 · 2110 阅读 · 0 评论 -
无缝滚动
<div class="scroll_div "> <ul> <li></li> </ul></div>function scroll() { $(".ring_scroll_div ul").animate({ "margin-t原创 2018-06-19 10:44:04 · 158 阅读 · 0 评论 -
背景固定的效果fixed
- background-attachment:fixed兼容写法:.active_main::before { content: ' '; position: fixed; z-index: -1; top: 0; right: 0; bottom: 0; left: 0; background: url(../img/qmsd_bg.jpg) no-repeat 0 top #...原创 2018-06-27 10:01:03 · 1731 阅读 · 0 评论 -
适配移动端1像素边框
a.直接切图解决b.实现适配移动端1px边框,主要是根据设备的dpr来对边框进行缩放处理,CSS写法如下:.border-1px{ position: relative;}.border-1px::after{ display: block; position: absolute; left: 0; bottom: 0; width: 100%; bord...原创 2018-03-15 11:20:50 · 410 阅读 · 0 评论