会员可以在此提问,百战程序员老师有问必答
对大家有帮助的问答会被标记为“推荐”
看完课程过来浏览一下别人提的问题,会帮你学得更全面
截止目前,同学们一共提了 133428个问题
WEB前端全系列/第六阶段:音乐社区高级项目模块/移动端:基于jQuery使用Ajax和BootStrap 16楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 17楼

<script>
        //登录按钮的点击事件
        //点击时ajax请求去后台,并等待后台反馈数据
        $(".loginBtn").click(function() {
            //发起ajax请求
            var userName = $('.username').val();
            var passWord = $('.password').val();
            //判空操作
            if (userName.trim().length == 0 || passWord.trim().length == 0) {
                alert('用户名或密码不能为空,请检查输入');
                return;
            }
            $.ajax({
                    type: 'post',
                    url: 'PHP/loginBtn.php',
                    dataType: 'json',
                    data: {
                        uname: userName,
                        upass: passWord
                    },
                    success: function(res) {
                        // console.log(res);
                        switch (res.info) {
                            case 0:
                                {
                                    alert('登陆成功');
                                }
                                break;
                            case 1:
                                {
                                    alert('登录失败,用户名或密码错误');
                                }
                                break;
                            case 2:
                                {
                                    alert('登录失败,网络连接失败');
                                }
                                break;
                            case 3:
                                {
                                    alert('登录失败,该用户名不存在');
                                }
                                break;
                            default:
                                {
                                    alert('未知错误');
                                }
                        }
                    }
                })
                //发生请求完毕后,初始化输入框
            $('.username').val('');
            $('.password').val('');
        })
    </script>
<?php
    //获取用户从前端发来的数据
    $username=$_POST['uname'];
    $password=$_POST['upass'];
    $success=array('mag'=>'ok');
    //连接数据库
    //0 成功  1 失败  2 数据库连接失败 3 数据库为空 
    $con=mysqli_connect('localhost','root','','lanmei');
    if($con){
        mysqli_query($con,'set names utf8');
        mysqli_query($con,'set character_set_client utf8');
        mysqli_query($con,'set character_set_results utf8');
        $sql='select * from user';
        $result=$con->query($sql);
        //读取数据库中的用户信息
        if($result->num_rows>0){
            $str=[];
            for($i=0;$row=$result->fetch_assoc();$i++){
                $str[i]=$row;
            }
            //判断发来的用户名和密码,是否在数据库中有对因信息
            $flag=false;//标识符,默认登录失败
            for($j=0;j<count($str);$j++){
                if($str[$j]['username']==$username){
                    if($str[$j]['password']==$password){
                        $success['info']=0;
                        $flag=true;
                        break;
                    }
                }
            }
            //当循环结束后,判断$flag的值
            if(!$flag){
                $success['info']=1;
            }

        }else{
            $success['info']=3;
        }
    
    }else{
        $success['info']=2;
    }
    echo json_decode($success);
?>

登录功能实现不了,也没有报错

image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/移动端:基于jQuery使用Ajax和BootStrap 18楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 19楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 20楼

//首页顶部轮播图


;(function () {
    $.ajax({
        type: 'get',
        url: 'php/getTopSwiperData.php',
        dataType: 'json',
        success:function (res) {
            var swiperInfoArr = res.swiperinfo;
            var swiperhd=document.createElement('div');
            swiperhd.className='swiper-container swiper-hd';
            document.querySelector('.dblb').appendChild(swiperhd);

            var swiperhd_wrapper = document.createElement('div');
            swiperhd_wrapper.className='swiper-wrapper';
            swiperhd.appendChild(swiperhd_wrapper);

            //左按钮
            var prevBtn = document.createElement('div');
            prevBtn.className='swiper-button-prev';
            swiperhd.appendChild(prevBtn);
            //右按钮
            var nextBtn = document.createElement('div');
            nextBtn.className='swiper-button-next';
            swiperhd.appendChild(nextBtn);

            //构建slide
            for (var i = 0;i<swiperInfoArr.length;i++){
                var slideDiv =document.createElement('div');
                slideDiv.className='swiper-slide';
                slideDiv.style.backgroundImage='url("'+swiperInfoArr[i].imgUrl+'")';
                swiperhd_wrapper.appendChild(slideDiv);
                //每一个slide里边的内容
                var contDiv = document.createElement('div');
                contDiv.className='ss-hd-text ani';
                contDiv.setAttribute('swiper-animate-effect','bounceInRight');
                contDiv.setAttribute('swiper-animate-duration','0.3s');
                slideDiv.appendChild(contDiv);
                //每一个slide里面的文本标题
                var h1 = document.createElement('h1');
                h1.setAttribute('align','center');
                h1.innerHTML=swiperInfoArr[i].dataTitle;
                contDiv.appendChild(h1);
                //每一个slide里面的文本内容
                var p = document.createElement('p');
                p.innerHTML=swiperInfoArr[i].dataContent;
                contDiv.appendChild(p);
            }
            //构建wrapper平级的pagination
            var swiperhd_page = document.createElement('div');
            swiperhd_page.className='swiper-pagination hd-page';
            swiperhd.appendChild(swiperhd_page);
            //swiper构建完毕后的初始化
            var swiper_hd = new Swiper('.swiper-hd',{
                pagination:'.hd-page',
                onInit:function (swiper) {
                    swiperAnimateCache(swiper);//隐藏动画元素
                    swiperAnimate(swiper);//初始化完成开始动画
                },
                onSlideChangeEnd:function (swiper) {
                    swiperAnimate(swiper);//每个slide切换结束时也运行当前slide动画
                },
                //左右按钮
                    nextBtn: '.swiper-button-next',
                    prevBtn: '.swiper-button-prev',
                    //设置自动播放
                    speed: 2000,
                    autoplay:1500
            })
        }
    });
})();

老师,你好麻烦问一下,我添加的前进和后退的按钮,倒是添加成功了就是没有点击就可以切换下一张图的功能是为什么?image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/移动端:基于jQuery使用Ajax和BootStrap 21楼

蓝莓派.zip

轮播的图片出不来,显示jquery的jquery-1.12.3.min.js有问题

WEB前端全系列/第六阶段:音乐社区高级项目模块/移动端:基于jQuery使用Ajax和BootStrap 22楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 23楼

2023-04-13.png2023-04-13.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 24楼


在课堂基础上拓展了一个功能  进度条可以通过点击事件 变换歌曲播放进度

也就是鼠标点在进度条哪里,进度条就会到哪里,然后歌曲的播放时间也会对应的到这里。


其他代码跟老师的一样  只是在监听事件后面拓展了一个鼠标在进度条按下的时候的一个监听函数 

代码如下:

            //实现可以点击变换歌曲进度的进度条
            //设置一个鼠标按下去的监听
             //jin-du-tiao-passed 这个类对应的是 进度条底层的那个 监听鼠标在底层的进读条按下的时候
            $('#jin-du-tiao').mousedown(
                function (e) {
                    // console.log('鼠标按下了');
                    //获得鼠标按下的坐标
                    // console.log(e.pageX - $('#jin-du-tiao').offset().left);
                    var chang_du=e.pageX - $('#jin-du-tiao').offset().left;
                    //把这个值变成百分比 
                    // console.log(chang_du/910);
                    //设置鼠标属性的长度等于我们点击的这个值
                   
                    $('.jin-du-tiao-passed').width((chang_du/910)*100 + '%')

                    //现在在来解决播放时间的问题  
                    //播放时长的百分比要等于我这百分比
                    // chang_du/910 这个是0到100的百分比
                    //audio.currentTime  这个是当前的秒数  假如歌曲是275秒
                    // 总秒数*百分比 就是他的百分比 让这个当前播放事件等于这个百分比 也就是ok了
                    audio.currentTime=totalTime*(chang_du/910);
                    // console.log(audio.currentTime);  //这个是秒数 看看对不对 结果ok
                }
            )




image.png



感觉这个思路下 添加一个快进快退的按钮 来控制歌曲播放进度也可以实现了

image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 25楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/移动端:基于jQuery使用Ajax和BootStrap 26楼


Bluebreey Pie_sever (2).zip

这里有两个错误

image.png

WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 27楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 28楼
WEB前端全系列/第六阶段:音乐社区高级项目模块/音乐社区项目_蓝莓派 30楼

课程分类

百战程序员微信公众号

百战程序员微信小程序

©2014-2025百战汇智(北京)科技有限公司 All Rights Reserved 北京亦庄经济开发区科创十四街 赛蒂国际工业园
网站维护:百战汇智(北京)科技有限公司
京公网安备 11011402011233号    京ICP备18060230号-3    营业执照    经营许可证:京B2-20212637