Markdown 语法

Markdown 的设计哲学

Markdown 的目標是實現「易讀易寫」。
不過最需要強調的便是它的可讀性。一份使用 Markdown 格式撰寫的文件應該可以直接以純文字發佈,並且看起來不會像是由許多標籤或是格式指令所構成。
Markdown 的語法有個主要的目的:用來作為一種網路內容的寫作用語言。

Read more

zepto判断左右滑动

var startPosition, endPosition, deltaX, deltaY, moveLength;
$(".content").bind('touchstart', function(e){
var touch = e.touches[0];
startPosition = {
x: touch.pageX,
y: touch.pageY
}
}) .bind('touchmove', function(e){
var touch = e.touches[0];
endPosition = {
x: touch.pageX,
y: touch.pageY
};

deltaX = endPosition.x - startPosition.x;
deltaY = endPosition.y - startPosition.y;
moveLength = Math.sqrt(Math.pow(Math.abs(deltaX), 2) + Math.pow(Math.abs(deltaY), 2));
}).bind('touchend', function(e){
if(deltaX < 0) { // 向左划动
console.log("向左划动");
} else if (deltaX > 0) { // 向右划动
console.log("向右划动");
}
});

jquery天时分秒倒计时

html

<div class="get-rt-time" data-time="2100-11-11 20:20:20"></div>
<div class="get-rt-time" data-time="2015-11-11 20:20:20"></div>

js

$(function(){
$.fn.funTime=function(msg){
var data="";
var _DOM=null;
var funDom = function(dom){
_DOM=dom;
data=$(dom).attr("data-time");
data = data.replace(/-/g,"/");
data = Math.round((new Date(data)).getTime()/1000);
var domTHML = '<em class="myday"></em><em class="split">天</em>'+
'<em class="myhour"></em><em class="split">时</em>'+
'<em class="mymin"></em><em class="split">分</em>'+
'<em class="mysec"></em><em class="split">秒</em>';
$(_DOM).append(domTHML);
funMsg(msg);
};
var funMsg = function(msg){
var range = data-Math.round((new Date()).getTime()/1000),
secday = 86400, sechour = 3600,
days = parseInt(range/secday),
hours = parseInt((range%secday)/sechour),
min = parseInt(((range%secday)%sechour)/60),
sec = ((range%secday)%sechour)%60;
if(hours < 10)
hours = "0" + hours;
if(min < 10)
min = "0" + min;
if(sec < 10)
sec = "0" + sec;
if(hours>0||min>0||sec>0){
$(_DOM).find(".myday").html(days);
$(_DOM).find(".myhour").html(hours);
$(_DOM).find(".mymin").html(min);
$(_DOM).find(".mysec").html(sec);
}else{
$(_DOM).hide();
$(_DOM).after(msg);
}
};
setInterval( funMsg,1000 );

return this.each(function(){
var $this = $(this);
funDom($this);
});
}

//应用
$(".get-rt-time").each(function(){
var msg='<div class="mask_end"><span>活动结束</span></div>';
$(this).funTime(msg);
});
});

jquery倒计时页面跳转

$(function(){
funTimeout(); //应用倒计时
})
//倒计时
var strTime = 10; //设置时间
var strTimeBox = $(".time-box"); //数字容器
function funTimeout() {
strTimeBox.html(strTime); //显示数字
strTime--;
if (strTime == 0) {
window.opener = null;
window.location.href = "http://www.baidu.com/";
}
else {
setTimeout("show()", 1000);
}
}

checkbox 全选 反选

//checkbox全选反选
function funCheckbox(){
var intListAll, intListChecked;
$(document).on("click","input[name='all']",function(){
if($(this).is(":checked")){
$("input[name='all']").prop("checked",true);
$("input[name='list']").prop("checked",true);
}else {
$("input[name='all']").prop("checked",false);
$("input[name='list']").prop("checked",false);
}
})
intListAll = $("input[name='list']").length;//获取列表的个数
$(document).on("click","input[name='list']",function(){
intListChecked = $("input[name='list']:checked").length;
if(intListChecked == intListAll){
$("input[name='all']").prop("checked",true);
}else {
$("input[name='all']").prop("checked",false);
}
})
}

监听textarea的值的变化"propertychange"

js示例

<textarea onpropertychange="if(value.length>100) value=value.substr(0,100)"></textarea>

jquery示例

function funTestarea(){
var $testarea = $(".textarea textarea");
var $b = $(".textarea b");
$testarea.on("input propertychange",function(){
var $this = $(this);
var strNum = $.trim($this.val()).length;
if(strNum>100){
$(this).val($(this).val().substr(0,100));
}else {
$b.text(strNum);
}
});
}

跟随鼠标移动的悬浮提示框案例

js部分

$(function(){
$('<div id="tip_box"></div>').appendTo(document.body);
$(".mhover li").each(function (i) {
$(this).mousemove(function (ev) {
var str = $(this).data("ori");
var box = $('#tip_box');
box.show();
box.html(str);
var t = $(window).scrollTop();
var x = ev.clientX - box.width() - 40;
var y = ev.clientY + t - 15;
box.css({ left: x, top: y });
});
$(this).mouseout(function () {
$("#tip_box").hide();
});
});
})

html部分

<style type="text/css">
* { margin:0; padding:0; list-style:none;}
.mhover { margin: 50px auto 0; width:200px; border:solid 1px #ccc;}
.mhover li { height:30px; line-height:30px;}
#tip_box { position:absolute; top:0; left:0; background:#f00;}
</style>

<div class="mhover">
<ul>
<li data-ori="这里是需要显示的文字1">标题</li>
<li data-ori="这里是需要显示的文字2">标题</li>
<li data-ori="这里是需要显示的文字3">标题</li>
<li data-ori="这里是需要显示的文字4">标题</li>
<li data-ori="这里是需要显示的文字5">标题</li>
<li data-ori="这里是需要显示的文字6">标题</li>
<li data-ori="这里是需要显示的文字7">标题</li>
<li data-ori="这里是需要显示的文字8">标题</li>
<li data-ori="这里是需要显示的文字9">标题</li>
</ul>
</div>

textarea自适应高度

html部分

<textarea id="textarea" placeholder="回复内容"></textarea>
<script type="text/javascript" src="autoTextarea.js"></script>
<script>
var text = document.getElementById("textarea");
autoTextarea(text);// 调用
</script>

js部分

var autoTextarea = function (elem, extra, maxHeight) {
extra = extra || 0;
var isFirefox = !!document.getBoxObjectFor || 'mozInnerScreenX' in window,
isOpera = !!window.opera && !!window.opera.toString().indexOf('Opera'),
addEvent = function (type, callback) {
elem.addEventListener ?
elem.addEventListener(type, callback, false) :
elem.attachEvent('on' + type, callback);
},
getStyle = elem.currentStyle ? function (name) {
var val = elem.currentStyle[name];

if (name === 'height' && val.search(/px/i) !== 1) {
var rect = elem.getBoundingClientRect();
return rect.bottom - rect.top -
parseFloat(getStyle('paddingTop')) -
parseFloat(getStyle('paddingBottom')) + 'px';
};

return val;
} : function (name) {
return getComputedStyle(elem, null)[name];
},
minHeight = parseFloat(getStyle('height'));


elem.style.resize = 'none';

var change = function () {
var scrollTop, height,
padding = 0,
style = elem.style;

if (elem._length === elem.value.length) return;
elem._length = elem.value.length;

if (!isFirefox && !isOpera) {
padding = parseInt(getStyle('paddingTop')) + parseInt(getStyle('paddingBottom'));
};
scrollTop = document.body.scrollTop || document.documentElement.scrollTop;

elem.style.height = minHeight + 'px';
if (elem.scrollHeight > minHeight) {
if (maxHeight && elem.scrollHeight > maxHeight) {
height = maxHeight - padding;
style.overflowY = 'auto';
} else {
height = elem.scrollHeight - padding;
style.overflowY = 'hidden';
};
style.height = height + extra + 'px';
scrollTop += parseInt(style.height) - elem.currHeight;
document.body.scrollTop = scrollTop;
document.documentElement.scrollTop = scrollTop;
elem.currHeight = parseInt(style.height);
};
};

addEvent('propertychange', change);
addEvent('input', change);
addEvent('focus', change);
change();
};