javascript第一次项目同步分享

最新推荐文章于 2021-09-10 12:43:17 发布

摆渡人(前端小白)

最新推荐文章于 2021-09-10 12:43:17 发布

阅读量108

点赞数

本文链接：https://blog.csdn.net/qq_42173327/article/details/104630039

版权

javascript第一次项目

项目内容。

简单模拟苏宁网页，
登录注册框切换代码

    $(".tab-item").removeClass('on')
    $(this).addClass('on')
    if ($(this).children().first().text() == '注册') {
        $('.user-login').css('display', 'none')
        $('.zhuce-login').css('display', 'block')
    } else {
        $('.user-login').css('display', 'block')
        $('.zhuce-login').css('display', 'none')
    }
})

注册功能实现代码

    var getObj = { username: $('#zusername').val(), password: $('#zpassword').val() }
    $.get('http://jx.xuzhixiang.top/ap/api/reg.php', getObj, function (a) {
        if (a.code == 0) {
            $('.zhuce-login .login-blank').css('display', 'none')
            $('.zhuce-login .login-error').css('display', 'block').children().last().text(a.msg)
        } else if (a.code == 1) {
            $('.zhuce-login .login-error').css('display', 'none')
            $('.zhuce-login .login-blank').css('display', 'block').text(a.msg)
        }
    }, 'json')
})

登录功能实现代码

    var getObj = { username: $('#username').val(), password: $('#password').val() }
    $.get('http://jx.xuzhixiang.top/ap/api/login.php', getObj, function (a) {
        if (a.code == 0) {
            $('.user-login .login-blank').css('display', 'none')
            $('.user-login .login-error').css('display', 'block').children().last().text(a.msg)
        } else if (a.code == 1) {
            $('.user-login .login-error').css('display', 'none')
            $('.user-login .login-blank').css('display', 'block').text(a.msg)
            $.cookie('login','1',{ expires:3})
            window.location.href = '../../pages/index.html'
        }
    }, 'json')
})

未登录验证

if(!$.cookie('login')){
    window.location.href = "../pages/dl.html"
}

获取别人的jsonp数据

$.ajax({
    url:'https://tuijian.suning.com/recommend-portal/recommend/paramsBiz.jsonp',
    data:'?&u=&c=158276746310983909&cityId=010&parameter=1553&sceneIds=15-53&count=5&callback=floatHc&_=1583131389292',
    dataType:'jsonp',
    cache:false,
    success:function(res){
        console.log(res)
    }
})

手动模拟苏宁列表，

    {title:'手机',children:[{title:'运营商'},{title:'智能数码'}]},
    {title:'空调',children:[{title:'电视'},{title:'冰箱'},{title:'洗衣机'}]},
    {title:'厨卫大电',children:[{title:'生活家电'},{title:'厨具'}]},
    {title:'电脑办公',children:[{title:'相机'},{title:'DIY'}]},
    {title:'家居',children:[{title:'家具'},{title:'家装'},{title:'家纺'}]},
    {title:'食品',children:[{title:'酒水'},{title:'生鲜'},{title:'特产'}]},
    {title:'美妆',children:[{title:'个护'},{title:'清洁'},{title:'宠物'}]},
    {title:'母婴',children:[{title:'玩具'},{title:'车床'},{title:'童装'}]},
    {title:'运动',children:[{title:'户外'},{title:'足球'},{title:'跑步机'}]},
    {title:'男装',children:[{title:'女装'},{title:'内衣'},{title:'鞋靴'}]},
    {title:'箱包',children:[{title:'钟表'},{title:'珠宝'},{title:'艺术'}]},
    {title:'汽车',children:[{title:'汽摩'},{title:'二手车'},{title:'车品'}]},
    {title:'图书',children:[{title:'艺术'},{title:'原版'},{title:'文学'}]},
    {title:'医药健康',children:[{title:'计生情趣'}]},
    {title:'理财',children:[{title:'分期'},{title:'保险'}]},
]
var a_href = "href='javascript:void(0)'"
var html = banner_list.reduce((html,v)=>html+`<li><a ${a_href}>${v.title}</a><i>-</i>${v.children.reduce((html_a,v)=>html_a+`<a ${a_href}>${v.title}</a><i></i>`,'')}</li>`,'')

$('.banner-list').html(html)

本次只分享一些相关代码，等我项目做完在做总结，