h5トレーニングおよび販売システムのプロジェクト開発の要約

1.ブラウザファンの差し引き

0.1〜0.01

0.02 * 3 -0.01

小数点以下2桁を維持する必要があります。

（バックグラウンドで取得したデータにはすでに小数点以下2桁が含まれています。ページを表示します。小数点以下がない場合は、小数点を追加するか切り上げます）

function isDot（num）{
     var result =（num.toString（））。indexOf（ "。" ）;
    var length = num.toString（）。split（ "。"）[1 ] .length;
    if（result！== -1 && length == 2 ）{
         return num; 
    } else {
         return num.toFixed（2 ）; 
    } 
}

2.divクリックを無効にする

'ポインターイベント'： 'なし'

$（ 'div' ）.css（{
                  'background'： '＃ccc' 、
                  'pointer-events'： 'none' 
                }）;

3.終了日は開始日より後にすることはできません

var startTime = $（ ' ＃startTime ' ）.val（）;
 var endTime = $（ ' ＃endTime ' ）.val（）;
 if（startTime！== "" && endTime！== "" ）{
      if（new日付（startTime）.getTime（）> 新しい日付（endTime） .getTime （））{ 
            $（ '#endTime'）。Val（ "" ）; 
            bootbox.alert（ '終了時刻は開始時刻より後にする必要があります！' ）; 
           } 
  }

4. QRコードは24時間後に有効期限が切れます

                var d = new Date（）;
                // 计算24小 
                刻d.setTime（d.getTime（）+ 24 * 60 * 60 * 1000 ）;
                var year = d.getFullYear（）;
                var month = change（d.getMonth（）+ 1 ）;
                var day = change（d.getDate（））;
                var hour = change（d.getHours（））;
                var minute = change（d.getMinutes（））;
                var second = change（d.getSeconds（））;
                function change（t）{
                     if（t <10）{
                         return "0" + t; 
                    } else {
                         tを返す; 
                    } 
                } 
                var time = year + '-' + month + '-' + day + '' + hour + '：' + minute + '：' + 秒; 
                $（ '.once span'）。html（time）;

5.返品作成時間があり、現在の時間が24時間を超えているかどうかを計算します。

　　　　　　　　　　　 var d = new Date（）;
                     // 現在のタイムスタンプ
                    var cZ = d.getTime（）- data.createTime; if（cZ
                     > 24 * 60 * 60 * 1000 ）{ return   bootbox.alert（ 'QR code is invalid ！ ' ）; 
                    };

6.html2canvasの描画のスクリーンショット

HTML部分：

<a href = "＃" onclick = "savePic（）;" data-toggle = "modal" data-target = "＃myModal">保存图片</a> 
<！-模态枠（モーダル）-> 
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true"> 
    <div class = "modal-dialog" style = "margin：0; padding：5px;"> 
        <div class = "modal-content"> 
            <div class = "modal-header" style = "padding：5px;"> 
                <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true" style = "margin-right：10px;">×</ button>
        </ div> <！-/.modal-content-> 
    </ div> <！-/.modal-dialog-> 
</ div> 
<！- / .modal->

jsパート：

// クリックしてポスター
    関数を生成しますsavePic（）{
         var capture = document.getElementById（ 'capture' ）;
         var w = $（ ' ＃capture ' ）.width（）;
         var h = $（ ' ＃capture ' ）.height（ ）; 
        html2canvas（capture、{ 
            allowTaint：true 、
            taintTest：false 、
            dpi：window.devicePixelRatio // window.devicePixelRatioはデバイスのピクセル比率です

        }）。then（function （canvas）{
             var dataUrl = canvas.toDataURL（ "image / png "、1.0 ）、
                newImg= document.createElement（ "img" ）; 
            newImg.src = dataUrl; 
            newImg.style.width = w-50 ; 
            newImg.style.height = h-50 ; 
            console.log（newImg）; 
            $（ '#myModal .modal-body' ）.empty（）。append（newImg）; 
        }）; 
    }

7.携帯電話番号の定期的な判断（16項と19項の追加）

 var telReg = / ^ [1] [3,4,5,6,7,8,9] [0-9] {9} $ / ;
             if（！telReg.test（$（ " 。mobile " ） . val （）））{ 
                bootbox.alert（ '携帯電話番号の形式が正しくありません！' ）;
                 return ; 
 }

8.携帯電話番号の確認コードを取得し、60秒間カウントダウンします

     var countdown = 60 ; 
        
        function settime（obj）{
             if（countdown == 0 ）{ 
                obj.removeAttribute（ "disabled" ）; 
                obj.removeAttribute（ "class"、 "dis" ）; 
                obj.setAttribute（ "class"、 "input" ）; 
                obj.value = "获取验证码" ; 
                カウントダウン = 60 ;
                戻る; 
            } else { 
                obj.setAttribute（ "disabled"、true ）; 
                obj。 "class"、 "dis" ）; 
                obj.value = "重新発送（" +カウントダウン+ "）" ; 
                カウントダウン - ; 
            } 
            setTimeout（function （）{ 
                settime（obj）; 
            }、 1000 ）
        };

9.一番下までスクロールすると、readステートメントを確認できます

 // 一番下までスクロールバー-読んだところ 
    $（ " 。Content "）を確認できます。Scroll （function （）{
         var nScrollHight = $（this）[0] .scrollHeight; // 合計スクロール距離
        var nScrollTop = $ （この）[0] .scrollTop; // 現在の位置までスクロール
        VAR nDivHight = $（ "コンテンツ" ）.height（）;
         IF（nScrollTop nDivHight +> = nScrollHight）
            $（ "#radioShi"）removeAttr（。 'disabled' ）; 
    }）; 
//ラジオ機能をチェックし
     ますradioShi（）{
         if（$（ "＃radioShi"）。attr（ "disabled"）== "disabled"）{
            return bootbox.alert（ '電子契約の内容を読んでください！' ）; 
        } 
    }

10.タイムスタンプ変換YMD h：m：s

関数ADD0（M）{
     戻り M <10 '0' +？M：M 
} 
関数日付（タイムスタンプ）{
     VARの時間= 新しい日付（タイムスタンプ）。
    var y = times.getFullYear（）;
    var m = times.getMonth（）+ 1 ;
    var d = times.getDate（）;
    var h = times.getHours（）;
    var mm = times.getMinutes（）;
    var s = times.getSeconds（）;
    戻り Y + ' - ' + ADD0（M）+ ' - ' + ADD0（D）+ ' '+ ADD0（H）+'： '+ ADD0（MM）+'：' + ADD0（S）。
}

h5トレーニングおよび販売システムのプロジェクト開発の要約

おすすめ