標籤: HTML

當 CDN 失敗時回滾到自己的 js 資源

雖然 CDN 故障的概率非常微小，但是有些人爲的障礙卻可能導致用戶無法從 CDN 加載到資源。這時只要回滾到自己服務器上的資源就可以了，能用 CDN 的用戶優先才 CDN 加載，無法使用 CDN 的用戶從自己服務器加載。

<!DOCTYPE html>
<html>

<head>
  <!-- 在 head 裏調用 CDN 庫 -->
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</head>
<body>
  <p>網頁正文</p>
  <!-- 在網頁底部檢查一個 CDN 庫裏變量 -->
  <script>
    if (!window.jQuery) {
      document.write('<script src="js/jquery-3.2.1.min.js"><\/script>');
      document.write('<script src="js/bootstrap.bundle.min.js"><\/script>');
      document.write('<link rel="stylesheet" href="css/bootstrap.min.css" \/>');
    }
  </script>
</body>
</html>

標籤 HTML

程序

時間比較

文章作者作者: 42
文章發佈日期 2017/11/15
在〈時間比較〉中尚無留言

網頁版使用了moment.js。家裡的菲利普電飯鍋的預約功能需要輸入幾個小時後做好飯，而不是幾點幾分做好飯，每次都要扳着指頭數距離明天早上7點還有幾個小時。下面還有一個python版，可以放到termux里跑：

#!/data/data/com.termux/files/usr/bin/python
# -*- coding: utf8 -*-

#時間比較
import sys,datetime

#str轉換成datetime
def strTodaTime(s):
    if len(s)==19:
        return datetime.datetime(int(s[0:4]),int(s[5:7]),int(s[8:10]),
                                      int(s[11:13]),int(s[14:16]),int(s[17:19]))
    else:
        print("格式錯誤，--help查看幫助。")
        
#計算時間
def showTimeDuration(dtStr2='',dtStr1=''):
    if dtStr1 == '':
        datetime1 = datetime.datetime.now()
    else:
        datetime1 = strTodaTime(dtStr1)
    
    if dtStr2 == '':
        date2 = datetime.date.today() + datetime.timedelta(days=1)    
        time2 = datetime.time(7, 0)
        datetime2 = datetime.datetime.combine(date2, time2)
    else:
        datetime2 = strTodaTime(dtStr2)
        
    print(datetime2 - datetime1)

if __name__ == '__main__':
    if len(sys.argv) == 3 :
        showTimeDuration(sys.argv[1],sys.argv[2])
    elif len(sys.argv) == 2 :
        if sys.argv[1]=='--help':
            print('參數1默認是第二天早上七點，如2017-11-16T07:00:00。\n參數2默認是當前時間，格式同參數一。')
        else:
            showTimeDuration(sys.argv[1])
    else:
        showTimeDuration()

標籤 HTML

网站

黑屏

文章作者作者: 42
文章發佈日期 2017/03/08
在〈黑屏〉中尚無留言

我的這塊戴爾S2340Mc屏，黑色時完全就是一面鏡子！為了當鏡子用，我需要一塊黑色。另外div中height設1000%是不行，參考height: 100% not working。

浮動無邊黑屏

#!/usr/bin/python3
# -*- coding: utf8 -*-

#dnf install python3-matplotlib
#pip install matplotlib,fire

#指定起始坐標xy、寬度、高度和顏色，來畫一個填充好的矩形
#為了遮擋盜版電影頂部和底部的賭城廣告

import fire,matplotlib

def drawRectangle(x='0',y='0',width='400',length='400',color='black'):
    #"640x400+0+200"
    conf = str(width) + 'x' + str(length) + '+' + str(x) + '+' + str(y)
    # make sure Tk backend is used
    matplotlib.use("TkAgg")  
    import matplotlib.pyplot as plt
    # turn navigation toolbar off
    plt.rcParams['toolbar'] = 'None'
    plt.rcParams['figure.facecolor'] = color
    # create a figure and subplot
    fig, ax = plt.subplots(figsize=(2,2))
    #remove margins
    fig.subplots_adjust(0,0,1,1)
    # turn axes off
    ax.axis("off")
    # show image
    # im = plt.imread("black.png")
    # ax.imshow(im)
    
    # remove window frame
    fig.canvas.manager.window.overrideredirect(1)
    plt.get_current_fig_manager().window.wm_geometry(conf)
    plt.show()
    
#drawRectangle('10','980')

if __name__ == '__main__':
    fire.Fire(drawRectangle)

#默認在屏幕左上角生成一個400*400的黑屏
python drawRectangle.py
#在左下角（0，980）生成一個128*72的紅屏
python drawRectangle.py 0 980 128 72 red

本文更新於 2018/07/23。

標籤 HTML, python

网站

日期時間選擇器

文章作者作者: 42
文章發佈日期 2016/12/22
在〈日期時間選擇器〉中尚無留言

使用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>

標籤 HTML

网站

中文WebFont體驗

文章作者作者: 42
文章發佈日期 2016/09/09
在〈中文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里是一樣的，就不重複說了。

本文更新於 2022/01/28。

標籤 HTML

网站

CSS tricks

文章作者作者: 42
文章發佈日期 2015/12/01
在〈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/FlkzB，http://codepen.io/aniketpant/pen/DsEve。

本文更新於 2016/06/29。

標籤 HTML

网站

javascript and jQuery tricks

文章作者作者: 42
文章發佈日期 2015/11/26
在〈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>
[code language="javascript"]
        //默認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>

本文更新於 2016/06/29。

標籤 HTML