制作页面(html)选择题
第一版
题目和选项
<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=utf-8>
<title>选择题choice question</title>
<style>
.divCss{
ma
第一版
题目和选项
<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=utf-8>
<title>选择题choice question</title>
<style>
.divCss{
margin-bottom: 10px;
}
.olCss{
padding-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
}
</style>
</head>
<body>
<!--
type默认为数字,其他类型有英文字母A/a,罗马字母I/i,
start可以设置起始标记 下标从1开始
-->
<div class=divCss>
1.你现在处于什么地方?()
<ol type=A start= class=olCss >
<li class=liRight>银河系</li>
<li class=liRight>太阳系</li>
<li class=liRight>地球</li>
</ol>
</div>
<div class=divCss>
2.你现在处于什么地方?()
<ol type=A start= class=olCss >
<li class=liRight>银河系</li>
<li class=liRight>太阳系</li>
<li class=liRight>地球</li>
</ol>
</div>
</body>
</html>效果图如下：
小插曲：之前一直把题目内容放<ol>标签内，怎么都调不成对齐，最后妥协了放外面。
第二版
选项前加单选框、多选框
<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=utf-8>
<title>选择题choice question</title>
<style>
.divCss{
margin-bottom: 10px;
}
.olCss{
padding-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 40px;
}
.inputClass {
float:left;
margin-left: -50px;
}
.liRight {
}
</style>
</head>
<body>
<!--
type默认为数字,其他类型有英文字母A/a,罗马字母I/i,
start可以设置起始标记 下标从1开始
-->
<div class=divCss>
1.你现在处于什么地方?()
<ol type=A start= class=olCss >
<input class=inputClass type=radio name=place value=A checked=checked /><li class=liRight>银河系</li>
<input class=inputClass type=radio name=place value=B /><li class=liRight>太阳系</li>
<input class=inputClass type=radio name=place value=C /><li class=liRight>地球</li>
</ol>
</div>
<div class=divCss>
2.你现在处于什么地方?()
<ol type=A start= class=olCss >
<input class=inputClass type=checkbox name=place value=A checked=checked /><li class=liRight>银河系</li>
<input class=inputClass type=checkbox name=place value=B checked=checked /><li class=liRight>太阳系</li>
<input class=inputClass type=checkbox name=place value=C /><li class=liRight>地球</li>
</ol>
</div>
</body>
</html>效果图：
第三版
提交答案
<!DOCTYPE html>
<html lang=zh>
<head>
<meta charset=utf-8>
<title>选择题choice question</title>
<style>
.divCss{
margin-bottom: 10px;
}
.olCss{
padding-left: 20px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 40px;
}
.inputClass {
float:left;
margin-left: -50px;
}
.liRight {
}
</style>
</head>
<body>
<!--
type默认为数字,其他类型有英文字母A/a,罗马字母I/i,
start可以设置起始标记 下标从1开始
-->
<form>
<div class=divCss>
1.你现在处于什么地方?()
<ol type=A start= class=olCss name=single >
<input class=inputClass type=radio name=place1 value=A checked=checked /><li class=liRight>银河系</li>
<input class=inputClass type=radio name=place1 value=B /><li class=liRight>太阳系</li>
<input class=inputClass type=radio name=place1 value=C /><li class=liRight>地球</li>
</ol>
</div>
<div class=divCss>
2.你现在处于什么地方?()
<ol type=A start= class=olCss name=single >
<input class=inputClass type=radio name=place2 value=A /><li class=liRight>银河系</li>
<input class=inputClass type=radio name=place2 value=B checked=checked /><li class=liRight>太阳系</li>
<input class=inputClass type=radio name=place2 value=C /><li class=liRight>地球</li>
</ol>
</div>
<div class=divCss>
.你现在处于什么地方?()
<ol type=A start= class=olCss name=multi >
<input class=inputClass type=checkbox name=place value=A checked=checked /><li class=liRight>银河系</li>
<input class=inputClass type=checkbox name=place value=B checked=checked /><li class=liRight>太阳系</li>
<input class=inputClass type=checkbox name=place value=C /><li class=liRight>地球</li>
</ol>
</div>
<div class=divCss>
4.你现在处于什么地方?()
<ol type=A start= class=olCss name=multi >
<input class=inputClass type=checkbox name=place4 value=A /><li class=liRight>银河系</li>
<input class=inputClass type=checkbox name=place4 value=B checked=checked /><li class=liRight>太阳系</li>
<input class=inputClass type=checkbox name=place4 value=C checked=checked /><li class=liRight>地球</li>
</ol>
</div>
<input type=button value=提交答案 onclick=sendMsg() />
</form>
<script src=js/jquery-.2.js></script>
<script>
function sendMsg(){
//题目数
var singleSize = $([name= single ]).length;
var multiSize = $([name= multi ]).length;
//答案数组
var answerArr = new Array(singleSizemultiSize);
//单选答案
$([name= single ]).each(function(index){
//放入答案
var answer = $(input[name= place(index1) ]:checked).val();
answerArr[index] = answer;
})
//多选答案
$([name= multi ]).each(function(index){
//拼接多选答案
var multiAnswer = ;
$(input[name= place(indexsingleSize1) ]:checked).each(function(){
if (checked == $(this).attr(checked)) {
//拼接答案
multiAnswer = multiAnswer$(this).attr( value );
}
})
//放入答案
answerArr[indexsingleSize] = multiAnswer;
})
//在调试模式下的cole中查看输出
cole.log(answerArr);
//发送答案到服务器
}
</script>
</body>
</html>效果图：
#感谢您对电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格的认可，转载请说明来源于"电脑配置推荐网 - 最新i3 i5 i7组装电脑配置单推荐报价格
上传时间： 2023-05-03 15:23:07
推荐阅读
| 留言与评论（共有 11 条评论） |
| 本站网友 h3c交换机官网 | 19分钟前 发表 |
| 第一版 题目和选项 <!DOCTYPE html> <html lang=zh> <head> <meta charset=utf-8> <title>选择题choice question</title> <style> .divCss{ margin-bottom | |
| 本站网友 蚌埠火灾 | 13分钟前 发表 |
| 10px; } .olCss{ padding-left | |
| 本站网友 白景琦 | 3分钟前 发表 |
| 20px; margin-top | |
| 本站网友 美容院产品排行 | 19分钟前 发表 |
| 10px; } .olCss{ padding-left | |
| 本站网友 临平二手房网 | 2分钟前 发表 |
| 其他类型有英文字母A/a | |
| 本站网友 男友一个月深蹲后 | 12分钟前 发表 |
| checked).val(); answerArr[index] = answer; }) //多选答案 $([name= multi ]).each(function(index){ //拼接多选答案 var multiAnswer = ; $(input[name= place(indexsingleSize1) ] | |
| 本站网友 前列腺病 | 20分钟前 发表 |
| 10px; } .olCss{ padding-left | |
| 本站网友 搜索引擎营销案例 | 1分钟前 发表 |
| -50px; } .liRight { } </style> </head> <body> <!-- type默认为数字 | |
| 本站网友 lbe | 19分钟前 发表 |
| start可以设置起始标记 下标从1开始 --> <form> <div class=divCss> 1.你现在处于什么地方?() <ol type=A start= class=olCss name=single > <input class=inputClass type=radio name=place1 value=A checked=checked /><li class=liRight>银河系</li> <input class=inputClass type=radio name=place1 value=B /><li class=liRight>太阳系</li> <input class=inputClass type=radio name=place1 value=C /><li class=liRight>地球</li> </ol> </div> <div class=divCss> 2.你现在处于什么地方?() <ol type=A start= class=olCss name=single > <input class=inputClass type=radio name=place2 value=A /><li class=liRight>银河系</li> <input class=inputClass type=radio name=place2 value=B checked=checked /><li class=liRight>太阳系</li> <input class=inputClass type=radio name=place2 value=C /><li class=liRight>地球</li> </ol> </div> <div class=divCss> .你现在处于什么地方?() <ol type=A start= class=olCss name=multi > <input class=inputClass type=checkbox name=place value=A checked=checked /><li class=liRight>银河系</li> <input class=inputClass type=checkbox name=place value=B checked=checked /><li class=liRight>太阳系</li> <input class=inputClass type=checkbox name=place value=C /><li class=liRight>地球</li> </ol> </div> <div class=divCss> 4.你现在处于什么地方?() <ol type=A start= class=olCss name=multi > <input class=inputClass type=checkbox name=place4 value=A /><li class=liRight>银河系</li> <input class=inputClass type=checkbox name=place4 value=B checked=checked /><li class=liRight>太阳系</li> <input class=inputClass type=checkbox name=place4 value=C checked=checked /><li class=liRight>地球</li> </ol> </div> <input type=button value=提交答案 onclick=sendMsg() /> </form> <script src=js/jquery-.2.js></script> <script> function sendMsg(){ //题目数 var singleSize = $([name= single ]).length; var multiSize = $([name= multi ]).length; //答案数组 var answerArr = new Array(singleSizemultiSize); //单选答案 $([name= single ]).each(function(index){ //放入答案 var answer = $(input[name= place(index1) ] | |
| 本站网友 华堂商场 | 15分钟前 发表 |
| 罗马字母I/i | |