web端小知识点--持续更新

1、弹性滚动
overflow:auto;
 -webkit-overflow-scrolling: touch;
 -mo-overflow-scrolling: touch;
 overflow-scrolling: touch;
2、隐藏滑动条
::-webkit-scrollbar {width:0px;}
3、获取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>

或者用 var url = window.location.href 然后进行正则取出想要的数据
4、Base64编码解码
var encodedData = window.btoa("Hello, world"); // 编码
var decodedData = window.atob(encodedData); // 解码

5、关于canvas画图

canvas toDataURL 报错 ——只能在服务器端
toDataURL 有两个参数toDataURL("image/jpeg",0.9) 必须为jpeg(这个困扰了好久好久！！！！)

关于canvas画图有一点很尴尬，，就是我们有个动态产生邀请函的页面 用的canvas画的邀请函，toDataURL函数生生成的图片是base64编码的图片导致在ios手机微信浏览器中长按保存图片或者识别二维码的时候，放大镜会出现一瞬间，我猜测是ios把图片显示别称文字了。。安卓和pc端和非ios微信浏览器都没问题。（至今没解决  如果有人遇见过知道原因或解决方法望分享。）

6、很小的一个问题  就是checkbox全选的问题

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

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

千万不要这样用！！！你会发现点完全不选后全选失效   遇见和checkbox有关的不要用attr方法  用prop方法！！

查了一下发现两个方法都是取/修改标签属性值，如果标签某属性有true,false两个属性使用prop();

7、模板渲染引擎 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

 8、关于ajax 请求发送数据为数组时

这个发送后 后台收到的是 array[]=1&array[]=2...

这就导致后台取不到数据。。可以toString()...但是如果是多维数组就有坑了，因为toString（）后数组传送到后台就是1，2，3...

不管是一维还是多维都无法分辨了。。所以在多维数组的情况下可以加分隔符比如二维数组[[1,2],[3,4]]可以转换成1，2，#3，4#

 9、表单上传文件时 form表单必须加enctype="multipart/form-data"属性，ajaxform.js可以用一下。

10、1.使用内置的随机数发生方法:
Math.random(); //该方法产生一个0到1之间的浮点数。
Math.floor(Math.random()*10+1); //1-10
Math.floor(Math.random()*24);//0-23 

11、轮播图插件——swiper——https://github.com/amazeui/swiper 

 

二、分享几个 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——判断浏览器版本方法

1. $(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);
   });

 17/8/24

获取滚动高度scrollTop兼容写法

var scrollTop = document.documentElement.scrollTop || window.pageYOffset || document.body.scrollTop;
 17/11/1

css 文字两端对齐方法兼容IE   

1. text-align: justify;
2. text-justify: distribute-all-lines;
3. text-align-last: justify;
4. -moz-text-align-last: justify;
5. -webkit-text-align-last: justify;

对应dom必须是display:block;  不然IE不兼容