當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

项目中的Html和JS使用的随便总结

發布時間：2023/12/20 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了项目中的Html和JS使用的随便总结小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

我的簡書：https://www.jianshu.com/u/c91e642c4d90
我的CSDN：http://blog.csdn.net/wo_ha
我的GitHub：https://github.com/chuanqiLjp
轉載請注明出處：http://blog.csdn.net/wo_ha/article/details/79290964

序言：

由于這段時間公司有個項目需要做一個問卷調查的在線生成，大概需求：可以在線添加問題、刪除問題、最后生成問卷，大概的界面是：

公司的web工程師這段時間由比較忙，自己剛好處于學習H5階段，于是就順手魯一個了，先來看一下效果圖吧！

我先總結一下這個項目中使用到的知識點，然后有興趣的同學可以看下我的源代碼是怎么實現的（還好沒有涉及到公司的利益可以分享出來）

1、日志打印

console.log("向控制臺輸出日志"); alert("彈出警告框"); confirm("確認消息內容"); // 確認框，返回布爾值

2、JS中變量的定義

var listQue=new Array()；// 定義一個數組列表 var queItem={};//定義一個對象 var arr=["ABC","EFG" ];//定義一個數組并初始化

3、數組列表的操作

var listQue=new Array()；// 定義一個數組列表 var length=listQue.length;//獲取到列表中的長度 var item=listQue[10];//獲取下標為10的元素 listQue.push(queItem);//添加一個元素到列表中 listQue.splice(index,deleteLength);//刪除列表中的元素，index：刪除開始的下標，deleteLength：刪除元素的個數 listQue.splice(0,listQue.length);//清空數組列表 var str = listQue.join("");//轉換為字符串 var jsonStr=JSON.stringify(listQue);//將字符串轉換為JSON字符串

4、字符串的操作

str.substring(start,end);//截取字符串并返回新的字符串，重載方法：str.substring(start);

5、標簽元素的操作

element.getAttribute("屬性名")；//獲取指定屬性名的屬性值 element.id;//獲取標簽的ID值 element.checked;//獲取標簽是否被選中，true被選中，type="radio"的input標簽 element.setAttribute("屬性名","屬性值");//為指定屬性設置屬性值element.parentNode.removeChild(element); // 讓 “要刪除的元素” 的 “父元素” 刪除 “要刪除的元素” element.insertAdjacentHTML(swhere,stext);//swhere:指定插入html標簽語句的地方，有四種值可以用：beforeBegin:插入到標簽開始前，afterBegin:插入到標簽開始標記后，beforeEnd:插入到標簽結束標記前，afterEnd:插入到標簽結束標記后； stext:要插入的HTML內容 element.insertAdjacentText(swhere,stext);//與insertAdjacentHTML方法類似，只不過只能插入純文本，參數相同 document.getElementsByName("name值");//根據name屬性的值獲取到一個標簽列表 document.getElementById("ID值");//根據標簽的id找到此標簽 document.getElementsByTagName("標簽名");//根據標簽名稱找到一個標簽列表

6、頁面的初始化

方法一：在標簽上靜態綁定onload事件，<body onload="aaa()">等待body加載完成，就會執行aaa()方法。方法二：使用window.onload = function(){ console.log("頁面加載完成后執行此方法，可以進行數據的填充，執行頁面的初始化操作");} 等到整個window加載（頁面加載完成）完成執行方法體,可以進行數據的填充。比方法一先執行

7、單選框

依靠name判斷是否為一組的，type取值可以為radio（單選）、checkbox（多選），checked屬性的值為true表示默認選中

問題類型： <input type="radio" name="questType0" id="idQuestTypeRadio0" checked="true">單選 <input type="radio" name="questType0" id="idQuestTypeCheckbox0">多選

8、下拉選擇

選項改變會調用屬性為onChange的方法，標簽option的屬性selected=”selected”表示默認被選中，JS中var optionValue=select.options[select.options.selectedIndex].value//獲取已選的值，

選項個數：<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中獲取輸入框中的內容
placeholder屬性：輸入框提示內容；
value屬性：輸入框默認的值
maxlength屬性：最長的輸入長度
type屬性：輸入的類型，常見的有：

button 定義可點擊按鈕（多數情況下，用于通過 JavaScript 啟動腳本）。 checkbox 定義復選框。 file 定義輸入字段和 "瀏覽"按鈕，供文件上傳。 hidden 定義隱藏的輸入字段。 image 定義圖像形式的提交按鈕。 password 定義密碼字段。該字段中的字符被掩碼。 radio 定義單選按鈕。 reset 定義重置按鈕。重置按鈕會清除表單中的所有數據。 submit 定義提交按鈕。提交按鈕會把表單數據發送到服務器。 text 定義單行的輸入字段，用戶可在其中輸入文本。默認寬度為 20 個字符。 <input id="idOptionNum0_0" class="class_option" placeholder="輸入框提示內容" maxlength="30" type="text" name="name_idOptionNum0_input" type="text" value="輸入框默認值"> </input>

10、內部樣式

11、Google Chrome調試JavaScript

12、CSS （Cascading Style Sheets ：層疊樣式表）CSS選擇器

選擇器優先級：ID選擇器>類選擇器>標簽選擇器，當選擇器優先級相同的情況下，采用“就近原則”(最后一次出現的選擇器)

1.標簽選擇器標簽名{屬性名1:屬性值1;屬性名2:屬性值2;...}2.類選擇器(class選擇器).類名{屬性名1:屬性值1;屬性名2:屬性值2;...}3.ID選擇器#ID名{屬性名1:屬性值1;屬性名2:屬性值2;...}

13、JavaScript函數的聲明

function 函數名(xx,xx){// 函數體代碼}

14、其他操作

var intValue = parseInt("123");//將字符串轉換為一個整數  ：空格； emsp;：一個字符的空格

項目的源代碼

代碼中都有詳盡的注釋，就不講解了，放在這里大家參考下吧，有什么好的意見建議都可以留言指出來

<!DOCTYPE html> <html> <head><title>生成問卷調查的模版</title><script type="text/javascript">var listQue=new Array();//字段：serialNum（題號-1）、content（問題內容）、type（選項類型，ture：單選）、optionNum（選項個數）、options（答案的數組）var lastQuestItemID="questionList";//插入問題的最后一次目標問題ID/*頁面的初始化方法一：在標簽上靜態綁定onload事件，<body onload="aaa()">等待body加載完成，就會執行aaa()方法。方法二：使用window.onload = function(){} 等到整個window加載（頁面加載完成）完成執行方法體,可以進行數據的填充。比方法一先執行*/window.onload=function (){console.log("頁面加載完成后執行此方法，可以進行數據的填充，執行頁面的初始化操作");for (var i = 0; i < 10; i++) {var queItem={};queItem.serialNum=i;queItem.content="測試——問題內容——"+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);}}//點擊添加問題按鈕的時候會調用,用于添加單個問題function addNextQuest(){// alert("添加問題");console.log("添加問題");//創建一個問題對象，并初始化var queItem={};queItem.serialNum=listQue.length;//題號queItem.content="問題內容——>初始值";//問題內容queItem.type=true;//選項類型，ture：單選queItem.optionNum=0;//選項個數queItem.options=[];//答案的數組queItem.optionNum=queItem.options.length;//選項個數listQue.push(queItem);//添加到問卷的列表var insertHtml=generateHtmlForQuestionItem(queItem);insertHTML(lastQuestItemID,insertHtml,"afterEnd");lastQuestItemID="list"+(queItem.serialNum);console.log(queItem);}//每道題的選項個數發生變化的時候會調用function optionOnChange(select,options){//獲取已選的值： this.options[this.options.selectedIndex].valuevar 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");}//idOptionNum0var insertHtml= generateHtmlForQuestionOption(selectID,optionNum,options);console.log(selectID.substring(11));insertHTML("delete"+selectID.substring(11),insertHtml,"afterEnd");}/*刪除一道與該刪除按鈕同一級的問題btnDelete ：按鈕的對象*/function delsteQuest(btnDelete){// alert("刪除問題");deletevar 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");// idOptionNum0var 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數組中值會隨著刪除而減小，所以此處無須對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);}/*獲取所有問題輸入的數據，得到一個集合，字段：serialNum（題號-1）、content（問題內容）、type（選項類型，ture：單選）、optionNum（選項個數）、options（答案的數組）*/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;//問題內容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_inputqueItem.optionNum=0;//選項個數queItem.options=[];//答案的數組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;//選項個數}console.log(queItem);queItemInputList.push(queItem);//添加到問卷的列表}}return queItemInputList;}/** 在目標元素后面插入一段新的HTML并重新渲染targetElementId : 在目標元素ID插入HTML代碼insertHtml : 插入的HTML代碼insertType : 插入的類型，beforeBegin:插入到標簽開始前；afterBegin:插入到標簽開始標記后；beforeEnd:插入到標簽結束標記前；afterEnd:插入到標簽結束標記后*/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方法類似，只不過只能插入純文本，參數相同// 原型：insertAdjacentHTML(swhere,stext)// 參數： swhere:指定插入html標簽語句的地方，有四種值可以用：// 1.beforeBegin:插入到標簽開始前// 2.afterBegin:插入到標簽開始標記后// 3.beforeEnd:插入到標簽結束標記前// 4.afterEnd:插入到標簽結束標記后// stext:要插入的內容}/*刪除指定ID的網頁片段htmlID ：片段的ID*/function deleteHtml(htmlID){console.log("刪除指定ID的網頁片段,htmlID="+htmlID);var element=document.getElementById(htmlID); // 按 id 獲取要刪除的元素if (element!=null) {element.parentNode.removeChild(element); // 讓 “要刪除的元素” 的 “父元素” 刪除 “要刪除的元素”}}/*生成一道問題的選項的HTML代碼片段selectID ： select的IDoptionNum ：選項的個數*/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]+"的內容");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;}//根據指定的問題Item生成一段問題的網頁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>問題內容：</label>  ");build.push("<input name=\"questContent\" class=\"class_quentionContent\" placeholder=\"請輸入問題的內容\" maxlength=\"255\" size=\"40\" id=\"questContent"+queItem.serialNum+"\" type=\"text\" value=\""+queItem.content+"\"> </input>");build.push("&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;")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(" 選項個數：<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(" &emsp;&emsp;");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;}/*設置選項的選中值serialNum : 問題序號，用于確定select的ID值optionNum ：被選中的下標*/function setOptionsValue(serialNum,optionNum){var tem=document.getElementsByName("name_idOptionNum"+serialNum+"_option");console.log("設置選項的選中值 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><dir><button onClick="addNextQuest()">添加問題</button><input type="submit" name="sub" value="生成問卷" onClick="creatQuest()"></dir> </div> </body> </html>

總結

以上是生活随笔為你收集整理的项目中的Html和JS使用的随便总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。