Skip to content

Instantly share code, notes, and snippets.

View zhangolve's full-sized avatar

zhangolve zhangolve

41 followers · 16 following
  • 北京
View GitHub Profile
@zhangolve
zhangolve / index.html
Created March 17, 2017 03:28
the very easy way to show the event bubble 事件冒泡
<!Doctype html>
<html>
<title>
the very easy way to show the event bubble
</title>
<body>
<div id="button">
<button id="1">1</button>
<button id="2">2</button>
<button id="3">3</button>
@zhangolve
zhangolve / index.css
Created March 14, 2017 06:41
CSS-display
.container{
display:table;
}
.cell1{
display:table-cell;
border:solid 2px black
}
.cell2{
display:table-cell;
border:solid 2px black;
@zhangolve
zhangolve / box-orient.css
Last active March 14, 2017 06:35
CSS3图解-动手敲代码 flexbox
/*@zhangolve 2017/03/13*/
/*我们注意到假如我们给这个盒子中每个div设置宽度为800px，也就是说总的主轴长度应该大于3200px了，
这个时候超过了屏幕的宽度，会出现一个overflow-x的滑块，这也在说明着这个伸缩盒子可以无限延伸，只要伸缩项目在伸缩盒子之内*/
div>div {
border:1px solid black;
width:800px;
height:200px;
text-align:center;
line-height:100px;
@zhangolve
zhangolve / multi-ajax-use-promise-2.js
Last active March 12, 2017 04:52
promise 练习
//https://github.com/getify/You-Dont-Know-JS/blob/master/async%20%26%20performance/ch3.md
function add(xPromise,yPromise) {
// `Promise.all([ .. ])` takes an array of promises,
// and returns a new promise that waits on them
// all to finish
return Promise.all( [xPromise, yPromise] )
// when that promise is resolved, let's take the
// received `X` and `Y` values and add them together.
.then( function(values){
@zhangolve
zhangolve / carousel.jsx
Created March 10, 2017 09:52
an react reuse component of carousel
@zhangolve
zhangolve / carousel-1.js
Last active March 10, 2017 08:27
very simple react carousel achieve 简单的react carousel实现
@zhangolve
zhangolve / index.html
Last active March 10, 2017 05:02
垂直居中的几种方法
<div class="container">
<div class="inner">
</div>
</div>
@zhangolve
zhangolve / index.html
Last active March 7, 2017 13:23
学习了解z-index 图层的概念 ，配合position使用
<div id="first">
<p>first</p>
</div>
<div id="second">
<p>second</p>
</div>
<div id="third">
<p id="content">third99</p>
@zhangolve
zhangolve / index.html
Last active March 7, 2017 12:25
position-fixed 布局效果查看
<div id="first" ></div>
<div id="second" >222222</div>
@zhangolve
zhangolve / greasemonkey-script-download-file.js
Created February 18, 2017 13:49
var data='col1,col2\nval1,val2';
var a = document.createElement('a');
a.href = 'data:application/gkl;charset=utf-8,' + encodeURIComponent(data);
//supported by chrome 14+ and firefox 20+
a.download = 'data.gkl';
//needed for firefox
document.getElementsByTagName('body')[0].appendChild(a);
//supported by chrome 20+ and firefox 5+
a.click();