JS 代码

这篇博客主要展示了JS的多个功能实现,包括点击事件处理、弹窗显示与关闭、DOM操作、触摸滑动事件、动画效果以及数据处理。通过示例代码详细解释了如何利用jQuery进行页面元素的操作,如添加事件监听、显示隐藏元素、处理表单数据以及实现滚动加载。还涉及到一些页面交互的细节,如动态加载内容、触底加载更多和响应式设计。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >


jQuery(function($){
    $(".order-pick>input").on("click",function(){
        $("#bg").show();
        $("#tanchuang").show();
    });
    $("#tanchuang>ul>li").on("click",function(){
        closetc();
    });
});
function closetc(){
    $("#bg").hide();
    $("#tanchuang").hide(); 
}
关闭
$(".close, .cancel").bind('click', function(e){
       e.preventDefault();
       $(this).parents(".popup").fadeOut();
    })
点击显示
$("[data-pop]").bind('click', function(e){
        e.preventDefault();
        var obj = $(this).attr("data-pop");
            $(".popup").hide();
            //var thisheight = $("#"+obj).find('.box').height();
            $("#"+obj).fadeIn();
        if (obj=="rank"){ 
            loaded(); 
        }
    });
html代码
<a data-pop="about" href=""><img src="images/icon-redshow.png">活动介绍</a>


$(document).on('touchend', function() {
    //滑到底部执行加载更多
    if($('.po-win-wai').is(':visible')){}else{
        if ($(document).scrollTop() + 100 >= $(document).height() - $(window).height()) {
            $('.Loading').show();
            $('.Loading').text('加载中...');
            second();
            setTimeout(function() {
                $('.Loading').fadeOut();
            }, 1000)
        } else {
            $('.Loading').fadeOut();
        }
    }
});


        jQuery(function($){
//            单选 框
//        $(".votelist ul li").click(function(){ 
//                event.stopPropagation();  
//                $("input").removeAttr('checked')
//                $(this).find("input[type=checkbox]").prop("checked",true);
////                $(this).find(".checkboxFour").addClass("list_se")
////                $(this).siblings().find(".checkboxFour").removeClass('list_se');
//            })
//            });
        //多选框    
            $(".votelist ul li").on("click",function(){  
                if($(this).find("input[type=checkbox]").is(':checked'))
                {
                    $(this).find("input").prop('checked',false);
                    $(this).find(".checkboxFour").removeClass('list_se');
                }
                else
                {
                    $(this).find("input[type=checkbox]").prop("checked",true);
                    $(this).find(".checkboxFour").addClass('list_se');
                } 
                
            })
            })

 jQuery(function($){
//      if ( $(".swiper-nav").length>0 ){
//        $(".client-nav .swiper-slide").eq(0).addClass("current");
//        var nav = $('.swiper-nav').swiper({
//            slidesPerView: 'auto',
//            freeMode:true,
//            freeModeFluid:true,
//            onSlideClick: function(nav){
//                nav.swipeTo( nav.clickedSlideIndex )
//                pages.swipeTo( nav.clickedSlideIndex )
//                $(".client-nav .swiper-slide").removeClass("current");
//                $(".client-nav .swiper-slide").eq( nav.clickedSlideIndex ).addClass("current");
//            }
//        })
//    
//        //Function to Fix Pages Height
//        function fixPagesHeight() {
//            $('.swiper-pages').css({
//                height: $(window).height()-90
//            })
//        }
//        $(window).on('resize',function(){
//            fixPagesHeight()
//        })
//        fixPagesHeight()
//    
//        //Init Pages
//        var pages = $('.swiper-pages').swiper({
//                onTouchEnd: function(){
//                    $(".client-nav .swiper-slide").removeClass("current");
//                    $(".client-nav .swiper-slide").eq( pages.activeIndex ).addClass("current");
//                    nav.swipeTo( pages.activeIndex )
//                }
//            })
//    
//        //Scroll Containers
//        $('.scroll-container').each(function(){
//            $(this).swiper({
//                mode:'vertical',
//                scrollContainer: true,
//                mousewheelControl: true,
//                scrollbar: {
//                    container:$(this).find('.swiper-scrollbar')[0]
//                }
//            })
//        })
//    }
//      })

//cacel.html切换效果
    $('.sao').on("click", function(event) {
        event.preventDefault();
        if ($('.message01-main').is(':visible')) {
            $('.message01-main').slideUp(1000);
        } else {
            $('.message01-main').slideDown(1000);
        }
    });


//li最后一行无border-bottom
                    var lilen = $(".mobanlist>ul>li").length; 
                     var setli = lilen%3;
                     if(setli==0)
                     {
                         setli=3;
                     }
                     if(lilen<=3)
                     {
                     $(".mobanlist>ul>li:gt("+ setli-1 +")").css("border-bottom","none");    
                     }
                     else
                     {
                         $(".mobanlist>ul>li:gt("+ (lilen-setli-1) +")").css("border-bottom","none");
                     }

ajax获取表单
        <script type="text/javascript">
            $(function(){
                //data-name 是要传给后面的字段名 data-type是表单的类型
                //li的长度
                var li_lenght = $(".chuzhuh li").length;

                $(".concer-footerbtn01").click(function(){
                    alert('a');
                    //字符串式JSON对象
                    var datastr = "{";
                    for(var i = 0; i < li_lenght; i++){
                        //取得表单类型
                        var dataType = $(".chuzhuh li:eq("+ i +")").attr("data-type");
                        //取得字段名
                        datastr += $(".chuzhuh li:eq("+ i +")").attr("data-name") + ':';
                        //取得表单值
                        switch (dataType){
                            case "radio" :
                                datastr += $(".chuzhuh li:eq("+ i +") input:checked").val() + ',';
                                break;
                            case "checkbox" :
                                var lich = [];
                                $(".chuzhuh li:eq("+ i +") input:checked").each(function(index, obj){
                                    lich[index] = $(obj).val();
                                });
                                datastr += '[' + lich + '],';
                                break;
                            case "select" :
                                datastr +=  $("#option").text() + ',';
                                break;
                            //与 case  "radio" 和 case "checkbox" 不同时执行的代码
                            default :
                                datastr += $(".chuzhuh li:eq("+ i +") input").val() + ',';
                                break;
                        }
                    }
                    //去掉最后一个逗号
                    datastr = datastr.substring(0,datastr.length-1);
                    datastr += "}";
                    //转换成JSON对象
                    var data = JSON.stringify(datastr);
                    var chzhuinfo = "buy-reg-menu";
                    $.ajax({
                        url:jiekouUrl+chzhuinfo,//提交的地址
                        data:data,//要提交的数据
                        dataType:"json",//要求服务器返回的格式
                        type:"post",//使用post提交
                        success:function(back){//提交成功之后的回调函数(就是服务器返回数据的时候执行的代码)
                         if(back.data.code == 200){
                             alert("提交成功");
                         }else{
                                alert("提交失败");
                            }

                        /*    if(data.status == "1")
                            {
                                alert("提交成功");
                            }
                            else{
                                alert("提交失败");
                            }*/
                        }
                    })
                    //console.dir(data);
                });
            });
        </script>

    //车型筛选
    $('.carming>ul>li').on('click',function(){
        var data = $(this).attr("id");
        if(data == "all"){
            $("div[data-name]").fadeIn();
        }else{
            $("div[data-name="+ data +"]").show().siblings().hide();
        }
    });


下拉加载ajax
jQuery(function(){
        dbAjax();
        $('.video-list ul li').on('click',function(){
            var page = 1;
            var id = $(this).find('.sid').text();
            window.location.href='video-division-details.html'+"?id="+id+"&page="+page;
        })
    });
    var page = 1;//定义一个变量表示页数
    function dbAjax(){
        $.ajax({
            url:'http://union.playwx.com:9080/gamevideo/if/game_list',
            dataType:'json',
            success:function(data) {
                if (data.c == 1) {
                var json = data.gameList;
                var html = '';
                $.each(json, function (i, thisjson) {
                    html += '<li>',
                            html += '<a href="video-division-details.html">',
                            html += '<img src="' + thisjson.pic + '" />',
                            html += '<div class="inf"><span class="yxname">' + thisjson.name + '</span><span class="djl">' + thisjson.videoNum + '</span></div>',
                            html += '</a>',
                            html += '<span class="sid" style="display: none">' + thisjson.id + '</span>',
                            html += '</li>';
                });
                $('.video-list ul').append(html);
                page++;//执行成功之后页数就+1.这样下次执行参数 的时候就是下一页了。
                tmove();//把数据添加到页面之后,执行下拉方法绑定
            }else{
                    alert('加载有误');
                }
            }
        });
    }
    function tmove(){
    $(document).on('touchmove',function(){
            //滑到底部执行加载更多
            if ($(document).scrollTop()+100 >= $(document).height() - $(window).height()) {
                $('.Loading').show();
                dbAjax();
            }else{
                $('.Loading').hide();
            }
        });
    }

遍历
    /*** 获取对象长度* @param o* @returns {*}*/
            function count(o){
                var t = typeof o;
                if(t == 'string'){
                        return o.length;
                }else if(t == 'object'){
                        var n = 0;
                        for(var i in o){
                                n++;
                        }
                        return n;
                }
                return false;
            }; 
    for(var i=0;i<count(tryList);i++){
                        }


px转rem
第一步:页面加入根元素计算JS代码
(function (doc, win) {
  var docEl = doc.documentElement,
    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
    recalc = function () {
      var clientWidth = docEl.clientWidth;
      if (!clientWidth) return;
      docEl.style.fontSize = 100 * (clientWidth / 320) + 'px';
    };
  if (!doc.addEventListener) return;
  win.addEventListener(resizeEvt, recalc, false);
  doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);

判断是否为空值
if( replyList.length > 0){} else if(page == 1 && replyList.length == 0){}

进度条html
<section class="container">
    <div class="progress">
    <span class="blue" style="width:50%;" id="rentou"></span>
    </div>
</section>

超出省略号
    $(function(){
            var str = "[公告]远大集团是一家以独特技术为理念,以保护生命为信条的企业,以保护生命为信条的企业以保护生命为信条的企业远大";
            textEllipsis(str);
            function textEllipsis(str){
                var $text = $(".js p");
                var strLenght = str.length;
                var divWidth = $text.width();
                var strNum = parseInt(divWidth / 14(字体号)) * 2 - 4;
                if(strLenght > strNum){
                    var $str = str.substring(0,strNum) + "...";
                    $text.text($str);
                } else {
                    $text.text(str);
                }
            }
        });
//倒计时
function GetRTime(element,EndTime){
    window.setInterval(function(){
        var NowTime = new Date();
        var nMS = EndTime - NowTime.getTime();
        var nD = Math.floor(nMS/(1000 * 60 * 60 * 24));
        var nH = Math.floor(nMS/(1000*60*60)) % 24;
        var nM = Math.floor(nMS/(1000*60)) % 60;
        var nS = Math.floor(nMS/1000) % 60;
        if (nMS < 0){
           //时间到
        }else{
           element.find(".day").text(nD);
           element.find(".hour").text(nH);
           element.find(".minute").text(nM);
           element.find(".second").text(nS);
        }
    }, 1000);
}

jQuery(function($){
    //countdown
    if ( $('.countdown').length>0 ){
        var timebox = $('.time');
        var timelist = timebox;
        for(var i = 0;i < timelist.length; i++){
            var startTime = new Date(timebox.eq(i).data('time'));
            //console.log(startTime);
            EndTime = startTime.getTime();
            GetRTime(timebox.eq(i),EndTime);
        }
    }
});

弹窗显示方法
<div id="tips" class="tips"></div> ---html页面代码
---以下js实现
$(function(){
                $("元素").click( function () {
                        toast("生成成功!");
                        });  ---使用此方法
                
                toast = function(text){
                    $("弹窗元素").html(text).show();
                    window.setTimeout(function(){
                        $("弹窗元素").hide();
                    },1500);
                }
            })

与Swiper-3.0.8同用时 每个屏的有上下滑动的div
var myScroll;
function loaded () {
    myScroll = new IScroll('#wrapper');
}
function echowrapper(){
    $(".wrapperclass").each(function(i,v){
        $(this).attr("id","wrapper" + i).find(".scrollerclass").attr("id","scroller" + i);
        var m = new IScroll('#wrapper' + i);
    });
}
jQuery(function($){
    echowrapper();
});


关闭滑动事件
document.getElementById("showwin").addEventListener('touchmove',function(e){e.preventDefault();},false);

从ajax获取的内容加span标签放入到html
var shareText = params.shareText;
    for(var i=0;i<shareText.length;i++){
        $('.hint').append("<span>"+ shareText[i] + "</span>");
    };

遍历span加属性
var share = 0.2;--动画延迟  时间
        var $span = $('属性');
        for(var i = 0; i<$span.length; i++){
            $span.eq(i).css("-webkit-animation-delay",(share+0.2)+"s");
            share = share + 0.2;
        }

jQuery(function($){
    
    var swiper = new Swiper('.swiper-container',{
     followFinger : false,
//     allowSwipeToPrev : false,
/*    onInit: function(swiper){
     $('.swiper-slide-next').addClass('pt-page-rotateCubeLeftIn');
     $('.swiper-slide-next').siblings().removeClass('pt-page-rotateCubeLeftIn')
    },*/
    onTouchEnd: function(swiper){
        
        var index = swiper.activeIndex;
        console.log(index);
        if(swiper.isEnd){
            window.location.href="ind-uni-18.php";
        }else{
            //$('.swiper-slide-next').removeClass('pt-page-rotateCubeLeftIn');
            
        }
    }*/

onTransitionStart: function(swiper){
    var index = swiper.activeIndex;
    var next = index - 1 ;
    if(swiper.isEnd){
            window.location.href="ind-uni-18.php";
        }else{
        $('.swiper-wrapper>div:eq('+ next +')').addClass('pt-page-rotateCubeLeftOut');
        $('.swiper-wrapper>div:eq('+ next +')').siblings().removeClass('pt-page-rotateCubeLeftOut');
    }
       },
    onTransitionEnd: function(swiper){
    var index = swiper.activeIndex;
    var next = index - 1 ;
        if(swiper.isEnd){
            window.location.href="ind-uni-18.php";
        }else{
            
                $('.swiper-wrapper>div:eq('+ index +')').addClass('pt-page-rotateCubeLeftIn');
                $('.swiper-wrapper>div:eq('+ index +')').siblings().removeClass('pt-page-rotateCubeLeftIn');

        }
       },
    
    })
})
 


各网站JQUERY
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
<script src="http://upcdn.b0.upaiyun.com/libs/jquery/jquery-2.0.2.min.js">
<script src="http://lib.sinaapp.com/js/jquery/2.0.2/jquery-2.0.2.min.js">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值