用H5做一个手机颜色选择的代码
时间: 2024-03-09 07:46:57 浏览: 21
以下是一个简单的用H5实现手机颜色选择的代码示例:
```html
<!DOCTYPE html>
<html>
<head>
<title>手机颜色选择</title>
</head>
<body>
<h2>请选择手机颜色:</h2>
<input type="radio" name="color" value="black" id="black">
<label for="black">黑色</label><br>
<input type="radio" name="color" value="white" id="white">
<label for="white">白色</label><br>
<input type="radio" name="color" value="blue" id="blue">
<label for="blue">蓝色</label><br>
<input type="radio" name="color" value="red" id="red">
<label for="red">红色</label><br>
<button onclick="submitColor()">提交</button>
<script>
function submitColor() {
var radios = document.getElementsByName('color');
var selectedColor = '';
for (var i = 0; i < radios.length; i++) {
if (radios[i].checked) {
selectedColor = radios[i].value;
break;
}
}
alert('你选择的手机颜色是:' + selectedColor);
}
</script>
</body>
</html>
```
该示例中使用了四个单选框来选择手机的颜色,使用了一个按钮来提交选择的颜色。当点击提交按钮时,会调用JavaScript函数submitColor()来获取选择的颜色,并弹出一个提示框显示选择的颜色。