使用HTML+javascript编写了一个生成题库小工具
程序员文章站
2024-02-06 23:04:04
...
代码很简单，没什么技术含量，因为第一次因为自己的需求写出来的东西，所以想法
HTML代码
没什么废话直接上代码，第一次写博客也不知道写点啥。
```javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>题库练习</title>
</head>
<style type="text/css">
body{
margin: 0;
padding: 0;
}
#butt{
margin: 0 auto;
text-align: center;
width: 600px;
height: 600px;
}
ul{
list-style: none;
display：table;
text-align:center
}
li{
float: left;
margin-left:30px;
}
#content{
height:600px;
width: 600px;
border: 4px solid red;
text-align: left;
}
#next{
width: 600px;
height: 50px;
background-color: aqua;
}
p{
width: 600px;
}
label{
height: 50px;
width: 100px;
}
#ss{
height: 40px;
padding-top: 10px;
}
#ss input{
height: 30px;
width: 30px;
font-size: 40px;
}
</style>
<body>
<div id="butt">
<div id="content">
<p id="insert"></p>
</div>
<div id="ss">
<label><input name="Fruit" type="radio" value="A" id="A"/>A </label>
<label><input name="Fruit" type="radio" value="B" id="B"/>B </label>
<label><input name="Fruit" type="radio" value="C" id="C"/>C </label>
<label><input name="Fruit" type="radio" value="D" id="D"/>D </label>
</div>
<input type="submit" value="下一题" id="next" onclick="diji()"/>
</div>
</body>
<script src="liu.js" type="text/javascript"></script>
</html>
## js代码
这是js的代码
```javascript
var x=0;
var a = new Array("1、在CSS中，以下哪项表示类选择器（）A. #div B. .div C. div D.div",
"2. 可用于响应式布局页面开发的框架是（ ）A. jQueryB. BootstrapC. AjaxD. Angular",
"3. 前端工程师可以使用（ ）编写后端程序A．Angular B．Node.jsC．Backbone.js D．jQuery",
"4. 微信小程序官方提供使用的语法不包括（ ）A．WXML B．JavaScript C.WXSS D．Angular",
"5. 下列说法不正确的是（）A. React Native平台是免费、开源的。 B. React Native可以通过动态加载使服务端更新客户端代码与资源。 C. React Native是React.js思想在Native上的体现D. React Native美化部分使用的是CSS，开发者可以使用CSS语法编写程序。",
"6. 如何改变某个元素的文本颜色（）A. text-color:B. fgcolor:C. color:D. text-color=",
"7. 哪个属性可控制文本的尺寸（ ）A. fontSizeB. textStyleC. fontStyleD. textSize",
"8. 在文本属性中，文本修饰的取值textDecorationLine：’ line-through’表示（ ）A．不用修饰 B．下划线C．上划线 D．横线从字中间穿过");
var da=new Array("B","B","B","D","D","C","A","D");
document.getElementById('insert').innerText=""+a[0];
// var diyi=document.getElementById('A');
function diji(){
if(document.getElementsByName("Fruit")[0].checked==true){
if(da[x]==document.getElementById('A').value){
console.log("第"+(x+1)+"题，"+"答案正确");
}else{
console.log("第"+(x+1)+"题,"+'正确答案是：'+da[x]+"，你的答案是:"+document.getElementsByName("Fruit")[0].value);
console.log("------------------------------------------------------------------------------------------");
console.log("题干:"+a[x]);
console.log("------------------------------------------------------------------------------------------");
}
}else if(document.getElementsByName("Fruit")[1].checked==true){
if(da[x]==document.getElementById('B').value){
console.log("第"+(x+1)+"题，"+"答案正确");
}else{
console.log("第"+(x+1)+"题，"+'正确答案是：'+da[x]+"，你的答案是:"+document.getElementsByName("Fruit")[1].value);
console.log("------------------------------------------------------------------");
console.log("题干:"+a[x]);
console.log("------------------------------------------------------------------");
}
}else if(document.getElementsByName("Fruit")[2].checked==true){
if(da[x]==document.getElementById('C').value){
console.log("第"+(x+1)+"题"+"答案正确");
}else{
console.log("第"+(x+1)+"题，"+'正确答案是：'+da[x]+"，你的答案是:"+document.getElementsByName("Fruit")[2].value);
console.log("-------------------------------------------------------------------");
console.log("题干:"+a[x]);
console.log("-------------------------------------------------------------------");
}
}else if(document.getElementsByName("Fruit")[3].checked==true){
if(da[x]==document.getElementById('D').value){
console.log("第"+(x+1)+"题，"+"答案正确");
}else{
console.log("第"+(x+1)+"题，"+'正确答案是：'+da[x]+"，你的答案是:"+document.getElementsByName("Fruit")[3].value);
console.log("-------------------------------------------------------------------");
console.log("题干:"+a[x]);
console.log("-------------------------------------------------------------------");
}
}else{
alert("请选择答案");
return false;
}
x++;
document.getElementById('insert').innerText=""+a[x];
if(x==193){
alert("答题完成,请按 ‘F12’ 查看结果");
}
}
插入链接与图片
链接: link.
图片:
使用方法 选择选项单击下一题然后 查看答题的结果按F12查看