使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)

使用 HTML、CSS 和 JS 创建在线音乐播放器(含免费完整源码)直接跳到末尾获取完整源码今天我将带着大家使用HTML、CSS和JS创建音乐播放器,没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块,也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的,您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。❤️使用HTML、CSS和JS创建在线音乐播放器❤️????在线演示地址????完整代码结构????home-section首页部分???

大家好,又见面了,我是你们的朋友全栈君。

给大家安利一个免费且实用的前端刷题(面经大全)网站,?点击跳转到网站

在这里插入图片描述
直接跳到末尾 获取完整源码

今天我将带着大家使用 HTML、CSS 和 JS创建 音乐播放器,没有使用任何其他库。我们的音乐播放器具有三个部分。主屏幕、播放器部分和播放列表部分。我们的主页部分有一个平滑的工作滑块,也有水平滚动。这个音乐播放器最好的部分是它最小化了音乐播放器。是的,您可以最小化和最大化播放器本身。使这个项目成为一个很棒的音乐播放器。

? 在线演示地址

http://haiyong.site/yinyue

? 完整代码结构

在我们开始编写代码之前。虽然它不是 Nodejs 应用程序,但我们至少应该看到它的文件夹结构。

在这里插入图片描述
你可以看到我们有一个data.js文件,该文件包含我们的音乐相关数据。你可以在下面看到。

let songs = [
    { 
   
        name: 'song 1',
        path: 'assets/musics/Song 1.mp3',
        artist: 'artist 1',
        cover: 'assets/images/cover 1.png'
    },
    { 
   
        name: 'song 2',
        path: 'assets/musics/Song 2.mp3',
        artist: 'artist 2',
        cover: 'assets/images/cover 2.png'
    },
    // 剩下8首歌曲格式同上
]

我们在这里存储了音乐相关数据。

然后现在让我们对主页部分进行编码。

? home-section 首页部分

打开index.html和内部从编写基本的 HTML 结构开始。还链接style.css和两个 JS 文件。记得data.js在app.js. 否则我们将无法访问数据。

完成链接所有文件后,让我们创建第一件事。图像轮播。内部身体标签代码这个。

<section class="home-section">
    <div class="carousel">
        <img src="assets/images/cover 1.png" class="active" alt="">
        <img src="assets/images/cover 2.png" alt="">
        <img src="assets/images/cover 3.png" alt="">
        <img src="assets/images/cover 4.png" alt="">
        <img src="assets/images/cover 5.png" alt="">
    </div>
</section>

注意 – 将旋转木马包裹在home-section元素内。

@import url('https://fonts.proxy.ustclug.org/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

*{ 
   
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root{ 
   
    --background: #141414;
    --text-color: #fff;
    --primary-color: #63ff69;
    --secondary-color: #000;
    --alpha-color: rgba(0, 0, 0, 0.5);
    --shadow: 0 15px 40px var(--alpha-color);
}

html{ 
   
    background: var(--background);
    display: flex;
    justify-content: center;
}

body{ 
   
    width: 100%;
    height: 100vh;
    max-width: 375px;
    position: relative;
    background: var(--background);
    font-family: 'roboto', sans-serif;
    color: var(--text-color);
}

::-webkit-scrollbar{ 
   
    display: none;
}

.home-section{ 
   
    width: 100%;
    padding: 20px;
    height: 100%;
    padding-bottom: 100px;
    overflow-y: auto;
}

/* carousel */

.carousel{ 
   
    width: 100%;
    height: 200px;
    overflow: hidden;
    border-radius: 20px;
    box-shadow: var(--shadow);
    position: relative;
}

.carousel img{ 
   
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    transition: 1s;
}

.carousel img.active{ 
   
    opacity: 1;
}

您可以看到我们在这里使用了 CSS 变量,因此我们将来可以轻松更改此音乐播放器主题。

输出
在这里插入图片描述

请注意,这是为移动视图设计的,这就是为什么我使用 chrome 检查器以移动尺寸查看它的原因。

现在创建水平滚动播放列表。放在home-section里面

HTML

<h1 class="heading">最近播放</h1>
<div class="playlists-group">
	<div class="playlist-card">
		<img src="assets/images/cover 9.png" class="playlist-card-img" alt="">
		<p class="playlist-card-name">华语热歌</p>
	</div>
	<div class="playlist-card">
		<img src="assets/images/cover 2.png" class="playlist-card-img" alt="">
		<p class="playlist-card-name">古风戏腔</p>
	</div>
	//+3 
</div>
<h1 class="heading">根据你的喜好</h1>
<div class="playlists-group">
	<div class="playlist-card">
		<img src="assets/images/cover 12.png" class="playlist-card-img" alt="">
		<p class="playlist-card-name">失恋回忆</p>
	</div>
	<div class="playlist-card">
		<img src="assets/images/cover 12.png" class="playlist-card-img" alt="">
		<p class="playlist-card-name">经典老歌</p>
	</div>
	//+3 
</div>

CSS

.heading{ 
   
    margin: 30px 0 10px;
    text-transform: capitalize;
    font-weight: 400;
    font-size: 30px;
}

/* playlists card */

.playlists-group{ 
   
    position: relative;
    width: 100%;
    min-height: 200px;
    height: auto;
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
}

.playlist-card{ 
   
    flex: 0 0 auto;
    max-width: 150px;
    height: 100%;
    margin-right: 20px;
}

.playlist-card-img{ 
   
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 20px;
}

.playlist-card-name{ 
   
    width: 100%;
    text-align: justify;
    font-size: 20px;
    text-transform: capitalize;
    padding: 5px;
}

输出
在这里插入图片描述

我们完成了home section。但是我们的旋转木马还不起作用,所以让我们使用 js 让它工作。打开app.js文件并开始编码。

const carousel = [...document.querySelectorAll('.carousel img')];

let carouselImageIndex = 0;

const changeCarousel = () => { 
   
    carousel[carouselImageIndex].classList.toggle('active');

    if(carouselImageIndex >= carousel.length - 1){ 
   
        carouselImageIndex = 0;
    } else{ 
   
        carouselImageIndex++;
    }

    carousel[carouselImageIndex].classList.toggle('active');
}

setInterval(() => { 
   
    changeCarousel();
}, 3000);

您可以看到我们的轮播元素,每 3 秒切换一次图像active类。

在这里插入图片描述

现在让我们制作我们的播放器部分。

? player-section 播放器部分

首先使其最小化视图。

<section class="music-player-section">

    <img src="assets/images/back.png" class="back-btn icon hide" alt="">
    <img src="assets/images/nav.png" class="nav-btn icon hide" alt="">

    <h1 class="current-song-name">song 1</h1>
    <p class="artist-name hide">artist 1</p>

    <img src="assets/images/cover 1.png" class="cover hide" alt="">

    <div class="seek-bar-container">
        <input type="range" class="music-seek-bar" value="0">
        <p class="current-time hide">00 : 00</p>
        <p class="duration hide">00 : 00</p>
    </div>

    <div class="controls">
        <span class="fas fa-redo"></span>
        <div class="main">
            <i class="fas fa-backward active"></i>
            <i class="fas fa-play active"></i>
            <i class="fas fa-pause"></i>
            <i class="fas fa-forward active"></i>
        </div>
        <input type="range" class="volume-slider" max="1" value="1" step="0.1">
        <span class="fas fa-volume-up"></span>
    </div>
</section>

如果你看到我们的播放器结构,你会注意到我们有很多hide元素的类。此类hide指示元素将在最小化视图中隐藏。我们为所有元素提供了相同的类,因此我们可以轻松地在 CSS 中设置它们的样式。

.music-player-section{ 
   
    width: 100%;
    height: 100px;
    position: fixed;
    bottom: 0;
    left: 0;
    background: var(--alpha-color);
    backdrop-filter: blur(50px);
    transition: 1s;
}

.music-seek-bar{ 
   
    -webkit-appearance: none;
    width: 100%;
    position: absolute;
    top: -4px;
    height: 8px;
    background: var(--secondary-color);
    overflow: hidden;
}

.music-seek-bar::-webkit-slider-thumb{ 
   
    -webkit-appearance: none;
    height: 10px;
    width: 5px;
    background: var(--primary-color);
    cursor: pointer;
    box-shadow: -400px 0 0 400px var(--primary-color);
}

.current-song-name{ 
   
    font-weight: 300;
    font-size: 20px;
    text-align: center;
    margin-top: 5px;
    text-transform: capitalize;
}

.controls{ 
   
    position: relative;
    width: 80%;
    margin: auto;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 60px;
    font-size: 30px;
}

.controls span{ 
   
    display: none;
    opacity: 0;
    transition: 1s;
}

.music-player-section.active .controls{ 
   
    justify-content: space-between;
}

.music-player-section.active .controls span{ 
   
    font-size: 25px;
    display: block;
    opacity: 0.5;
}

.music-player-section.active .controls span.active{ 
   
    color: var(--primary-color);
    opacity: 1;
}

.controls .main i{ 
   
    margin: 0 5px;
    display: none;
}

.controls .main i.active{ 
   
    display: inline;
}

现在让我们创建最大化视图的样式。

.music-player-section .hide{ 
   
    display: none;
    opacity: 0;
    transition: 1s;
}

.music-player-section.active .hide{ 
   
    display: block;
    opacity: 1;
}

.music-player-section.active{ 
   
    width: 100%;
    height: 100%;
    padding: 30px;
    display: flex;
    flex-direction: column;
}

.music-player-section.active .music-seek-bar{ 
   
    position: relative;
    display: block;
    border-radius: 50px;
    margin: auto;
}

.music-player-section.active .current-song-name{ 
   
    font-size: 40px;
}

.music-player-section.active .controls{ 
   
    width: 100%;
    font-size: 50px;
}

.artist-name{ 
   
    text-align: center;
    font-size: 20px;
    text-transform: capitalize;
}

.cover{ 
   
    width: 30vh;
    height: 30vh;
    object-fit: cover;
    margin: auto;
    border-radius: 20px;
    box-shadow: var(--shadow);
}

.current-time{ 
   
    position: absolute;
    margin-top: 5px;
    left: 30px;
}

.duration{ 
   
    position: absolute;
    margin-top: 5px;
    right: 30px;
}

.icon{ 
   
    position: absolute;
    top: 60px;
    transform: scale(1.3);
}

.back-btn{ 
   
    left: 40px;
}

.nav-btn{ 
   
    right: 40px;
}

/* volume button */

.volume-slider{ 
   
    -webkit-appearance: none;
    width: 100px;
    height: 40px;
    position: absolute;
    right: -35px;
    bottom: 80px;
    transform: rotate(-90deg);
    border-radius: 20px;
    background: var(--alpha-color);
    overflow: hidden;
    opacity: 0;
    display: none;
}

.volume-slider.active{ 
   
    opacity: 1;
    display: block;
}

.volume-slider::-webkit-slider-thumb{ 
   
    -webkit-appearance: none;
    height: 40px;
    width: 10px;
    background: var(--primary-color);
    box-shadow: -200px 0 1px 200px var(--primary-color);
}

输出
在这里插入图片描述
并检查这些样式,现在像这样将active添加到 class music-player-section 中去。

<section class="music-player-section active">
...
</section>

输出
在这里插入图片描述
我们最终会让这个播放器发挥作用。现在从player section类删除这个active。让我们创建播放列表部分。

? playlist-section 播放列表部分

<section class="playlist active">

    <img src="assets/images/back.png" class="back-btn icon" alt="">

    <h1 class="title">播放列表</h1>

    <div class="queue active">
        <div class="queue-cover">
            <img src="assets/images/cover 1.png" alt="">
            <i class="fas fa-pause"></i>
        </div>
        <p class="name">song 1</p>
    </div>
    // +7
</section>

CSS

.playlist{ 
   
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    right: -100%;
    padding: 30px 0;
    background: var(--background);
    z-index: 3;
    transition: 1s;
    overflow: auto;
}

.playlist.active{ 
   
    right: 0;
}

.title{ 
   
    font-weight: 300;
    font-size: 40px;
    text-align: center;
    margin-top: 15px;
    text-transform: capitalize;
    margin-bottom: 30px;
}

.queue{ 
   
    width: 100%;
    height: 80px;
    padding: 0 30px;
    display: flex;
    align-items: center;
    border-top: 2px solid var(--alpha-color);
}

.queue-cover{ 
   
    width: 60px;
    height: 60px;
    border-radius: 10px;
    overflow: hidden;
    margin-right: 20px;
    position: relative;
}

.queue-cover img{ 
   
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.queue-cover i{ 
   
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 30px;
    color: var(--primary-color);
    display: none;
}

.queue.active i{ 
   
    display: block;
}

.queue .name{ 
   
    font-size: 22px;
    text-transform: capitalize;
}

输出

在这里插入图片描述
我们已经完成了所有的造型。active也从播放列表部分删除类。

现在让我们 JS 使这个音乐应用程序功能齐全。

✨ navigation 导航部分

我们的音乐播放器中有三个部分。因此,为这个应用程序设置导航系统对我们来说非常重要。通过它我们可以轻松地从一个部分导航到另一个部分。对?所以编码这个。

/导航

切换音乐播放器
const musicPlayerSection = document.querySelector('.music-player-section');
let clickCount = 1;
musicPlayerSection.addEventListener('click', () => { 
   
    if(clickCount >= 2){ 
   
        musicPlayerSection.classList.add('active');
        clickCount = 1;
        return;
    }
    clickCount++;
    setTimeout(() => { 
   
        clickCount = 1;
    }, 250);
})

/// 从音乐播放器返回
const backToHomeBtn = document.querySelector('.music-player-section .back-btn');

backToHomeBtn.addEventListener('click', () => { 
   
    musicPlayerSection.classList.remove('active');
})

/// 访问播放列表
const playlistSection = document.querySelector('.playlist');
const navBtn = document.querySelector('.music-player-section .nav-btn');

navBtn.addEventListener('click', () => { 
   
    playlistSection.classList.add('active');
})
// 从播放列表返回到音乐播放器
const backToMusicPlayer = document.querySelector('.playlist .back-btn');

backToMusicPlayer.addEventListener('click', () => { 
   
    playlistSection.classList.remove('active');
})
//导航完成

这是基本的 JS,我还在代码中添加了注释。因此,如果您对此代码有任何疑问,请随时在讨论中问我。我们的导航完成了。所以让我们创建我们的音乐播放器。

? music 音乐部分

对于音乐播放器,我们的页面中需要一个音频源,但现在我们没有。为此在 index.html 中创建一个音频元素。在 body 标记的开头创建此元素。

<audio src="" id="audio-source"></audio>

现在我们必须创建很多函数,所以在开始之前让我们快速选择我们可能需要进行操作的所有元素。

/// 音乐

let currentMusic = 0;

const music = document.querySelector('#audio-source');

const seekBar = document.querySelector('.music-seek-bar');
const songName = document.querySelector('.current-song-name');
const artistName = document.querySelector('.artist-name');
const coverImage = document.querySelector('.cover');
const currentMusicTime = document.querySelector('.current-time');
const musicDuration = document.querySelector('.duration');

const queue = [...document.querySelectorAll('.queue')];

// 在此处选择所有按钮

const forwardBtn = document.querySelector('i.fa-forward');
const backwardBtn = document.querySelector('i.fa-backward');
const playBtn = document.querySelector('i.fa-play');
const pauseBtn = document.querySelector('i.fa-pause');
const repeatBtn = document.querySelector('span.fa-redo');
const volumeBtn = document.querySelector('span.fa-volume-up');
const volumeSlider = document.querySelector('.volume-slider');

现在设置音乐源。

// 音乐设置功能

const setMusic = (i) => { 
   
    seekBar.value = 0;
    let song = songs[i];
    currentMusic = i;

    music.src = song.path;

    songName.innerHTML = song.name;
    artistName.innerHTML = song.artist;
    coverImage.src = song.cover;

    setTimeout(() => { 
   
        seekBar.max = music.duration;
        musicDuration.innerHTML = formatTime(music.duration);
    }, 300);
    currentMusicTime.innerHTML = '00 : 00';
    queue.forEach(item => item.classList.remove('active'));
    queue[currentMusic].classList.add('active');
}

setMusic(0);

你可以注意到,为了设置持续时间,我们调用了formatTime,现在创建这个。

// 格式持续时间为 00 : 00 格式

const formatTime = (time) => { 
   
    let min = Math.floor(time / 60);
    if(min < 10){ 
   
        min = `0` + min;
    }

    let sec = Math.floor(time % 60);
    if(sec < 10){ 
   
        sec = `0` + sec;
    }

    return `${ 
     min} : ${ 
     sec}`;
}

现在让我们添加播放/暂停事件。

// playBtn 点击事件

playBtn.addEventListener('click', () => { 
   
    music.play();
    playBtn.classList.remove('active');
    pauseBtn.classList.add('active');
})

// pauseBtn 点击事件

pauseBtn.addEventListener('click', () => { 
   
    music.pause();
    pauseBtn.classList.remove('active');
    playBtn.classList.add('active');
})

我们已经完成了音乐的设置和播放/暂停。现在进行向前/向后事件。

// 向前按钮

forwardBtn.addEventListener('click', () => { 
   
    if(currentMusic >= songs.length - 1){ 
   
        currentMusic = 0;
    } else{ 
   
        currentMusic++;
    }
    setMusic(currentMusic);
    playBtn.click();
})

// 后退按钮

backwardBtn.addEventListener('click', () => { 
   
    if(currentMusic <= 0){ 
   
        currentMusic = songs.length - 1;
    } else{ 
   
        currentMusic--;
    }
    setMusic(currentMusic);
    playBtn.click();
})

快完成了,现在创建搜索栏功能。

// 搜索栏事件

setInterval(() => { 
   
    seekBar.value = music.currentTime;
    currentMusicTime.innerHTML = formatTime(music.currentTime);
    if(Math.floor(music.currentTime) == Math.floor(seekBar.max)){ 
   
        if(repeatBtn.className.includes('active')){ 
   
            setMusic(currentMusic);
            playBtn.click();
        } else{ 
   
            forwardBtn.click();
        }
    }
}, 500)

seekBar.addEventListener('change', () => { 
   
    music.currentTime = seekBar.value;
})

做了这个之后。创建刷新功能和音量选项。

// 刷新按钮

repeatBtn.addEventListener('click', () => { 
   
    repeatBtn.classList.toggle('active');
})

// 音量部分

volumeBtn.addEventListener('click', () => { 
   
    volumeBtn.classList.toggle('active');
    volumeSlider.classList.toggle('active');
})

volumeSlider.addEventListener('input', () => { 
   
    music.volume = volumeSlider.value;
})

我们的播放器完成了。我们要做的最后一件事是使我们的播放列表正常运行。

queue.forEach((item, i) => { 
   
    item.addEventListener('click', () => { 
   
        setMusic(i);
        playBtn.click();
    })
})

到这里我们已经完成了所有代码。播放器、导航栏、播放列表、轮播图,刷新,音量加减等等

? wuhu ! 起飞 !

希望通过本文,您已经学会了如何使用 HTML、CSS 和 JS 的在线音乐播放器。我之前使用 HTML、CSS 和 JavaScript 制作了更多类型的小工具,如果您愿意,可以查看这些设计。

使用 HTML、CSS 和 JS 的简单倒数计时器
使用 HTML、CSS 和 JavaScript 制作的随机密码生成器
使用 HTML、CSS、JS 和 API 制作一个很棒的天气 Web 应用程序
你真的熟练运用 HTML5 了吗,这10 个酷炫的 H5 特性你会几个?
使用 HTML、CSS 和 JS 创建响应式可过滤的游戏+工具展示页面
11个基于HTML/CSS/JS的情人节表白可爱小游戏、小动画【情人节主题征文】

我已经写了很长一段时间的技术博客,并且主要通过CSDN发表,这是我的一篇 Web 在线音乐播放器教程。我喜欢通过文章分享技术与快乐。您可以访问我的博客: https://haiyong.blog.csdn.net/ 以了解更多信息。希望你们会喜欢!?

? 欢迎大家在评论区提出意见和建议!?

? 完整源码下载

如果你真的从这篇文章中学到了一些新东西,喜欢它,收藏它并与你的小伙伴分享。?最后,不要忘了❤或?支持一下哦。

完整的源代码:点击此处下载 (可能审核不过)

免费源码可通过下方公号回复代码获取??????

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/153168.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 重庆职称计算机考试网,重庆职称计算机考试大纲

    重庆职称计算机考试网,重庆职称计算机考试大纲(2005年7月修订)根据重庆市职称改革办公室《关于调整全市专业技术人员职称外语和职称计算机考试有关规定的通知》(渝职改办〔2005〕99号),我市职称计算机考试分为6个级别,分别用字母A、B、C、D、E、F表示。我市职称计算机考试教材全书共有九个部分。其中计算机基础知识、中文Windows2000操作基础、中文Word2000、计算机网络基础与Internet应用、中文Access2000…

  • Aria2安装(aria2安卓版手机配置教程)

    1安装sudopacman-Saria22创建配置文件cd~mkdir.aria2cd.aria2toucharia2.confaria2.logaria2.session3修改配置文件aria2.conf需要自己配置rpc-secret和bt-trackerbt-tracker可以去trackerslist网站获取#文件的保存路径(可使用绝对路径或相对路径),默认:当前启动位置dir=${HOME}/Downloads#启用磁盘缓存,0为

  • 关于window10安装jdk,配置环境变量,javac不是内部或外部命令,也不是可运行的程序 或批处理文件的细节问题。[通俗易懂]

    关于window10安装jdk,配置环境变量,javac不是内部或外部命令,也不是可运行的程序 或批处理文件的细节问题。[通俗易懂]今日拿到一台新的window10笔记本电脑,非常熟练的安装了JDK(因为在学校经常给同学安装JDK–)但是发现javajava-version命令都可以使用,唯独javac命令出现不是内部或外部命令,也不是可运行的程序或批处理文件。出现这个问题基本就是命令找不到路径,基本可以锁定是环境变量Path出现问题。我们查看Path环境变量发现如下情况:注意红色框框,看到配置的环境变量出现…

  • verifycode验证码模版「建议收藏」

    verifycode验证码模版「建议收藏」#-*-coding:utf-8-*-fromdjango.shortcutsimportHttpResponsedefverifycode(request):#引入绘图模块fromPILimportImage,ImageDraw,ImageFont#引入随机函数模块importrandom#定义变量,…

  • kettle教程(1) 简单入门、kettle简单插入与更新。打开kettle

    kettle教程(1) 简单入门、kettle简单插入与更新。打开kettle本文要点:Kettle的建立数据库连接、使用kettle进行简单的全量对比插入更新:kettle会自动对比用户设置的对比字段,若目标表不存在该字段,则新插入该条记录。若存在,则更新。 Kettle简介:Kettle是一款国外开源的ETL工具,纯java编写,可以在Window、Linux、Unix上运行,数据抽取高效稳定。Kettle中文名称叫水壶,该项目的主程序员MATT希望把各种数…

  • request.getParameterValues与request.getParameter的区别

    request.getParameterValues与request.getParameter的区别一、简单的对比request.getParameter用的比较多,相对熟悉  request.getParameterValues(String  name)是获得如checkbox类(名字相同,但值有多个)的数据。  接收数组变量,如checkobx类型    request.getParameter(String  name)是获得相应名的数据,

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号