日期時間選擇器

使用bootstrap-datetimepicker來做出日期時間選擇器

<!DOCTYPE html>
<htmllang="zh-CN">
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript" src="./bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript" src="../js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" src="../js/bootstrap-datetimepicker.js" charset="UTF-8"></script>
<script type="text/javascript" src="../js/locales/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
<script type="text/javascript" src="./Chart.bundle.min.js"></script>
<link href="./bootstrap/css/bootstrap.min.css" rel="stylesheet" media="screen">
<link href="../css/bootstrap-datetimepicker.min.css" rel="stylesheet" media="screen">

</head>
<body>
<br/>
<div class="container">
  <div>
    <form action="" class="form-inline"  role="form">
		  <div class="col-sm-12 col-md-2">
            <select name='appleIDOption' id='appleIDOption' class="form-control" >
            <!-- <option value="volvo">Volvo</option>  -->
            </select>     
        </div>   

        <div class="form-group col-sm-12 col-md-9">
            <label for="dtp_input1" class="col-md-2 control-label">开始时间</label>
            <div id="startTime" class="input-group date form_datetime col-md-4" data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input1">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
			<input type="hidden" id="dtp_input1" data-date-format="yyyy-mm-ddThh:ii:ss" value="" />


            <label for="dtp_input2" class="col-md-2 control-label">结束时间</label>
            <div id="endTime" class="input-group date form_datetime col-md-4" data-date="" data-date-format="yyyy-mm-dd hh:ii" data-link-field="dtp_input2">
                <input class="form-control" size="16" type="text" value="" readonly>
                <span class="input-group-addon"><span class="glyphicon glyphicon-remove"></span></span>
				<span class="input-group-addon"><span class="glyphicon glyphicon-th"></span></span>
            </div>
			<input type="hidden" id="dtp_input2" data-date-format="yyyy-mm-ddThh:ii:ss" value="" /><br/>
        </div>		
    </form>	
		  <div class="col-sm-12 col-md-1">
          <button class="btn btn-default" id="query">查询</button>
        </div>
  </div>
</div>

<div id="charts" class="container" style="max-width:1600px;max-height:400px;"></div>

</body>
<script type="text/javascript">
    $('.form_datetime').datetimepicker({
        language:  'zh-CN',
        weekStart: 1,
        todayBtn:  1,
        autoclose: 1,
        todayHighlight: 1,
        startView: 2,
        forceParse: 0
    });

//沒有找到bootstrap-datetimepicker中轉出時間戳的格式,只好自己轉
//datastring後面不加+08:00的話Chrome會用+00:00,導致時間戳有誤
    $('#startTime').datetimepicker().on('hide', function(ev){
        $('#dtp_input1').val(Date.parse($('#dtp_input1').val().replace(' ',"T") + "+08:00"));
    });
    $('#endTime').datetimepicker().on('hide', function(ev){
        $('#dtp_input2').val(Date.parse($('#dtp_input2').val().replace(' ',"T") + "+08:00"));
    });

  $("#query").click(function(){
	    $( "#charts" ).empty();
	    var appleIDSelected = $('#appleIDOption').val();
//	    只取十位就好了
	    var startTime = $('#dtp_input1').val().substr(0,10);
	    var endTime = $('#dtp_input2').val().substr(0,10);
	    var postData = { appleID: appleIDSelected,startTime: startTime,endTime: endTime };
	    var jsonData = $.ajax({
		    url: 'keywordData.php',
		    method: 'POST',
		    data: postData,
		  }).done(function (results) {
//			  prepareChart(results);
		    });
	  });
</script>
</html>

中文WebFont體驗

Webfont中文字體效果

春有百花秋有月

3.1415926535897932384626433832795028841971693993751058209749445923078164062862089986280348253421170679

這裡使用了字蛛來製作中文webfont,它的作用是可以根據需要展現的中文來製作網頁字體文件,這樣就避免了中文字體文件過大的問題。使用字蛛需要Node.js,那麼就來安裝。

CentOS安裝Node.js

由於我已經使用了epel-release庫,所以只要yum install nodejs就搞定了,如果沒有使用epel-release庫,可以通過yum install epel-release來使用。

#查看node.js版本
node --version
#通常我們都需要npm這個包管理器
yum install npm
#我用的CentOS6,默認安裝的版本太低,升級node.js我用的nvm,node版本管理器
#使用下面的命令來安裝給當前用戶(檢查下網址,畢竟是要執行的東西)
curl https://raw.githubusercontent.com/creationix/nvm/v0.13.1/install.sh | bash
#想要使用nvm還有執行下下面命令先
source ~/.bash_profile
#現在可以吃用nvm查看可以安裝的node.js版本了
nvm list-remote
#選擇需要安裝的版本,然後安裝
nvm install v5.12.0
#把5.12.0設置為默認版本
nvm alias default v5.12.0
nvm use v5.12.0

使用字蛛

字蛛的文檔寫的不夠傻瓜,我是試了幾次才成功的,說說我的方法。首先準備好需要的ttf字體文件如OCR.ttf,然後準備一個網頁html文件如下:

<!-- index.html -->
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<style>
@font-face {
  font-family: 'OCR';
  src: url('font/OCR.eot');
  src:
    url('font/OCR.eot?#font-spider') format('embedded-opentype'),
    url('font/OCR.woff') format('woff'),
    url('font/OCR.ttf') format('truetype'),
    url('font/OCR.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}
p {
    font-family: 'OCR';
}
</style>
</head>
<body>
<p>這裡是需要用的字體文件的文字。</p>
</body>
</html>

我新建了一個font文件夾,這樣做出來的字體就會保存在font里而不是覆蓋同目錄下的font文件。原字體文件和html文件和font文件夾處於同一目錄中。接下來就很簡單了,安裝字蛛並執行。

#安装字蛛
npm install font-spider -g
#使用字蛛
font-spider index.html

打開font文件夾,就可以看到生成的各種webfont字體文件了。使用的方法和上面html里是一樣的,就不重複說了。

CSS tricks

關於響應式設計@media的基礎只是可以參考CSS3 Media Queries 詳細介紹與使用方法,我剛剛的需求是,手機端覆蓋正常的部分CSS代碼,只需這樣寫就好:

@media screen and (max-width: 767px) {
/* Common borders. */
.page-header,
.comment-list,
.author-info,
.comment-navigation,
.post-navigation,
.hentry:not(:last-child) {
  margin: 0 0 0 0em;
  padding: 0 0 0 0em;
  border-bottom: none;
} 

頁面底部浮動按鈕

<!--html-->
<div style="position: fixed; left: 50%; margin-left: -77px; bottom: 80px; width: 154px; box-sizing: border-box; text-align: center;">
    <div style="padding:10px 0; text-align:center;">  
        <span onclick="fbs_click1()" style="width:44px;height:20px;padding:0px;border-radius:20px;display:block;color:#fff;line-height:30px;z-index:1000; text-align:center;float:left;margin-right:15px;">
            <img src="facebook_share.png" style="width:44px;height:20px;"/>
        </span>
        <span onclick="shareToLine42()" style="width:40px;height:40px;background-color:#6db533;padding:0px;border-radius:20px;display:block;color:#fff;line-height:40px;z-index:1000; text-align:center;float:left;margin-right:15px;">
            LINE
        </span>    
        <span style="width:40px;height:20px;padding:0px;border-radius:20px;display:block;color:#fff;line-height:30px;z-index:1000; text-align:center;float:left;">
            <div class="fb-like" data-action="like" data-layout="button" data-href="https://www.facebook.com/yourPage/"></div>
        </span>   
    </div>
</div>
<!--js-->
<script>
function fbs_click1() { u = "http://yourdomin.com/yourpage"; t = document.title; window.open('https://www.facebook.com/sharer.php?u=' + encodeURIComponent(u) + '&t=' + encodeURIComponent(t), 'sharer', 'toolbar=0,status=0,width=626,height=600'); return false; };
function shareToLine42(){
  lineUrl="http://line.me/R/msg/text/?<?php the_title(); ?>%0D%0A<?php the_permalink(); ?>";
  window.open(lineUrl, 'sharer', 'toolbar=0,status=0,width=626,height=436');
}
</script>
<!--若要強制facebook彈出窗口的寬度,需添加css-->
<style>
.fb_iframe_widget>span { width: 309px !important; }
.fb-like-box iframe { width: 309px !important; }
</style>

css虛化圖片做背景:參考這兩個http://codepen.io/akademy/pen/FlkzBhttp://codepen.io/aniketpant/pen/DsEve

javascript and jQuery tricks

Selectors

如果頁面寬度小於1024就隱藏同時屬於.navigation.post-navigation這兩個類的元素:

if(jQuery(window).width()<1024){jQuery("#aa").show();jQuery('.navigation.post-navigation').hide();}else{jQuery("#leftShare").show();}
});&#91;/code&#93;
<p>根據時間觸發事件:</p>

        //默認30秒
        var timeWaitSec=30000;
        //檢查用戶在文章中是否設置了新的執行時間
        if((typeof timeWaitSecNew!='undefined') && (timeWaitSecNew>1)){
          timeWaitSec = timeWaitSecNew;
        }
        setTimeout("do_sth()", timeWaitSec);

根據頁面滾動百分比觸發一次性事件,:

var done = false;
jQuery(window).scroll(function(){

    var wintop = jQuery(window).scrollTop(), docheight = jQuery(document).height(), winheight = jQuery(window).height();
    var  scrolltrigger = 0.65;
	if(jQuery(window).width()<1024){scrolltrigger = 0.45;}else{scrolltrigger = 0.65;}

    //console.log('%scrolled='+(wintop/(docheight-winheight))*100);

    if  (((wintop/(docheight-winheight)) > scrolltrigger)&&(!done)) {
       do_sth();
       done = true;
    }
});

有時找到到js中中文string如\u8d70\u4e00\u6b65這樣的,是被轉換成了Unicode,可以用站長工具的Unicode轉換工具轉換回來。

如果找到的js文件是minified的,而又需要修改其中內容的化,可以用在線unminify工具進行還原。

倒計時

var wait=5;
timeOut();
function timeOut(){
	if(wait==0){
		feedbackObj.fadeOut(100,function(){
			feedbackObj.remove();					
		});
		$('#opacity-mask').fadeOut(100);	
	}else{					
		setTimeout(function(){
			wait--;
			$('.close-seconds>b').text(wait);
			timeOut();
		},1000)
	}
}

使用谷歌的jQueryCDN,如果CDN失敗則用自己服務器上的

<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript">
    window.jQuery || document.write('<script type="text/javascript" src="/common/js/jquery.min.js"><\/script>')
</script>

寬屏圖片居中的兩種方法

現在有些網站比較流行用100%寬度的圖片(div)佔滿屏幕,來營造出比較整體或是大氣的感覺。如果直接放一張大圖進去並禁止縮放,會發現瀏覽器是從圖片左側開始展示圖片,而我們想要的是主要顯示中間重要部分。有兩種方法可以做到,一種是利用CSS的背景居中,另一種是用js調整圖片的位置。Talking is cheap, here comes the code:

<style>
.wideBanner {background: rgba(0, 0, 0, 0) url("../images/bg.jpg") no-repeat scroll center center;height: 19px;}
</style>
<div id="wideBanner"></div>
<script type="text/javascript"> 
    $(document).ready(function(){
        var offset=($(window).width()-$("#wideBanner").css("width"))/2;
        $("#wideBanner").css("left",offset);
});
</script>
<div id="wideBanner"></div>

未知寬度div居中https://github.com/simaQ/cssfun/issues/3

     .container{width:500px;height:80px;background:#C2300B;margin-left:50px;padding-top:10px;text-align:center;}
     .center{display:inline-block;border:2px solid #fff;}
     .center{_display:inline;} /*针对ie6 hack*/
     .center a{float:left;border:1px solid #fff;padding:5px 10px;margin:10px;color:#fff;text-decoration:none;}
     <div class="container">
     <div class="center"><a href="#">1</a><a href="#">2</a><a href="#">3</a>
     <div style="clear:both"></div></div> 

Js AES加解密

密码:
原文:

密文:

加密js用的是Jeff.Mott.OR的crypto-js

PURE CSS3 3D CUBE

上面例子運行效率很差,在低版本的火狐中竟不能運行,所以如果真要做CSS 3D Cube是不推薦的。性能更佳的案例請參考:Create a CSS Cube