- 博客(59)
- 资源 (1)
- 收藏
- 关注
原创 React实例 webpack+react+redux+router
链接https://github.com/qingtonghub/redux-mix react redux的官网示例Counter:https://github.com/reduxjs/redux/tree/master/examples/counterTodos:https://github.com/reduxjs/redux/tree/master/examples/to...
2018-09-06 15:35:10
311
1
原创 react router Transition
使用react-create-appApp.jsimport React, { Component } from 'react';import { BrowserRouter as Router, Route, Link,Redirect,Switch } from "react-router-dom";import { TransitionGroup, CSSTransition...
2018-08-07 18:02:45
562
原创 javascript判断div是否通过视口
如图,图片或div随着滚动条的滚动进入视口在离开要判断div是否通过视口,可以通过js getBoundingClientRect来获取div距离视口的top bottom left right为了兼容IE getBoundingClientRect的两个像素之差:function GetRect (element) { var rect = element.getBoundingClie...
2018-05-07 17:01:20
1418
1
原创 正则表达式获取url中的参数
function GetQueryString(name){ var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = window.location.search.substr(1).match(reg); if(r!=null)return decodeURI(r[2]); return null;}假设ur
2017-11-20 15:19:04
4464
1
原创 JS判断移动端和pc端加载不同页面
<script> if (/mobile/i.test(navigator.userAgent)) { window.location = 'http://xxxx/mobile.html' }</script><script> if(!/mobile/i.test(navigator.userAgent)){ window.loca
2017-06-13 15:13:29
7101
转载 Vue Watchers
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link href="css/bundle.css" rel="stylesheet"> <style></style></head><body> <div id="watch-ex
2017-05-23 15:02:31
329
转载 bootstrap tooltip.js解析
+(function($){ var Tooltip = function(element,options){ this.type = null; this.options = null; this.enabled = null; this.timeout = null; this.hoverState =
2017-03-23 10:35:40
2058
转载 bootstrap modal.js解析
modal.csshtml { font-family: sans-serif; -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%;}body { margin: 0;}article, aside, details, figcaption, figure, footer, header, hgrou
2017-03-06 15:18:22
2155
转载 自定义jQuery 无缝Banner插件
自定义jquery插件分成三步//1、定义MyPlugin对象var MyPlugin = function(ele,opt){ //设置参数 //定义变量 //定义私有方法}//2、定义MyPlugin对象的方法MyPlugin.prototype = { init:function(){ //调用私有方法 //处理DOM
2017-02-24 10:39:31
924
原创 jquery select option选中
html:<select name="" id="aa"> <option value="a" data-id="a">a</option> <option value="b" data-id="b">b</option> <option value="c" data-id="c">c</option> <option value="d" data-id="d">d<
2017-01-12 14:46:11
504
原创 手机号验证输入自动填充空格
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <input type="text" id="inp"> <script src="jquery-1.12.3.min.js"></script> <scri
2016-12-13 11:31:51
1781
原创 css3按钮波纹效果
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> #box{ width: 200px; height: 60px; margin: 50px auto;
2016-12-09 16:08:24
3411
原创 css loading
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{ width: 100%; height: 200px; } .loading:a
2016-12-08 14:48:50
523
转载 js窗口拖拽
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> .box{position:absolute; left:100px; top:100px; padding:5px; width: 300px;height: 200px
2016-12-01 16:20:02
422
转载 CSS常用
*{margin: 0;padding: 0;list-style: none;}/** 清除内外边距 **/body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */dl, dt, dd, ul, ol, li, /* list elements 列表元素 */pre, /* text for
2016-11-28 11:55:39
363
原创 移动端div随手指移动
html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport"> <title>Document</title> <style> #box{position: fixed;left: 0;top: 0;width: 150px;heigh
2016-11-15 16:31:05
2036
原创 radio、checkbox样式修改
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/check.css"></head><body> <div> <label> <lab
2016-11-15 11:53:54
563
原创 获取本周/月第一天,最后一天,往前推几天,往后延几天
html:<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script src="date.js"></script> <script> var d = new getDate();
2016-11-15 10:07:02
1154
转载 js时间加往后延
function AddDays(date, days) { var nd = new Date(date); nd = nd.valueOf(); nd = nd + days * 24 * 60 * 60 * 1000; nd = new Date(nd); var y = nd.getFullYear(); var m = nd.getMonth
2016-11-08 15:33:37
1038
转载 js代码片段
$.fn.extend({ alertWhileClick: function(){ $(this).click(function(){ alert($(this).val()); }); } }); $.fn
2016-11-07 16:29:22
327
原创 移动端mixin的px转rem
1、多属性传递@mixin px2rems($pxs){ @each $key, $value in $pxs{ #{$key}: $value/$baseFontSize * 1rem; }}使用例子:.a{@include px2rems((font-size: 28,height: 90,line-height: 90,padding-left: 20,pa
2016-11-04 15:54:29
1229
原创 flex布局:justify-content
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <style> div#main{ display: flex; justify-content:flex-start;
2016-11-04 15:01:48
2753
原创 css3 animation
1、animation-name:@keyframes的名称 : ani 2、animation-duration:time 表示动画运行时间 1s 3、animation-timing-function: linear|ease|ease-in|ease_out|ease-in-out; 动画效果: linear:(匀速),linear 函数等同于贝塞尔曲线(0.0
2016-11-04 11:30:11
219
转载 linear-gradient的mixin
转载至https://www.sitepoint.com/building-linear-gradient-mixin-sass/@function legacy-direction($value) { @if is-direction($value) == false { @error "Cannot convert '#{$value}' to legacy syntax
2016-11-01 10:08:36
347
原创 移动端、PC端时间选择
网上mobiscroll插件实在是再过繁琐,将js和css压缩并合并了,以后用得着,只需引用三个文件即可 效果: 下载:http://pan.baidu.com/s/1pKYpR0R
2016-10-26 14:47:46
2598
原创 js input框自动补全
效果: css:div,p,h1,h2,h3,h4,h5,h6,ul,li,span,input{ box-sizing: border-box; font: 14px/20px "microsoft yahei";}div.wrap{ width: 240px; margin: 20px auto 0 auto;}.auto-inp{ width:
2016-10-11 16:01:24
9099
2
转载 js call与apply
// 类的继承function Person(name,age){ this.name = name; this.age = age; this.alertName = function(){ console.log(this.name); } this.alertAge = function(){ console.log(t
2016-10-10 09:24:34
216
原创 js对子节点操作
var len = 0;len = Obj.children.length;//或者 len = Obj.childNodes.length;
2016-10-08 15:18:42
2335
原创 js进度条制作
css:*{margin:0;padding:0;border:0;box-sizing: border-box;font: 14px/20px "microsoft yahei";}ul,ol,li{ list-style: none;}.hidden{ display: hidden;}div.wrap{ margin: 20px; height: 25
2016-10-08 14:47:11
548
转载 javascript复制到剪贴板
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title></head><body> <script type="text/javascript"> function copyUrl2(){ var Url2=document.getE
2016-09-30 17:36:09
385
原创 input框只能输入数字
只能输入正整数 1、方法一:<input type="text" onkeyup="checkRem(this)"> function checkRem(This) { This.value = This.value.replace(/[^\d]/g, ''); }2、方法二:<input type="text" onkeyup="this.value=this.value.rep
2016-09-27 16:18:30
766
原创 js的常用正则验证
// var re = /^[a-zA-Z]{1}([a-zA-Z0-9]|[_.]){4,19}$/; //只能输入5-20个以字母开头、可带数字、“_”、“.”的字串// var re = /^[a-zA-Z]{1,30}$/; //1-30位子串// var re = /^\d{2}-\d{5}$/; //两位数字、一个连字符再加 5 位数字// var re =
2016-09-23 11:31:14
361
原创 js中window.scroll与window.onmousewheel区别
1、使用window.scroll必须要有滚动条才能触发,一般配合$(window).scrollTop()使用. 2、window.onmousewheel,document.onmousewheel无论有没有滚动条都能触发 一般的兼容性写法:// 滚动注册事件if(document.addEventListener{ document.addEventListener('DOMMo
2016-09-14 11:31:50
4372
原创 CSS3新元素笔记
1、图片变成灰度模式img{-webkit-filter:grayscale(1);}效果:2、box-shadowbody{ background: #eee;}div.box{ width: 50%; height: 200px; background: #FFF; margin: 40px auto; position: relative;
2016-09-02 11:27:16
436
转载 CSS伪元素 :before :after
1、八卦制作 转载自:http://www.hulufei.com/post/about-before-and-after-pseudo-element css:#ba{ width: 96px; height: 48px; background: #eee; border-color: red; border-style: solid; bord
2016-09-02 10:53:00
346
转载 scss/css正六边形
scss:.hexagon { width: 100px; height: 55px; background: red; margin: 50px auto; position: relative; &:before, &:after { content: ""; position: absolute;
2016-08-31 14:14:15
317
原创 scss入门笔记
定义变量:**$linkColor: #08c;** /*使用*/a { text-decoration:none; color:$linkColor; &:hover{ **color:darken($linkColor,10%);** /* 颜色为10% */ } }
2016-08-31 10:49:29
639
原创 常见IE6 bug兼容总结
1.min-width,max-width/min-height,max-height兼容div{ max-height:600px; min-height:40px; _height:expression(this.scrollHeight > 600 ? "600px":(this.scrollHeight < 40 ? "40px":"auto")); }
2016-08-22 11:28:41
207
空空如也
TA创建的收藏夹 TA关注的收藏夹
TA关注的人