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

一、弹性滚动
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>

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

五、关于canvas画图

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

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

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

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

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

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

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

七、模板渲染引擎 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——判断浏览器版本方法

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不兼容