當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

easy js test--方便对js进行测试，不需要刷新

發布時間：2023/12/15 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 easy js test--方便对js进行测试，不需要刷新小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

若轉載請注明

依賴jquery

<!DOCTYPE?HTML?PUBLIC?"-//W3C//DTD?HTML?4.01?Transitional//EN"?"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>??
<meta?charset="utf-8">??
<title>用于一次性測試js</title>??
<style>
?textarea{width:400px;height:200px;}?
</style>
<script?src="QUnit/resources/jquery-1.9.1.js"></script>
</head>
<body>

?
?<p>js編輯區</p>
?<textarea?id="js_area">
?</textarea>
?<div>
??<input?type="button"?οnclick="run();"?value="運行"/>
???<input?type="button"?οnclick="clearJs();"?value="清空"/>
???<input?type="button"?οnclick="createAlert();"?value="alert"/>
???<input?type="button"?οnclick="createGetById();"?value="GetById"/>
?</div>
?
?<p>html編輯區</p>
?<textarea?id="html_area">?
?</textarea>
?<div>
???<input?type="button"?οnclick="clearHtml();"?value="清空"/>
???<input?type="button"?οnclick="createDiv();"?value="DIV"/>
???<input?type="button"?οnclick="createSpan();"?value="SPAN"/>
????<input?type="button"?οnclick="createButton();"?value="按鈕"/>
????<input?type="button"?οnclick="createText();"?value="文本框"/>
?????<input?type="button"?οnclick="createSelect();"?value="下拉框"/>
??????<input?type="button"?οnclick="createA();"?value="鏈接"/>
?</div>

?
?<p>結果顯示區</p>
?<div?id="result"></div>

</body>
<script>
??var?run?=?function(){
???//先清空之前的結果
???$("#result").html('');
??var?script?=?$("\<script?type='text/javascript'\>\</script\>");
??script.append($("#js_area").val());
??$("#result").append($("#html_area").val());
??$("#result").append(script);
??}
??var?clearJs?=?function(){
???$("#js_area").val("");
??}
??var?clearHtml?=?function(){
???$("#html_area").val("");
??}

??var?createDiv?=?function(){
????var?content?=?"\<div?id=''\>\</div\>";
????insertAtCursor($("#html_area").get(0),content);
??}

??var?createSpan?=?function(){
????var?content?=?"\<span?id=''\>\</span\>";
????insertAtCursor($("#html_area").get(0),content);
??}
??var?createButton?=?function(){
????var?content?=?"\<input?type='button'?name=''?id=''/\>";
????insertAtCursor($("#html_area").get(0),content);
??}
??var?createText?=?function(){
????var?content?=?"\<input?type='text'?name=''?id=''/\>";
????insertAtCursor($("#html_area").get(0),content);
??}
??var?createSelect?=?function(){
????var?content?=?"\<select?name=''?id=''\>\<option?value=''\>?\<option/\>??\n<select>";
????insertAtCursor($("#html_area").get(0),content);
??}
??var?createA?=?function(){
????var?content?=?"\<a?name=''?id=''?href=''?target=''\>?\</a\>";
????insertAtCursor($("#html_area").get(0),content);
??}
??var?createAlert?=?function(){
????var?content?=?"alert('')";
????insertAtCursor($("#js_area").get(0),content);
??}
??var?createGetById?=?function(){
????var?content?=?"$('#id')";
????insertAtCursor($("#js_area").get(0),content);
??}

??var?insertAtCursor?=?function(obj/*html?object*/,content/*String*/){
???//IE?support
????????if?(document.selection)?
????????{
????????????obj.focus();
????????????var?sel=?document.selection.createRange();
????????????sel.text=?content;
????????????sel.select();
????????//firefox?support
????????}else{
?????????if(typeof?obj.selectionStart?==?'number'){
????????????var?start?=?obj.selectionStart;
????????????var?end?=?obj.selectionEnd;
????????????var?pre?=?obj.value.substr(0,?start);???
???????????var?post?=?obj.value.substr(end);
???????????obj.value?=?pre+?content+post;??
??????????}
????????}
??}
</script>
</html>?

轉載于:https://blog.51cto.com/leopold/1251489

總結

以上是生活随笔為你收集整理的easy js test--方便对js进行测试，不需要刷新的全部內容，希望文章能夠幫你解決所遇到的問題。

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