我的簡書：http://www.reibang.com/u/c91e642c4d90
我的CSDN：http://blog.csdn.net/wo_ha
我的GitHub：https://github.com/chuanqiLjp
轉(zhuǎn)載請注明出處：http://www.reibang.com/p/6e4d53b7d5b7
序言：
由于這段時間公司有個項目需要做一個問卷調(diào)查的在線生成，大概需求：可以在線添加問題摇庙、刪除問題廊鸥、最后生成問卷腊敲，大概的界面是：
問卷調(diào)查模版生成分析.png
公司的web工程師這段時間由比較忙作煌，自己剛好處于學習H5階段清蚀，于是就順手魯一個了，先來看一下效果圖吧递瑰！
image.png
我先總結(jié)一下這個項目中使用到的知識點祟牲，然后有興趣的同學可以看下我的源代碼是怎么實現(xiàn)的（還好沒有涉及到公司的利益可以分享出來）
1、日志打印
console.log("向控制臺輸出日志");
alert("彈出警告框");
confirm("確認消息內(nèi)容"); // 確認框抖部，返回布爾值
2疲眷、JS中變量的定義
var listQue=new Array()；// 定義一個數(shù)組列表
var queItem={};//定義一個對象
var arr=["ABC","EFG" ];//定義一個數(shù)組并初始化
3您朽、數(shù)組列表的操作
var listQue=new Array()；// 定義一個數(shù)組列表
var length=listQue.length;//獲取到列表中的長度
var item=listQue[10];//獲取下標為10的元素
listQue.push(queItem);//添加一個元素到列表中
listQue.splice(index,deleteLength);//刪除列表中的元素换淆，index：刪除開始的下標哗总，deleteLength：刪除元素的個數(shù)
listQue.splice(0,listQue.length);//清空數(shù)組列表
var str = listQue.join("");//轉(zhuǎn)換為字符串
var jsonStr=JSON.stringify(listQue);//將字符串轉(zhuǎn)換為JSON字符串
4、字符串的操作
str.substring(start,end);//截取字符串并返回新的字符串倍试，重載方法：str.substring(start);
5讯屈、標簽元素的操作
element.getAttribute("屬性名")；//獲取指定屬性名的屬性值
element.id;//獲取標簽的ID值
element.checked;//獲取標簽是否被選中县习，true被選中涮母，type="radio"的input標簽
element.setAttribute("屬性名","屬性值");//為指定屬性設(shè)置屬性值
element.parentNode.removeChild(element); // 讓 “要刪除的元素” 的 “父元素” 刪除 “要刪除的元素”
element.insertAdjacentHTML(swhere,stext);//swhere:指定插入html標簽語句的地方硕勿，有四種值可以用：beforeBegin:插入到標簽開始前抑钟，afterBegin:插入到標簽開始標記后，beforeEnd:插入到標簽結(jié)束標記前烈掠，afterEnd:插入到標簽結(jié)束標記后彤钟； stext:要插入的HTML內(nèi)容
element.insertAdjacentText(swhere,stext);//與insertAdjacentHTML方法類似来候，只不過只能插入純文本，參數(shù)相同
document.getElementsByName("name值");//根據(jù)name屬性的值獲取到一個標簽列表
document.getElementById("ID值");//根據(jù)標簽的id找到此標簽
document.getElementsByTagName("標簽名");//根據(jù)標簽名稱找到一個標簽列表
6逸雹、頁面的初始化
方法一： 在標簽上靜態(tài)綁定onload事件营搅，<body onload="aaa()">等待body加載完成，就會執(zhí)行aaa()方法梆砸。
方法二： 使用window.onload = function(){ console.log("頁面加載完成后執(zhí)行此方法转质，可以進行數(shù)據(jù)的填充，執(zhí)行頁面的初始化操作");} 等到整個window加載（頁面加載完成）完成執(zhí)行方法體,可以進行數(shù)據(jù)的填充帖世。比方法一先執(zhí)行
7休蟹、單選框
依靠name判斷是否為一組的，type取值可以為radio（單選）、checkbox（多選）鸡挠，checked屬性的值為true表示默認選中
問題類型：
<input type="radio" name="questType0" id="idQuestTypeRadio0" checked="true">單選
<input type="radio" name="questType0" id="idQuestTypeCheckbox0">多選
8辉饱、下拉選擇
選項改變會調(diào)用屬性為onChange的方法，標簽option的屬性selected="selected"表示默認被選中拣展，JS中var optionValue=select.options[select.options.selectedIndex].value//獲取已選的值彭沼，
選項個數(shù)：
<select name="optonsNum" id="idOptionNum0" onChange="optionOnChange(this,null)">
<option name="name_idOptionNum0_option">請選擇</option>
<option name="name_idOptionNum0_option">A</option>
<option name="name_idOptionNum0_option">AB</option>
<option name="name_idOptionNum0_option" selected="selected">ABC</option>
<option name="name_idOptionNum0_option">ABCD</option>
<option name="name_idOptionNum0_option">ABCDE</option>
<option name="name_idOptionNum0_option">ABCDEF</option>
<option name="name_idOptionNum0_option">ABCDEFG</option>
</select>
9、input標簽
inputElement.value;//JS中獲取輸入框中的內(nèi)容
placeholder屬性：輸入框提示內(nèi)容备埃；
value屬性：輸入框默認的值
maxlength屬性：最長的輸入長度
type屬性：輸入的類型姓惑，常見的有：
button 定義可點擊按鈕（多數(shù)情況下，用于通過 JavaScript 啟動腳本）按脚。
checkbox 定義復選框于毙。
file 定義輸入字段和 "瀏覽"按鈕，供文件上傳辅搬。
hidden 定義隱藏的輸入字段唯沮。
image 定義圖像形式的提交按鈕。
password 定義密碼字段堪遂。該字段中的字符被掩碼介蛉。
radio 定義單選按鈕。
reset 定義重置按鈕溶褪。重置按鈕會清除表單中的所有數(shù)據(jù)币旧。
submit 定義提交按鈕。提交按鈕會把表單數(shù)據(jù)發(fā)送到服務(wù)器猿妈。
text 定義單行的輸入字段吹菱，用戶可在其中輸入文本。默認寬度為 20 個字符彭则。
<input id="idOptionNum0_0" class="class_option" placeholder="輸入框提示內(nèi)容" maxlength="30" type="text" name="name_idOptionNum0_input" type="text" value="輸入框默認值"> </input>
10鳍刷、內(nèi)部樣式
<style type="text/css">
/* 為class屬性為class_option的設(shè)置樣式，class使用小數(shù)點.俯抖，id使用#倾剿， */
.class_option{
margin-left:50px;
margin-bottom: 20px;
margin-top:25px;
margin-left:900px;
border:1px green solid; /* 為標簽添加邊框，邊框的寬度為1px蚌成，綠色前痘，有立體效果*/
width: 300px;/* 寬度 */
}
/* 為class屬性為class_ulOption 下的標簽li設(shè)置樣式 */
.class_ulOption li{
line-height: 40px;/* 每一行的高度 */ /* */
list-style-type: none;/*取消li標簽前面的小圓點*/
}
/* 為全部input標簽設(shè)置樣式 */
input{
color: crimson;
}
</style>
11、Google Chrome調(diào)試JavaScript
12担忧、CSS （Cascading Style Sheets ：層疊樣式表）CSS選擇器
選擇器優(yōu)先級：ID選擇器>類選擇器>標簽選擇器芹缔，當選擇器優(yōu)先級相同的情況下，采用“就近原則”(最后一次出現(xiàn)的選擇器)
1.標簽選擇器
標簽名{
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
2.類選擇器(class選擇器)
.類名{
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
3.ID選擇器
#ID名{
屬性名1:屬性值1;
屬性名2:屬性值2;
...
}
13瓶盛、JavaScript函數(shù)的聲明
function 函數(shù)名(xx,xx){
// 函數(shù)體代碼
}
14最欠、其他操作
var intValue = parseInt("123");//將字符串轉(zhuǎn)換為一個整數(shù)
：空格示罗； emsp;：一個字符的空格
項目的源代碼
代碼中都有詳盡的注釋，就不講解了芝硬，放在這里大家參考下吧蚜点，有什么好的意見建議都可以留言指出來
<!DOCTYPE html>
<html>
<head>
<title>生成問卷調(diào)查的模版</title>
<script type="text/javascript">
var listQue=new Array();//字段：serialNum（題號-1）、content（問題內(nèi)容）拌阴、type（選項類型绍绘，ture：單選）、optionNum（選項個數(shù)）迟赃、options（答案的數(shù)組）
var lastQuestItemID="questionList";//插入問題的最后一次目標問題ID
/*頁面的初始化
方法一： 在標簽上靜態(tài)綁定onload事件陪拘，<body onload="aaa()">等待body加載完成，就會執(zhí)行aaa()方法纤壁。
方法二： 使用window.onload = function(){} 等到整個window加載（頁面加載完成）完成執(zhí)行方法體,可以進行數(shù)據(jù)的填充左刽。比方法一先執(zhí)行
*/
window.onload=function (){
console.log("頁面加載完成后執(zhí)行此方法，可以進行數(shù)據(jù)的填充酌媒，執(zhí)行頁面的初始化操作");
for (var i = 0; i < 10; i++) {
var queItem={};
queItem.serialNum=i;
queItem.content="測試——問題內(nèi)容——"+i;
queItem.type=i%2==0?true:false;
queItem.options=[i+"測試選項A",i+"測試選項",i+"測試選項"];
queItem.optionNum=queItem.options.length;
listQue.push(queItem);
}
for (var i = 0; i < listQue.length; i++) {
var queItem = listQue[i];
console.log("delsteQuest——》queItem="+queItem);
var insertHtml=generateHtmlForQuestionItem(queItem);
insertHTML(lastQuestItemID,insertHtml,"afterEnd");
var select=document.getElementById("idOptionNum"+queItem.serialNum);
optionOnChange(select,queItem.options);
lastQuestItemID="list"+(queItem.serialNum);
}
}
//點擊添加問題按鈕的時候會調(diào)用,用于添加單個問題
function addNextQuest(){
// alert("添加問題");
console.log("添加問題");
//創(chuàng)建一個問題對象欠痴，并初始化
var queItem={};
queItem.serialNum=listQue.length;//題號
queItem.content="問題內(nèi)容——>初始值";//問題內(nèi)容
queItem.type=true;//選項類型，ture：單選
queItem.optionNum=0;//選項個數(shù)
queItem.options=[];//答案的數(shù)組
queItem.optionNum=queItem.options.length;//選項個數(shù)
listQue.push(queItem);//添加到問卷的列表
var insertHtml=generateHtmlForQuestionItem(queItem);
insertHTML(lastQuestItemID,insertHtml,"afterEnd");
lastQuestItemID="list"+(queItem.serialNum);
console.log(queItem);
}
//每道題的選項個數(shù)發(fā)生變化的時候會調(diào)用
function optionOnChange(select,options){
//獲取已選的值： this.options[this.options.selectedIndex].value
var optionValue=select.options[select.options.selectedIndex].value//獲取已選的值
if (optionValue=="請選擇") {
return;
}
var selectID=select.id;//該select 的id值
var optionNum =optionValue.length;
console.log("optionValue="+optionValue+",id="+selectID+",optionNum="+optionNum);
var element =document.getElementById(selectID+"_list");
if (element!=null) {
deleteHtml(selectID+"_list");
}
//idOptionNum0
var insertHtml= generateHtmlForQuestionOption(selectID,optionNum,options);
console.log(selectID.substring(11));
insertHTML("delete"+selectID.substring(11),insertHtml,"afterEnd");
}
/*刪除一道與該刪除按鈕同一級的問題
btnDelete ： 按鈕的對象
*/
function delsteQuest(btnDelete){
// alert("刪除問題");delete
var id=btnDelete.id;
var index=id.substring(6);
console.log("刪除問題,id="+id+",index="+index);
deleteHtml("list"+index);
listQue.splice(index,1);
var queItemInputList=getQueItemInputValue();
deleteQuestionItemALL();
for (var i = 0; i < queItemInputList.length; i++) {
var queItem = queItemInputList[i];
console.log("delsteQuest——》queItem="+queItem);
listQue.push(queItem);
var insertHtml=generateHtmlForQuestionItem(queItem);
insertHTML(lastQuestItemID,insertHtml,"afterEnd");
// idOptionNum0
var select=document.getElementById("idOptionNum"+queItem.serialNum);
optionOnChange(select,queItem.options);
lastQuestItemID="list"+(queItem.serialNum);
}
}
//刪除全部問題項
function deleteQuestionItemALL(){
var tem=document.getElementsByName("questionItem");
if (tem!=null&&tem.length>0) {
console.log("deleteQuestionItemALL——》questionItem Length="+tem.length);
for (var i = 0; i < tem.length; ) {// 由于tem數(shù)組中值會隨著刪除而減小秒咨，所以此處無須對i進行加加操作喇辽；
// console.log(i+"_________________________"+tem[0].getAttribute("id"));
deleteHtml(tem[i].getAttribute("id"));
}
listQue.splice(0,listQue.length);
}
if (listQue.length==0) {
lastQuestItemID="questionList";
}
}
/*生成問卷
*/
function creatQuest(){
console.log("生成問卷");
var queItemInputList=getQueItemInputValue();
var jsonStr=JSON.stringify(queItemInputList);
console.log(jsonStr);
}
/*獲取所有問題輸入的數(shù)據(jù)，得到一個集合拭荤，
字段：serialNum（題號-1）、content（問題內(nèi)容）疫诽、type（選項類型舅世，ture：單選）、optionNum（選項個數(shù)）奇徒、options（答案的數(shù)組）
*/
function getQueItemInputValue(){
var queItemInputList=new Array();
var questionItemList=document.getElementsByName("questionItem");
if (questionItemList!=null&&questionItemList.length>0) {
for (var i = 0; i < questionItemList.length; i++) {
var queItemID=questionItemList[i].getAttribute("id");
var idNum = parseInt(queItemID.substring(4));
console.log("idNum="+idNum);
var queItem={};
queItem.serialNum=i;//題號
queItem.content=document.getElementById("questContent"+idNum).value;//問題內(nèi)容
var queTypeList=document.getElementsByName("questType"+idNum);
if (queTypeList!=null&& queTypeList.length>0) {
if (queTypeList[0].checked==true) {
queItem.type=true;//選項類型雏亚，ture：單選
}else if (queTypeList[1].checked==true) {
queItem.type=false;//選項類型，ture：單選
}
}
// name_idOptionNum0_input
queItem.optionNum=0;//選項個數(shù)
queItem.options=[];//答案的數(shù)組
var optionList=document.getElementsByName("name_idOptionNum"+idNum+"_input");// var optionList=document.getElementsByName("name_idOptionNum0_input");
if (optionList!=null && optionList.length>0) {
var options=[];
for (var j = 0; j < optionList.length; j++) {
options.push(optionList[j].value);
// console.log(queItem.options[j]);
}
queItem.options=options;
queItem.optionNum=optionList.length;//選項個數(shù)
}
console.log(queItem);
queItemInputList.push(queItem);//添加到問卷的列表
}
}
return queItemInputList;
}
/** 在目標元素后面插入一段新的HTML并重新渲染
targetElementId : 在目標元素ID插入HTML代碼
insertHtml : 插入的HTML代碼
insertType : 插入的類型摩钙，
beforeBegin:插入到標簽開始前 罢低；afterBegin:插入到標簽開始標記后 ；beforeEnd:插入到標簽結(jié)束標記前 胖笛；afterEnd:插入到標簽結(jié)束標記后
*/
function insertHTML(targetElementId,insertHtml,insertType){
console.log("在目標元素ID="+targetElementId+"插入HTML代碼");
console.log("插入的HTML代碼："+insertHtml);
document.getElementById(targetElementId).insertAdjacentHTML(insertType,insertHtml);
// 提供了兩個方法來進行添加网持，insertAdjacentHTML和insertAdjacentText
// insertAdjacentHTML方法：在指定的地方插入html標簽語句。
// insertAdjacentText方法與insertAdjacentHTML方法類似长踊，只不過只能插入純文本功舀，參數(shù)相同
// 原型：insertAdjacentHTML(swhere,stext)
// 參數(shù)： swhere:指定插入html標簽語句的地方，有四種值可以用：
// 1.beforeBegin:插入到標簽開始前
// 2.afterBegin:插入到標簽開始標記后
// 3.beforeEnd:插入到標簽結(jié)束標記前
// 4.afterEnd:插入到標簽結(jié)束標記后
// stext:要插入的內(nèi)容
}
/*刪除指定ID的網(wǎng)頁片段
htmlID ： 片段的ID
*/
function deleteHtml(htmlID){
console.log("刪除指定ID的網(wǎng)頁片段,htmlID="+htmlID);
var element=document.getElementById(htmlID); // 按 id 獲取要刪除的元素
if (element!=null) {
element.parentNode.removeChild(element); // 讓 “要刪除的元素” 的 “父元素” 刪除 “要刪除的元素”
}
}
/*生成一道問題的選項的HTML代碼片段
selectID ： select的ID
optionNum ： 選項的個數(shù)
*/
function generateHtmlForQuestionOption(selectID,optionNum,options){
console.log("生成一道問題的選項的HTML代碼片段 selectID="+selectID+",optionNum="+optionNum+",options"+options);
var build =new Array();
build.push("<ul id=\"");
build.push(selectID+"_list");
build.push("\" class=\"class_ulOption\">");
var optArr=["A","B","C","D","E","F","G"];
for (var i = 0; i < optionNum; i++) {
build.push("<li>");
build.push("<label>");
build.push(optArr[i]+" . ");
build.push("</label>");
build.push("<input id=\"");
build.push(selectID+"_"+i);
build.push("\" class=\"class_option\" placeholder=\"");
build.push("請輸入選項"+optArr[i]+"的內(nèi)容");
build.push("\" maxlength=\"30\" type=\"text\" name=\"name_"+selectID+"_input\" type=\"text\"");
if (options!=null&&options[i]!=null) {
build.push(" value=\""+options[i]+"\"");
}
build.push("/>");
build.push("</li>");
}
build.push("</ul>");
var result=build.join("");
return result;
}
//根據(jù)指定的問題Item生成一段問題的網(wǎng)頁
function generateHtmlForQuestionItem(queItem){
console.log(queItem);
var build =new Array();
build.push("<div id=\"");
build.push("list"+queItem.serialNum);
build.push("\" class=\"class_questionItem\" name=\"questionItem\">");
build.push("<div>");
build.push("<label>問題編號：");
build.push((queItem.serialNum+1));
build.push("</label><br><br> <label>問題內(nèi)容：</label> ");
build.push("<input name=\"questContent\" class=\"class_quentionContent\" placeholder=\"請輸入問題的內(nèi)容\" maxlength=\"255\" size=\"40\" id=\"questContent"+queItem.serialNum+"\" type=\"text\" value=\""+queItem.content+"\"> </input>");
build.push("        ")
build.push("問題類型：");
build.push("<input type=\"radio\" name=\"questType"+queItem.serialNum+"\" id=\"idQuestTypeRadio"+queItem.serialNum+"\" checked=\""+queItem.type+"\">")
build.push("單選");
if (!queItem.type) {
build.push("<input type=\"radio\" name=\"questType"+queItem.serialNum+"\" id=\"idQuestTypeCheckbox"+queItem.serialNum+"\" checked=\"true\">");
}else{
build.push("<input type=\"radio\" name=\"questType"+queItem.serialNum+"\" id=\"idQuestTypeCheckbox"+queItem.serialNum+"\" >");
}
build.push("多選 ");
build.push(" 選項個數(shù)：<select name=\"optonsNum\" ");
build.push(" id=\"");
build.push("idOptionNum"+queItem.serialNum);
build.push("\" onChange =\"optionOnChange(this,null)\">");
var arr=["請選擇","A","AB","ABC","ABCD","ABCDE","ABCDEF","ABCDEFG"];
for (var i = 0; i < 8; i++) {
// build.push("<option name=\"name_idOptionNum"+queItem.serialNum+"_option\">ABCD</option>");
var tem=new Array();
tem.push("<option name=\"name_idOptionNum");
tem.push(queItem.serialNum);
tem.push("_option\"");
// if (i==0 && queItem.optionNum==0) {
// tem.push(" selected=\"selected\"");
// }else if (i != 0 && queItem.optionNum==i) {
// }
if (queItem.optionNum==i) {
tem.push(" selected=\"selected\"");
}
tem.push(">");
tem.push(arr[i]);
tem.push("</option>");
build.push(tem.join(""));
}
build.push("</select>");
build.push("   ");
build.push("</div>");
build.push("<button onClick=\"delsteQuest(this)\" id=\"delete");
build.push(queItem.serialNum);
build.push("\" class=\"class_btnDelete\">刪除問題</button>");
// build.push("</div>");
build.push("<br>");
build.push("</div>");
var result=build.join("");
return result;
}
/*設(shè)置選項的選中值
serialNum : 問題序號身弊，用于確定select的ID值
optionNum ： 被選中的下標
*/
function setOptionsValue(serialNum,optionNum){
var tem=document.getElementsByName("name_idOptionNum"+serialNum+"_option");
console.log("設(shè)置選項的選中值 serialNum="+serialNum+",optionNum="+optionNum+",Length="+tem.length);
if (tem!=null&&tem.length>0) {
for (var i = 0; i < tem.length; i++) {
if (i==optionNum) {
tem[i].setAttribute("selected","selected");
}
}
}
}
</script>
<style type="text/css">
/*//刪除按鈕的樣式*/
.class_btnDelete{
margin-top:25px;
margin-left:900px;
border:1px red solid;
}
/*//每一道問題外部的樣式*/
.class_questionItem{
margin-left:50px;
margin-bottom: 20px;
border:1px green solid; /* 為標簽添加邊框辟汰，邊框的寬度為1px列敲，綠色，有立體效果*/
}
.class_option{
width: 300px;/* 寬度 */
}
.class_ulOption li{
line-height: 40px;/* 每一行的高度 */ /* */
list-style-type: none;/*取消li標簽前面的小圓點*/
}
</style>
</head>
<body>
<div class="place">
<span>位置：</span>
<ul class="placeul">
<li><a href="#">問卷管理</a></li>
<li><a href="#">問卷生成</a></li>
</ul>
</div>
<div class="formbody">
<div class="formtitle"><span>基本信息</span></div>
<div id="head" style="margin-left:50px;border:1px red solid;">
<br>
<label>問卷名稱：</label>
<input name="questname" class="dfinput" placeholder="請輸入問題名稱帖汞，不錯過25個字符"> </input>
<label>問卷編號：ON.20180105001</label>
<label>操作員：李美玲_10086</label>
</div>
<br>
<hr>
<div id="questionList">
<!-- 第一個問題的開始 -->
<!-- <div id="list0" class="class_questionItem" name="questionItem">
<div>
<label>問題編號：1</label>
<br><br>
<label>問題內(nèi)容：</label>
<input name="questContent" class="class_quentionContent" placeholder="請輸入問題的內(nèi)容"
maxlength="255" size="40" id="questContent0" type="text"
value="測試——問題內(nèi)容——0"> </input>
        
問題類型：
<input type="radio" name="questType0" id="idQuestTypeRadio0" checked="true">單選
<input type="radio" name="questType0" id="idQuestTypeCheckbox0">多選
選項個數(shù)：
<select name="optonsNum" id="idOptionNum0" onChange="optionOnChange(this,null)">
<option name="name_idOptionNum0_option">請選擇</option>
<option name="name_idOptionNum0_option">A</option>
<option name="name_idOptionNum0_option">AB</option>
<option name="name_idOptionNum0_option" selected="selected">ABC</option>
<option name="name_idOptionNum0_option">ABCD</option>
<option name="name_idOptionNum0_option">ABCDE</option>
<option name="name_idOptionNum0_option">ABCDEF</option>
<option name="name_idOptionNum0_option">ABCDEFG</option>
</select>   
</div>
<button onClick="delsteQuest(this)" id="delete0" class="class_btnDelete">刪除問題</button>
<br>
</div> -->
<!-- 第一個問題的結(jié)束 -->
</div>
<dir>
<button onClick="addNextQuest()">添加問題</button>
<input type="submit" name="sub" value="生成問卷" onClick="creatQuest()">
</dir>
</div>
</body>
</html>
我的CSDN博客：http://blog.csdn.net/wo_ha/article/details/79290964
