简易音乐播放系统

html,js编写的简易音乐播放器
简易音乐播放系统_第1张图片

简易音乐播放系统_第2张图片

使用html中的div标签进行简单的布局,使用js实现音乐播放功能。

全部代码:

index.html


<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Keywords" content="关键字">
    <meta name="Description" content="描述信息">
    <title>音乐播放系统title>
head>

<style>
    * {
        margin: 0;
        padding: 0;
    }
    /*解决浏览器兼容问题
    margin :上下 左右*/
    /*背景图片*/

    body {
        background: url("images/bg.jpg");
        background-size: cover;
    }

    .music {
        width: 720px;
        height: 470px;
        background: #a0a0a0;
        margin: 100px auto;
    }

    .music .m_lrc {
        width: 50%;
        height: 100%;
        background: #66ccff;
        float: left;
    }

    .music .m_lrc h2 {
        height: 60px;
        background: #ccc;
        text-align: center;
        line-height: 60px;
        font-size: 20px;
    }

    .music .m_lrc .m_con {
        height: 410px;
        background: url("images/2.png")
    }

    .music .m_list {
        width: 50%;
        height: 100%;
        background: #262c35;
        float: right;
        overflow-y: auto;
    }

    .music .m_list ul li {
        list-style: none;
        color: #fff;
        line-height: 36px;
        padding-left: 18px;
        border-bottom: 1px solid #7d7d7d;
    }

    .music .m_list ul li:hover {
        cursor: pointer;
        background: -webkit-linear-gradient(-45deg, #dddcce, #a9cbc9, #d69f83);
        color: #000;
        transition: 0.3s;
    }
style>

<body>


    

    
    <div class="music">
        
        <div class="m_lrc">
            <h2>Musich2>
            <div class="m_con">div>

        div>
        
        <div class="m_list">
            <ul>
                <li onclick="play(1)">唯你一生-水木年华li>
                <li onclick="play(2)">问天问地-王伟li>
                <li onclick="play(3)">因为我们是兄弟li>
                <li onclick="play(4)">年轻的战场li>
                <li onclick="play(5)">爱如星火li>
                <li onclick="play(6)">花桥流水li>
                <li onclick="play(7)">我和草原有个约定li>
                <li onclick="play(8)">梦醉荷塘li>
                <li onclick="play(9)">红颜先生li>




            ul>
        div>
    div>
    
    <script src="js/jquery-1.11.1.min.js">script>
    <script>
        //创建音乐播放器
        var audioDom = document.createElement("audio");
        //点击播放音乐
        function play(name) {
            //设置音乐播放地址
            audioDom.src = "mp3/" + name + ".mp3";
            //自动播放
            audioDom.autoplay = "autoplay";

        }
    script>


body>

html>

项目源代码及文件已经上传,下载地址:https://download.csdn.net/download/qq_41251963/10633298

你可能感兴趣的:(项目实战)