php版本正負顏色千分號轉換


php版本正負顏色千分號轉換

在做網頁報表時,常用的格式轉換
此為php版本 , for laravel blade , 需要使用時可以依自己需求再修改

從外部參數傳遞給 $spend , 可接受 %


<style type="text/css">

    .LoseStyle{
 color:#E23636;
    }
</style>


<?php
       
     $spend02 = 0;
       
      if( substr($spend, -1) == "%" )
      (String)$spend02 = explode( substr($spend, -1) ,$spend  )[0];
      else 
      $spend02 = $spend;
        
      if( $spend02 >= 0 )
      {
            if( substr($spend, -1) != "%" )
            echo number_format($spend02,2);
            else 
            echo number_format($spend02,2).substr($spend, -1);
   
      }else{ 
?>
       
 <a class="LoseStyle">
 <?php 
       
      if( substr($spend, -1) != "%" )
      echo number_format($spend02,2);
      else
      echo number_format($spend02,2).substr($spend, -1);
       
 ?></a>
<?php } ?>

js 千分正負號顏色格式轉換


在做網頁報表時,常用的格式轉換


FormatNumber( 欲輸入的金額(可以是%數字) , 至小數點第幾位 , 欲修改之物件內容 , 是否開啟正負顏色);


ex :
FormatNumber( 1277.32 , 2 , BetScoreTag[i] , 1 );  


function FormatNumber(n , m , obj , c ) {
   
     var _tmpNum = n ; 
   
     if( String(n).substr(-1,1) == "%")
     {
         _tmpNum = Number(n.split("%")[0]);
     }
   
     _tmpNum = _tmpNum.toFixed(m);

     _tmpNum += "";
     var arr = _tmpNum.split(".");
  
     var re = /(\d{1,3})(?=(\d{3})+$)/g;
      
     var spend = arr[0].replace(re,"$1,") + (arr.length == 2 ? "."+arr[1] : "");
      
     if( parseFloat(spend) < 0 && c == 1 )
     {
           obj.style.color = "D81A1A";
     }
 
     obj.innerHTML = spend;
     
     if( String(n).substr(-1,1) == "%")
     obj.innerHTML = spend +(String(n).substr(-1,1));

}

jquery 拖曳 div 技術


在製作網站時,因某種需求要在
視窗特定範圍內可以拖曳,在某些範圍內不可













這邊做一個備忘錄



<!-- Javascript -->
<script>
$(function () {
        $("#drag").draggable({
                handle: "#handle"
        });
 
        $("#drag1").draggable({
                cancel: "#handle1"
        });
});
</script>
 
<!-- HTML -->
<div id="box" style="width:600px;height:200px;border:0px solid black;margin-bottom:5px">
    <div id="drag" class="drag">        
        <p id="handle">可拖曳</p>
        <p style="font-size:12px;">將滑鼠移到黃色區塊內即可拖曳此方框</p>
    </div>
   
        <div id="drag1" class="drag" style="cursor:pointer;">        
        <p id="handle1">不可拖曳</p>
        <p style="font-size:12px;">不在黃色區塊的範圍內都可拖曳此方框</p>
    </div>
</div>


參考文章 :
原文網頁連結

html 轉 pdf 教學

此篇為 html2pdf 備忘錄,

記載 :

1.將 html 內容轉換至 pdf
2.解決語系utf 問題
3.順道理解 ob_start() 緩存在php的作法

以下連結包含解決中文顯示的問題 , 搭配底下的 code 一起看
https://github.com/spipu/html2pdf


直接帶入code來看 , 分為兩部份


//Content.php
<table>

<?php for($i = 0 ; $i < 5 ; $i++ ){ ?>

 <tr>
 <td><?php echo "---->".$i."<br>"; ?></td>
 </tr>

<?php } ?>
</table>



<!-- 開始緩存 -->
<?php ob_start(); ?>

要轉成pdf的內容こんにちは世界

<!-- 取得緩存內容 -->
<?php $content = ob_get_contents(); ?>

<!-- 關閉緩存 -->
<?php ob_flush(); ?>

<!-- 關閉緩存 印出 -->
<?php ob_get_flush(); ?>

<!-- 關閉緩存 不印出 -->
<?php ob_end_clean(); ?>

<!-- 測試緩存內容 -->
<?php echo "<br>php Cache:".ob_get_contents()."<br>"; ?>

    <form method="post" action="html2pdf.php">
     <input type="hidden" name="Content" value=<?php echo $content; ?>
     <input type="submit" name="submit" value="Submit">
    </form>


整體的理解
1.整個 html 資源由上到下,若需轉成 pdf 部份 以 ob_start()為起始
2.執行 ob_start() 表由該行開始將內容記入 php 緩存
3.ob_get_contents 取出緩存內容放入變數 $Content 中
4.為什麼需要這麼做?網路上得到的解答是只有字串才能放入寫檔函式中
因此透過緩存返回的字串塞進轉換函式中

5.記入緩存的內容以下列兩種方式來清除
    5.1.ob_get_flush 清除緩存並且將緩存內容導致瀏覽器
    5.2.ob_get-_clean 只清除緩存




//html2pdf.php
<?php
    require_once(dirname(__FILE__).'../html2pdf.class.php');
    try
    {
     
     //freeserif
     $content = '<page style="font-family:javiergb">'.$_REQUEST['Content'].'</page>';
        $html2pdf = new HTML2PDF('P', 'A4', 'fr', true, 'UTF-8', 0);
        $html2pdf->pdf->SetDisplayMode('fullpage');
        $html2pdf->setDefaultFont('javiergb');
        $html2pdf->writeHTML($content, isset($_GET['vuehtml']));
        $html2pdf->Output('ticket.pdf');
    }
    catch(HTML2PDF_exception $e) {
        echo $e;
        exit;
    }
?>
html2pdf.php
這支檔案內容理解很簡單,單純將form post的內容傳送至此做轉換
唯一要注意是
$html2pdf->setDefaultFont('javiergb');
此字型支援 Utf 各種語系顯示,轉換出來的中文才會正常


google authenticator驗證教學

google authenticator驗證
可以在各語系下實行,C#,java
最近剛好在使用php,於是便有下列範例供參考





















相信大家玩遊戲為了防止自己辛苦拿到的道具被偷走,
都有用過 google authenticator 來做進一步帳號登入


其中邏輯非常簡單 , 取得 google api return 的 code
用該code與手機上取得的 6位數 字拼出一個結果

可以在google search任一個 git 下載
PHPGangsta/GoogleAuthenticator 其實裡面有一個 example code寫的很清楚
這裡底下看到是我重新改過符合現實的狀況


我們準備三支 php 檔案

//input.php
<form method="post" action="verif.php"> 
   <input type="text" name="inputAuth">
   <input type="submit" name="submit" value="Submit"> 
</form>


//verif.php
<?php

require_once '../PHPGangsta/GoogleAuthenticator.php';

$ga = new PHPGangsta_GoogleAuthenticator();

$checkResult = $ga->verifyCode("K12QLNQAICOTOP6C", $_REQUEST['inputAuth'], 1);// 2 = 2*30sec clock tolerance    
if ($checkResult) {
    echo 'OK';
} else {
    echo 'FAILED';
}


//getAuth
<?php

require_once '../PHPGangsta/GoogleAuthenticator.php';

$ga = new PHPGangsta_GoogleAuthenticator();

$secret = $ga->createSecret();
echo "Secret is: ".$secret."\n\n<br>";
//得出key(手動輸入)

$qrCodeUrl = $ga->getQRCodeGoogleUrl('Blog', $secret);
echo "Google Charts URL for the QR-Code: ".$qrCodeUrl."\n\n<br>";
//得出QrCode(手動輸入)
?>
這邊透過google api 可以產出 key , 跟 QrCode , 都可以在手機app設定上輸入
當然QrCode輕鬆多了不用輸入Key

每一次從手機上得到的 6位數字 與 api 產生的 key K12QLNQAICOTOP6C可以得出一個參數便是結果囉




CSS loading動畫



作者這邊分享幾個相當不錯以css來製作 loading 動畫的公開源碼的站台

要注意拿到 code 要再小小加工一下
為div 給它一個 id 方便 js 隱藏控制


<div id="c3" class="spinner" style="z-index: 999;visibility:hidden">
    <div class="rect1"></div>
    <div class="rect2"></div>
    <div class="rect3"></div>
    <div class="rect4"></div>
    <div class="rect5"></div>
</div>

在 css 裡面補上 ,使它可以跨越html結構,位移到自己想要的位置顯示

#c3{

    top:33%;
    left:27%;
    position:fixed;

}






















http://www.css-spinners.com/

















http://projects.lukehaas.me/css-loaders/
















http://tobiasahlin.com/spinkit/