web端小知識點--持續更新

時間 2019-11-12

標籤 web 知識持續更新欄目 HTML 简体版

原文原文鏈接

一、彈性滾動
overflow:auto;
-webkit-overflow-scrolling: touch;
-mo-overflow-scrolling: touch;
overflow-scrolling: touch;
二、隱藏滑動條
::-webkit-scrollbar {width:0px;}
三、獲取url參數
<script type="text/javascript">
(function($){
$.getUrlParam = function(name)
{
var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
if (r!=null) return unescape(r[2]); return null;
}
})(jQuery);
$(function(){
alert(window.location.href);
alert($.getUrlParam('page'));
})
</script>javascript

或者用 var url = window.location.href 而後進行正則取出想要的數據
四、Base64編碼解碼
var encodedData = window.btoa("Hello, world"); // 編碼
var decodedData = window.atob(encodedData); // 解碼css

五、關於canvas畫圖html

canvas toDataURL 報錯 ——只能在服務器端
toDataURL 有兩個參數toDataURL("image/jpeg",0.9) 必須爲jpeg(這個困擾了很久很久！！！！)java

關於canvas畫圖有一點很尷尬，，就是咱們有個動態產生邀請函的頁面用的canvas畫的邀請函，toDataURL函數生生成的圖片是base64編碼的圖片致使在ios手機微信瀏覽器中長按保存圖片或者識別二維碼的時候，放大鏡會出現一瞬間，我猜想是ios把圖片顯示別稱文字了。。安卓和pc端和非ios微信瀏覽器都沒問題。（至今沒解決若是有人碰見過知道緣由或解決方法望分享。）ios

六、很小的一個問題就是checkbox全選的問題git

$("[name = checkbox]:checkbox").attr("checked", true);github

$("[name = checkbox]:checkbox").attr("checked", false);web

千萬不要這樣用！！！你會發現點徹底不選後全選失效碰見和checkbox有關的不要用attr方法用prop方法！！ajax

查了一下發現兩個方法都是取/修改標籤屬性值，若是標籤某屬性有true,false兩個屬性使用prop();chrome

七、模板渲染引擎 doT.js與handlebars.js對比

doT.js————能夠隨意更改界定符handlebars更改插值定界符很麻煩（這個能夠本身查）由於有時候後臺解析html會把{{}}包的看成變量。so這就尷尬了。並且doT.js輕量級&在if else 上要比handlebars方便&支持js（doT統共140多行。handlebars能夠棄了）

doT有個坑就是貌似會解析模板裏面的註釋。。SO若是碰見莫名其妙的報錯能夠在註釋裏面找找。

官網：http://olado.github.io/doT/index.html

八、關於ajax 請求發送數據爲數組時

這個發送後後臺收到的是 array[]=1&array[]=2...

這就致使後臺取不到數據。。能夠toString()...可是若是是多維數組就有坑了，由於toString（）後數組傳送到後臺就是1，2，3...

不論是一維仍是多維都沒法分辨了。。因此在多維數組的狀況下能夠加分隔符好比二維數組[[1,2],[3,4]]能夠轉換成1，2，#3，4#

九、表單上傳文件時 form表單必須加enctype="multipart/form-data"屬性，ajaxform.js能夠用一下。

十、1.使用內置的隨機數發生方法:
Math.random(); //該方法產生一個0到1之間的浮點數。
Math.floor(Math.random()*10+1); //1-10
Math.floor(Math.random()*24);//0-23

十一、輪播圖插件——swiper——https://github.com/amazeui/swiper

2、分享幾個 js 函數

（1）時間戳轉換爲時間

function get_time(data){
  var date = new Date(data*1000);
  Y = date.getFullYear() + '-';
  M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
  D = date.getDate() + ' ';
  h = date.getHours() + ':';
  m = date.getMinutes() + ':';
  s = date.getSeconds();
  var result = Y+M+D+h+m+s;
  return result;
  // 輸出結果：2014-04-23 18:55:49
}

（2）上傳視頻獲取視頻時長

stackoverflow找的關於獲取文件上傳信息的代碼

If #uploadedfile is an input with type "file" :

var file = $("#uploadedfile")[0].files[0]; var fileName = file.name; var fileSize = file.size; alert("Uploading: "+fileName+" @ "+fileSize+"bytes");

// 獲取視頻時長
var file = document.getElementById("video_up_btn").files[0];//上傳圖片的input的id
var url = URL.createObjectURL(file);
$("#myvideo").prop("src", url);
$("#myvideo")[0].addEventListener("loadedmetadata", function() {
var tol = this.duration;
video_time_line = tol
});//tol爲總時長。。。表問我爲何。。。

（3）上傳圖片展現縮略圖

$("#upload_img").on("change", function(){
if ($(this).val() != '') {
    // Get a reference to the fileList
    var files = !!this.files ? this.files : [];

    // If no files were selected, or no FileReader support, return
    if (!files.length || !window.FileReader) return;

    // Only proceed if the selected file is an image
    if (/^image/.test( files[0].type)){

        // Create a new instance of the FileReader
        var reader = new FileReader();

        // Read the local file as a DataURL
        reader.readAsDataURL(files[0]);

        // When loaded, set image data as background of div
        reader.onloadend = function(){
  res_img_base64 = this.result;
       $("#uploadcom_img").css("background-image", "url("+this.result+")");

        }

    }
}else{
       $("#uploadcom_img").css("background-image", "");
}
});//關於 input 屬性type=file 不少地方能夠更深的學習一下

12——判斷瀏覽器版本方法

$(function () {
    var Sys = {};
    var ua = navigator.userAgent.toLowerCase();
    var s;
    (s = ua.match(/rv:([\d.]+)\) like gecko/)) ? Sys.ie = s[1] :
    (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
    (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
    (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
    (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
    (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;

    if (Sys.ie) $('span').text('IE: ' + Sys.ie);
    if (Sys.firefox) $('span').text('Firefox: ' + Sys.firefox);
    if (Sys.chrome) $('span').text('Chrome: ' + Sys.chrome);
    if (Sys.opera) $('span').text('Opera: ' + Sys.opera);
    if (Sys.safari) $('span').text('Safari: ' + Sys.safari);
});