web前端开发
文章平均质量分 53
灿尔哈擦苏
全栈进阶之路...
展开
-
react轮播图
引入swiper插件:var ComponentBanner=React.createClass({ //设置默认的数据源 getDefaultProps:function(){ return {sourceUrl: 'http://datainfo.duapp.com/shopdata/getBanner.php'} }, //设置原创 2017-08-15 17:28:38 · 4152 阅读 · 2 评论 -
webpack项目搭建
一、功能说明1.热更新2.支持less,es6,react的jsx转化3.生产环境开发环境配置4.chunkhash5.文件打包压缩、图片压缩6.自动生成html引入打包后的资源7.css3浏览器自动兼容二、创建文件目录1.新建一个文件夹myReactWebapp2.cmd进入这个文件夹下init,然后再进行插件安装(第三部分介绍)3.新建一个ind原创 2017-07-07 18:59:08 · 708 阅读 · 0 评论 -
正则获取img的src和其他属性
var reg = /<img src="(.*?)" dataUrl="(.*?)">/ig;var needHtml = html.replace(reg, '$2')div编辑器上传图片:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/D...原创 2018-03-16 16:38:08 · 2549 阅读 · 0 评论 -
js递归数据处理
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="http://apps.bdimg.com/libs/原创 2018-03-19 19:56:56 · 2717 阅读 · 0 评论 -
手机验证码倒计时组件
function Countdown(ele){ this.dom = document.getElementById(ele); this.getBtn = this.dom.getElementsByClassName('get_code'); this.showTime = this.dom.getElementsByClassName('show_time'); this.co...原创 2018-03-31 20:06:23 · 576 阅读 · 0 评论 -
table表格编辑保存插件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>蚁呼后台管理系统</title> <style> .layui-table .layui-bt原创 2018-04-16 11:19:19 · 1301 阅读 · 0 评论 -
gulp前端项目构架自动化配置
default.js:a//开发过程中 监听文件改变 var gulp = require('gulp');gulp.task('default', ['fileinclude','less','connect','cssmin','watch','minifyjs']);less.js:/** * [gulp description] 配置task * @type {[type]} */va...原创 2018-04-03 18:39:58 · 383 阅读 · 0 评论 -
js复选框插件
<div class="selectList selectQgClass" id="selectQgClass"> <div class="J_selAll selDataList" style="background: #e5e5e5;"> <span class="J_check check"原创 2018-03-29 15:53:31 · 1127 阅读 · 0 评论 -
react fetch请求
首先封装get:(get.js)import 'whatwg-fetch'import 'es6-promise'export function get(url) { // var result = fetch('http://www.mockhttp.cn'+url, { //打包apk时候使用 var result = fetch(''+url, { credentails:原创 2018-01-09 15:32:17 · 9068 阅读 · 0 评论 -
UDP传输数据
我们先创建一个server.jsvar dgram = require('dgram');var serverSocket = dgram.createSocket('udp4');// 服务器异常serverSocket.on('error', function(err){ console.log(`服务器异常:\n${err.stack}`);});//获取消息并转发出去serverS原创 2018-01-02 19:21:49 · 760 阅读 · 0 评论 -
css3文字波浪线
.bowen{position: relative;color: #953039;} .bowen:after{ content: ''; position: absolute; bottom: -2px; left: 5%; width: 90%; height: 2px; background: -w原创 2017-08-23 17:51:25 · 2417 阅读 · 0 评论 -
react配合antd
antd是蚂蚁金服推出的一款很棒的react ui库。官方网站:https://ant.design/docs/react/introduce-cn首先要有react环境安装:npminstall antd --save使用:import { 组件名称 } from 'antd'(比如import { Switch } from 'antd')还要引用其样式:import原创 2017-08-29 15:39:33 · 14722 阅读 · 0 评论 -
vue cli 打包后图片路径错误
找到build文件夹--下面的utils.js修改这个地方:改成这样if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, publicPath: '../../', fallback: 'vue-style-loader' })原创 2017-09-18 11:38:04 · 1023 阅读 · 0 评论 -
React Native环境配置
1、安装Java这里需要注意对环境变量的设置,可以根据java -version来检测一下2、安装SDK这里需要注意设置环境变量ANDROID_HOME:Android SDK Manager的位置 例如:(ANDROID_HOME=> E:\Android\sdk)设置环境变量PATH:例如:(PATH=> %ANDROID_HOME%\tools;%ANDROID_HO转载 2017-09-03 15:16:34 · 465 阅读 · 0 评论 -
音频进度条设置
/** * 播放audio标签视频控制 * */ //等待音频加载完毕 点击每一段录音进行播放 $('.lis').click(function(){ $('.j_voiceCont').show(); var src = $(this).attr("src"); $(this).addClass('c原创 2017-11-11 00:22:15 · 2498 阅读 · 0 评论 -
构造form表单上传
写在input的change事件里面if($("#uploaderInput")[0].files[0] != undefined){ //构造form表单上传 var a = new FormData(); a.append("image", $("#uploaderInput")[0].files[0]); //参数ima原创 2017-11-15 18:08:19 · 2512 阅读 · 0 评论 -
百度编辑器插入音视频bug修复
在config.js里面whitList白名单加入以下代码ul: ['class', 'style'], video: ['autoplay', 'controls', 'loop', 'preload', 'src', 'height', 'width', 'class', 'style'], source: ['src', 'type']原创 2017-12-22 16:03:52 · 1578 阅读 · 0 评论 -
dom结构拖动排序
//通过class获取元素function getClass(cls) { var ret = []; var els = document.getElementsByTagName("*"); for(var i = 0; i < els.length; i++) { //判断els[i]中是否存在cls这个className;.indexOf("cls"原创 2017-12-15 16:07:18 · 504 阅读 · 0 评论 -
微信小程序 验证码倒计时组件
实现一个小程序的验证码倒计时组件 <view class='listCode'> <view class='list'> <label>验证码</label> <input type='number' bindinput="bindCode" style='width:200rpx;height:98rpx...原创 2018-04-21 18:36:00 · 721 阅读 · 0 评论 -
微信小程序 父子组件传值通信
微信小程序父组件往子组件传值: 父:<getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode> 通过phone=”{{phone}}”传向子组件 子:properties: { phone: { // 属性名 type: Number, ...原创 2018-05-11 22:56:13 · 52945 阅读 · 7 评论 -
最少的代码实现3d轮播图
利用css3d转换,通过css控制和js控制节点的移除增加实现一个简单的轮播图<div class="swiperCont clearx" id="stage"> <div class="list">1</div> <div class="list" style="background: chartreuse;">2</div...原创 2019-03-22 17:45:30 · 805 阅读 · 0 评论 -
canvas拖尾效果
canvas实现粒子的拖尾效果/** * @Author SuZhe * @DateTime 2019-03-15 * @desc 兼容 requestAnimFrame * @return {[Function]} requestAnimFrame不兼容的浏览器使用定时器代替 */window.requestAnimFrame = (function(){ ...原创 2019-03-27 10:25:59 · 1983 阅读 · 0 评论 -
实现简易的redux
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>redux</title> </head> <body> <div id='count'></div> </body><...原创 2019-03-28 18:12:41 · 293 阅读 · 0 评论 -
js封面图片上传插件
/** * 上传插件 * @param {Object} op */function UploadCover(op){ this.cont = document.getElementsByClassName(op.ele); this.upSrc = op.src; this.formparam = op.formdata; this.init();}UploadCover....原创 2019-05-31 16:36:38 · 1230 阅读 · 0 评论 -
vue通信的N种方式
组件通信可以分为父子组件通信、非父子组件通信,可以是数据的传递,也可以是方法的传递,先介绍数据的相互传递,再介绍方法的相互传递。父组件到子组件传递数据:一、通过props,父组件可以传递动态和静态数据。//父组件<template> <div id="app"> //第一种静态数据 <HelloWorld msg="我是父组件的数据"/> ...原创 2019-06-26 01:43:09 · 1112 阅读 · 0 评论 -
web component快速使用
Web Components是一个浏览器的新功能,提供了一个面向web包括下面几个方面标准的组件模型。你可以认为Web Components是一个可复用的用户接口部件,属于浏览器的一部分,所以不需要一些额外的例如jQuery或者Dojo之类的工具库。一个存在的Web Components的使用完全不需要写代码,仅仅需要在HTML中加一个import 语句就可以了。Web Compone...原创 2019-07-12 01:19:48 · 903 阅读 · 0 评论 -
redux-saga简易实现
index.js:import { channel } from './channel'//promise判断const isPromise = p => { return typeof p.then == 'function' && typeof p.catch == 'function'}function createSagaMiddelware(...原创 2019-07-18 17:44:10 · 336 阅读 · 0 评论 -
js试题整理
洗牌:function shuffle(arr) { let i = arr.length; while (i) { let j = Math.floor(Math.random() * i--); [arr[j], arr[i]] = [arr[i], arr[j]]; }}柯力化:function add() { // ...原创 2019-09-01 13:08:45 · 514 阅读 · 0 评论 -
js 中间件
//function Middleware(){// this.cache = [];//}//Middleware.prototype.use = function(fn){//if(typeof fn !== 'function'){// throw 'middleware must be a function';//}//this.cache.push(fn);//retu...原创 2019-03-13 17:17:26 · 1131 阅读 · 0 评论 -
微信端音频插件
/** * @Author SuZ * @DateTime 2018-08-01 * @desc 微信端音频播放插件(pc、手机) * @param {[Object]} window [window] * @param {[Undefined]} undefined [undefined] * @param {[Jquery]} ...原创 2018-08-22 11:30:19 · 1326 阅读 · 0 评论 -
js无new构建对象
/** * @Author QG * @DateTime 2018-05-22 * @desc 省市联动选择插件 * @version [version] * @param {[Object]} forms [select form对象] * @param {[Object]} JQuery [jq] * @param {[Obje...原创 2018-05-22 16:26:50 · 674 阅读 · 1 评论 -
canvas绘制进度圆环
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><style>#cavas{..原创 2018-06-04 18:06:35 · 2848 阅读 · 0 评论 -
js编辑器插件
使用js实现一款简单的编辑器插件,可以实现文字的编辑,图片的上传操作。/** * 自定义编辑器 * @param {Object} id 编辑区 * @param {Object} control 操作区 */function insertImg(id, control, dataparams, fun){ this.bigBox = document.getEl...原创 2018-06-13 11:23:48 · 3412 阅读 · 0 评论 -
nodejs控制台打印图案
var a = [ "┌─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬─┬───┐".cyan, "│~ │!1│@2│#3│$4│%5│^6│&7│*8│(9│)0│_-│+=│ BacSp│".cyan, "├─┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬┴┬──┤".cyan, "│Tab │Q │W │E...原创 2018-05-30 16:27:38 · 3920 阅读 · 0 评论 -
快应用开发系列(一)
一、前期环境安装准备: 1、安装nodejshttps://nodejs.org/en/2、安装hap-toolkitnpm install -g hap-toolkit在命令行中执行hap -V会输出版本信息表示hap-toolkit安装成功,如下命令所示:hap -V升级hap updatehap update --force 强制升级3、手机安装快...原创 2018-05-30 18:38:22 · 4793 阅读 · 0 评论 -
canvas实现折线图插件
适用于手机端的折线图插件,通过canvas实现。 思路就是得到数据值,时间值,先画出x,y坐标轴,然后均分x轴,将时间点绘制上去,然后根据数据值,再求出x,y坐标点,使用lineTo绘制出连续折线图。注释在代码中。/** * @desc 绘制折线图 * @param {Object} defaultParam 配置参数 * @param {Object} id ...原创 2018-06-06 17:41:41 · 2683 阅读 · 0 评论 -
js实现全景图预览
&amp;lt;!DOCTYPE html&amp;gt;&amp;lt;html lang=&quot;en&quot;&amp;gt;&amp;lt;head&amp;gt; &amp;lt;meta charset=&quot;utf-8&quot;&amp;gt; &amp;lt;m原创 2018-05-31 17:59:01 · 9730 阅读 · 0 评论 -
下拉刷新上拉加载插件
源码:;(function($,window,undefined){ function ScrollUpLoad() { //返回此对象 return new ScrollUpLoad.prototype.init(); } ScrollUpLoad.prototype = { init: function() { ...原创 2018-06-28 12:15:37 · 798 阅读 · 0 评论 -
js虚拟DOM-DIFF算法实现
test.html:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>虚拟dom</title> </head> <body> <div id="root"></div> </bod...原创 2019-08-26 01:30:18 · 1554 阅读 · 4 评论 -
vue引入swiper插件
步骤一:安装vue, $ npm install vue步骤二:创建vue项目 # 全局安装 vue-cli $ npm install -g vue-cli $ cd my-project $ npm install $ npm run dev上面这些就是安装好vue项原创 2017-04-07 17:12:44 · 51863 阅读 · 12 评论