Javascript实践总结

2019-04-19  本文已影响0人  尼禄祭

在此记录Javascript学习或工作过程中遇到的问题，或是一些值得分享的小知识，第一次更新是2018.7.x，会持续更新。。。🌹

1.懒加载

2.prop与attr的区别(JQuery)

3.Zepto与JQuery

4.点击按钮自动刷新页面问题

5.Android与Javascript交互

JavaScript写好一个function让Android调用即可

示例代码：

//sTime,eTime分别为原生传来的起始时间与截止时间
function selectDate(sTime,eTime) {
    startTime=sTime;
    endTime=eTime;
    Index_Ajax();
}

1.Android配置完毕后，JavaScript可直接通过对象.方法名进行调用

2.或通过请求约定的url，进而让Android捕获，间接调用

示例代码：

// 由于对象映射，所以调用test对象等于调用Android映射的对象
function callAndroid(){
    test.hello("js调用了android中的hello方法");
}

// 约定的url协议为：js://webview?arg1=1&arg2=2
function callAndroid(){
    document.location = "js://webview?arg1=1&arg2=2";
}

6.获取URL参数转存为数组

function GetRequest() {
    var url = location.search; //获取url中"?"符后的字串
    url=decodeURI(url); //对uri进行解码
    var request = new Object();
    if(url.indexOf("?")!=-1){
        var str = url.substr(1); //将问号截去
        var strs = str.split("&");//以&作为分隔符,拆分为数组,例:["name=mike","age=1"]
        for(var i = 0;i<strs.length;i++){
            var temp_arr = strs[i].split("=");//以=作为分隔符,拆分为数组,例:["name","mike"]
            request[temp[0]]=temp[1];//生成新数组 例:request["name"]="mike"
        }
    }
    return request;
}

7.将时间转化为yyyy-MM-dd格式

var date = new Date("2008-8-8");
console.log(timetrans(date)) //2008-08-08

function timetrans(date){
    var Y = date.getFullYear() + '-';
    var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1) + '-';
    var D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate()) + ' ';
    return Y+M+D;
}

8.radio、checkbox、select 事件监听与取值方法(jquery)

//radio 初始化/监听事件/取值
$('input:radio[name=""][value=""]').prop('checked', true);

$('input:radio[name=""]').on('click',function () {
    console.log($(this).val())
});
var value = $('input:radio[name=""]:checked').val();


//checkbox监听事件与取值
$('input:checkbox[name=""]').on('click',function () {
    console.log($(this).prop("checked"))
});

//select监听事件与取值
$('select').on('change',function(){
    alert($(this).children('option:selected').val());
})

9.文字多余部分省略号显示

width:150px;/*要显示文字的宽度*/
overflow:hidden; /*超出的部分隐藏起来。*/
white-space:nowrap;/*不显示的地方用省略号...代替*/
text-overflow:ellipsis;/* 支持 IE */

width:150px;
overflow:hidden;
text-overflow: ellipsis;
display:-webkit-box;
-webkit-line-clamp:2;   //第n行
-webkit-box-orient:vertical;

10.css3绝对居中

.son{
    position: absolute;
    top:50%;
    left: 50%;
    transform: translate(-50%,-50%);
}

11.bfcache 清除往返缓存

setTimeout(()=>{
   this.getHomeData();
},100);

12.黑色遮罩

position:fixed;
left:0;
right:0;
top:0;
bottom:0;
background: rgba(0,0,0,0.6);
z-index: 1;

13.移动端分页

var current_page = 1; //当前页面
var page_size = 20; //每页的数据量
var noMoreData = false; //有无更多数据
var canLoad = false; //可否加载

$(function () {
    loadData(); //首次加载数据
    initListener(); //监听滚动加载
});

function loadData() {
    var params = {
        page:current_page,
        page_size:page_size,
    };
    $.ajax({
        type: "POST",
        url: BASE_URL
        data: params,
        dataType: "json",
        success:function(result){
            if (result.return_code == 1) {
                var html='';
                for(var i=0;i<result.return_data.length;i++){
                    html+=''
                }
                $("#container").append(html);
                noMoreData = result.return_data.length < page_size;
                if(noMoreData==true){
                    canLoad = false;
                    var over_html='<p>已全部加载</p>';
                    $("#container").append(over_html);
                }else {
                    current_page++;
                    canLoad = true;
                }
            }else if(result.return_code == 0){
                noMoreData = true;
            }
        }
    })
}

function initListener() {
    var winH = $(window).height();
    $(window).scroll(function () {
        var pageH = $(document.body).height();
        var scrollT = $(window).scrollTop();
        var scale = (pageH-winH-scrollT)/winH;
        if (scale < 0.02 && canLoad == true) {
            if (noMoreData == false) {
                canLoad=false;
                loadData();
            }
        }
    });
}

14.点击除指定元素外的区域

$(document).on('click',':not(.className)',function () {
    alert(1)
});
$('.className').on('click',function (e) {
    e.stopPropagation()
});

15.CSS3动画

@keyframes mymove
{
    0%   {top:0px; left:0px; background:red;}
    25%  {top:0px; left:100px; background:blue;}
    50%  {top:100px; left:100px; background:yellow;}
    75%  {top:100px; left:0px; background:green;}
    100% {top:0px; left:0px; background:red;}
}

div{
    animation:mymove 5s infinite;
    -webkit-animation:mymove 5s infinite; /* Safari 和 Chrome */
}

16.零碎的发现

上一篇下一篇

猜你喜欢

热点阅读