首页点歌系统前端代码

点歌系统前端代码

时间: 2023-08-23 08:06:49 浏览: 71

以下是一个简单的点歌系统前端代码，使用了HTML、CSS和JavaScript： HTML: ``` <!DOCTYPE html> <html> <head> <title>点歌系统</title> <link rel="stylesheet" type="text/css" href="style.css"> </head> <body> <h1>欢迎来到点歌系统</h1> <div> <label>姓名：</label> <input type="text" id="name"> </div> <div> <label>歌曲名：</label> <input type="text" id="song"> </div> <button onclick="submitSong()">提交</button> <ul id="songList"></ul> <script src="script.js"></script> </body> </html> ``` CSS: ``` h1 { text-align: center; } label { display: inline-block; width: 80px; } input[type="text"] { width: 200px; } button { margin-top: 10px; } #songList { margin-top: 20px; } ``` JavaScript: ``` let songs = []; function submitSong() { let name = document.getElementById("name").value; let song = document.getElementById("song").value; if (name && song) { songs.push({name: name, song: song}); document.getElementById("name").value = ""; document.getElementById("song").value = ""; updateSongList(); } } function updateSongList() { let songList = document.getElementById("songList"); songList.innerHTML = ""; for (let i = 0; i < songs.length; i++) { let li = document.createElement("li"); let text = document.createTextNode(songs[i].name + " 点歌了 " + songs[i].song); li.appendChild(text); songList.appendChild(li); } } ``` 这个系统包括一个输入姓名和歌曲名的表单，以及一个提交按钮和一个歌曲列表。当用户输入姓名和歌曲名并点击提交按钮时，歌曲将被添加到列表中。```updateSongList()```函数用于更新歌曲列表。

阅读全文