js
关注
分享
扫一扫
文章平均质量分 63
灿尔哈擦苏
全栈进阶之路...
展开
-
最少的代码实现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 · 848 阅读 · 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 · 1177 阅读 · 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 · 1374 阅读 · 0 评论 -
下拉刷新上拉加载插件
源码：;(function($,window,undefined){ function ScrollUpLoad() { //返回此对象 return new ScrollUpLoad.prototype.init(); } ScrollUpLoad.prototype = { init: function() { ...原创 2018-06-28 12:15:37 · 828 阅读 · 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 · 9810 阅读 · 0 评论 -
canvas实现折线图插件
适用于手机端的折线图插件，通过canvas实现。 思路就是得到数据值，时间值，先画出x，y坐标轴，然后均分x轴，将时间点绘制上去，然后根据数据值，再求出x,y坐标点，使用lineTo绘制出连续折线图。注释在代码中。/** * @desc 绘制折线图 * @param {Object} defaultParam 配置参数 * @param {Object} id ...原创 2018-06-06 17:41:41 · 2724 阅读 · 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 · 4881 阅读 · 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 · 4008 阅读 · 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 · 3475 阅读 · 0 评论 -
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 · 2883 阅读 · 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 · 725 阅读 · 1 评论 -
微信小程序 父子组件传值通信
微信小程序父组件往子组件传值： 父：<getCode phone="{{phone}}" bind:myevent="onGetCode"></getCode> 通过phone=”{{phone}}”传向子组件 子：properties: { phone: { // 属性名 type: Number, ...原创 2018-05-11 22:56:13 · 53038 阅读 · 7 评论 -
js搜索 高亮匹配关键字，即时展示相关数据
searchCont:function(el,flag){ var _this = this; //空格替换 el.value = el.value.replace(' ',''); //关键字 var searchVal = $(el).val(); //目前只匹配电话高亮 if(...原创 2018-05-18 12:14:48 · 4542 阅读 · 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 · 804 阅读 · 0 评论 -
canvas拖尾效果
canvas实现粒子的拖尾效果/** * @Author SuZhe * @DateTime 2019-03-15 * @desc 兼容 requestAnimFrame * @return {[Function]} requestAnimFrame不兼容的浏览器使用定时器代替 */window.requestAnimFrame = (function(){ ...原创 2019-03-27 10:25:59 · 2059 阅读 · 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 · 329 阅读 · 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 · 1281 阅读 · 0 评论 -
react实现tree组件
一： 数据量小的结构index.less---------------------li > ul{ max-height: 0; transition: all .2s; overflow: hidden;}li.cur > ul{ max-height: 500px; transition: max-height .4s;}cr...原创 2019-09-06 15:07:32 · 5697 阅读 · 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 · 1677 阅读 · 4 评论 -
webpack 热更新源码实现
一、热更新原理服务端：1.启动webpack-dev-server服务器2.创建webpack实例3.创建Server服务器4.添加webpack的done事件回调 编译完成向客户端发送消息（hash和描述文件oldhash.js和oldhash.json）5.创建express应用app6.设置文件系统为内存文件系统7.添加webpack-dev-middleware中间件 ...原创 2019-08-12 16:24:54 · 3895 阅读 · 2 评论 -
vuex源码实现
let Vue;/** * [自定义foreach循环] * @author suzhe * @DateTime 2019-07-28T11:12:17+0800 * @param {[type]} obj [description] * @param {[type]} classback [de...原创 2019-07-28 17:40:42 · 334 阅读 · 0 评论 -
小程序云api封装
export const app = getApp();const db = app.globalData.dbconst tip = (text) => { wx.showToast({ title: text, 'icon': 'none', duration: 2000 })}//查找export const dbGet = (param)...原创 2019-07-25 16:30:12 · 1191 阅读 · 0 评论 -
react-redux简易实现
通过context传递数据，从provider组建中的props获取state，传给connect 高阶组件，使用高阶组件连接connect.jsimport React, { Component } from 'react'import PropTypes from 'prop-types'export const connect = (mapStateToProps, mapDisp...原创 2019-07-24 18:46:04 · 239 阅读 · 0 评论 -
react封装form受控组件
页面中多个表单，多个输入框，统一封装处理，formCreate为一个高阶组件import React from 'react';export const formCreate = WrappedComponent => class extends React.Component { constructor(){ super(); this.state={fie...原创 2019-07-24 11:57:21 · 1207 阅读 · 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 · 380 阅读 · 0 评论 -
web component快速使用
Web Components是一个浏览器的新功能，提供了一个面向web包括下面几个方面标准的组件模型。你可以认为Web Components是一个可复用的用户接口部件，属于浏览器的一部分，所以不需要一些额外的例如jQuery或者Dojo之类的工具库。一个存在的Web Components的使用完全不需要写代码，仅仅需要在HTML中加一个import 语句就可以了。Web Compone...原创 2019-07-12 01:19:48 · 1015 阅读 · 0 评论 -
js数组和树结构数据相互转换
数组转树结构采取递归和非递归两种方式，树结构转扁平化数组采取深度优先遍历（递归和非递归两种方式）和广度优先遍历实现。let arr =[ {id:2,name:'部门B',parentId:0}, {id:3,name:'部门C',parentId:1}, {id:1,name:'部门A',parentId:2}, {id:4,name:'部门D',parentI...原创 2019-07-10 17:06:04 · 15791 阅读 · 2 评论 -
vue通信的N种方式
组件通信可以分为父子组件通信、非父子组件通信，可以是数据的传递，也可以是方法的传递，先介绍数据的相互传递，再介绍方法的相互传递。父组件到子组件传递数据：一、通过props，父组件可以传递动态和静态数据。//父组件<template> <div id="app"> //第一种静态数据 <HelloWorld msg="我是父组件的数据"/> ...原创 2019-06-26 01:43:09 · 1179 阅读 · 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 · 1155 阅读 · 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 · 430 阅读 · 0 评论 -
table表格编辑保存插件
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>蚁呼后台管理系统</title> <style> .layui-table .layui-bt原创 2018-04-16 11:19:19 · 1336 阅读 · 0 评论 -
js冒泡排序和选择排序
Document var arr = [40,8,15,18,12] for(var i = 0;i<arr.length-1;i++){ //趟数 for(var j = 0;j<arr.length-1-i;j++){ //arr[j]; arr[j+1] if(arr[j]>arr[j+1]){ // j j+1; var temp = ar原创 2017-03-15 10:43:16 · 1180 阅读 · 0 评论 -
js的animate函数
/* 动画函数： dom:要运动的节点对象 o:{属性：目标值，属性：目标值....} (透明度使用属性：opacity:100) 透明度的值是0-100； 里面的opacity 和 filter会自动做转换。 time:切换的频率，表示运动的快慢 fn：回调函数，在运动执行完毕后执行。 */ funct翻译 2017-03-15 10:32:52 · 21577 阅读 · 0 评论 -
js上移下移功能
今天分享一下项目里面用到的一个小功能，实现上移下移的功能。 上移 下移 上移 下移 上移 下移 这里样式的话就不写了，可以根据自己的需求来定义，主要的还是逻辑部分。var moveUporDown= {原创 2017-03-15 09:57:26 · 4301 阅读 · 1 评论 -
js链式调用
有对jQuery感兴趣的小伙伴，在佩服它的强大之处，肯定也很好奇，它的点什么什么的链式调用很好用，那么今天用js来实现一下。123window.$ = function(){ return new _$(id);}function _$(id){ this.elements = document.getElementById(原创 2017-03-03 13:40:30 · 1144 阅读 · 0 评论 -
jQuery省市的二级联动
废话不多少 ，直接上代码jQuery 二级联动 $(document).ready(function(){ $("#province").change(function(){ $("#province option").each(function(i,o){原创 2017-03-03 12:28:34 · 2010 阅读 · 0 评论 -
canvas粒子
前几天看到的，三十行代码实现的一个粒子喷泉效果，运用了h5的canvas新增属性实现的，原作者我忘记了名字也没有搜到，好像是一个法国的工程师，太牛了，上代码！var ctx = document.body.appendChild(document.createElement("canvas")).getContext('2d');var i, j, k, a = [], w =转载 2017-03-03 17:52:55 · 1068 阅读 · 0 评论 -
js面向对象--封装
参考自阮一峰老师的文章。万物皆对象！一、生成实例对象--原始模式有一只猫我们把它看成一个对象，它具有两个属性--名字--颜色var Cat = { name : "", color : ""}下面我们生成两个实例对象var cat1 = {}cat1.name = "黑猫"; //按照原型对象的属性赋值cat1.color = "黑色原创 2017-03-23 15:39:43 · 816 阅读 · 0 评论 -
44个 Javascript 变态题解析 (上)
第1题 [“1”, “2”, “3”].map(parseInt) 首先, map接受两个参数, 一个回调函数 callback, 一个回调函数的this值 其次, parseInt 只接受两个参数 string, radix(基数).parseInt('1', 0); //默认十进制parseInt('2', 1); //参数不合法parseInt('3', 2); //因为3在转载 2017-03-22 18:00:27 · 593 阅读 · 0 评论 -
44个 Javascript 变态题解析 (下)
第23题[1 < 2 < 3, 3 < 2 < 1]这个题等价于1 < 2 => true;true < 3 => 1 < 3 => true;3 < 2 => false;false < 1 => 0 < 1 => true;答案是 [true, true]第24题// the most classic wtf2 == [[[2]]] //true第25题3.toString()3转载 2017-03-23 10:48:13 · 683 阅读 · 0 评论