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>
<!-- js编辑区-->
<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>
<!-- html编辑区-->
<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进行测试，不需要刷新相关推荐
- vue调用顺序(初学版) index.html → main.js → app.vue → index.js → components/组件 测试
关于它是怎么调用运作的:https://mp.csdn.net/postedit/86134414 一. 准备工作: 1.下载webstorm,安装vue. 2.创建项目,cd到要放项目的文件夹下 v ...
- Node.js 单元测试：我要写测试 - Mocha - Nodejs开源项目里怎么样写测试、CI和代码测试覆盖率
-------------------------------------- 单元测试Express/NodeJs 个人理解, 1,如果不是测试http请求的单元测试,用Mocha, Chai等基本够 ...
- webpack打开项目命令_配置webpack中dev.env.js、prod.env.js，解决不同命令下项目启动和打包到指定的环境...
前后端分离的项目开发中,我们有开发环境.测试环境.预生产环境和生产环境. 1.开发环境下调试接口的时候,一般都会有好几个接口地址(开发服务器上的,本地的,接口开发人员的,七七八八的接口地址),要根据情 ...
- JS文件中加载jquery.js(JS文件添加其他JS文件)
最近有一个需求: 1.在一个html中只能引入一个JS文件 不能有JS代码和其他JS文件的引入 2.这个JS文件中 还要引入其他的JS文件 3.所有JS功能都写在这个JS文件中 这些代码用到了jque ...
- js 拉勾网效果_Node.js 中实践基于 Redis 的分布式锁实现
在一些分布式环境下.多线程并发编程中,如果对同一资源进行读写操作,避免不了的一个就是资源竞争问题,通过引入分布式锁这一概念,可以解决数据一致性问题. 作者简介:五月君,Nodejs Developer ...
- node JS獲取GPS_Node.js 14 正式发布：V8 引擎升级，新增异步本地存储 API
Node.js 14 版本于近日正式发布, 此版本包含的亮点如下: 对诊断功能的改进 升级 v8 引擎 新增实验性的异步本地存储 API 强化流 API 移除实验性模块中的警告 移除一部分早期版本中废 ...
- [js] 说说你对js对象生命周期的理解
[js] 说说你对js对象生命周期的理解 一切皆对象 咱们经常听到JS中"一切皆对象"?有没有问想过这是什么意思?其它语言也有"一切皆对象"之说,如Python ...
- 客户端的js js脚本的引入 js的解析过程
web浏览器中的JavaScript web浏览器中的js通常称为客户端的JavaScript 客户端 JavaScript window对象是所有客户端JavaScript特性和api的主要接入点. ...
- day03_js学习笔记_03_js的事件、js的BOM、js的DOM
day03_js学习笔记_03_js的事件.js的BOM.js的DOM ================================================================ ...
最新文章
- python中的装饰器有哪些-python中的装饰器
- nyoj 776 删除元素
- mina 粘包、多包和少包的解决方法
- 移植驱动完毕后加载时的version magic报错原因以及解决办法
- go 列出已经安装的包_Go 安装教程
- Day05-循环和列表字符串、元组和字典
- 详解数据中心灾备切换技术
- C语言线程创建与锁机制
- ac自动机 匹配最长前缀_【HDU】5069 Harry And Biological Teacher AC自动机fail指针建树dfs...
- 名词解释——元数据和数据字典
- 多个项目共用同一个redis_浅谈Redis分布式锁(上)
- Foxmail是否可以隐藏文件夹？【网易企业邮箱申请】
- 联想电脑尺寸在哪里看_图文教你如何查看thinkpad的型号_查看thinkpad型号的方法－系统城...
- 谷歌浏览器如何安装插件
- (SOJ) check if a word is on a given Boggle board
- 会员权益营销中，等级会员的五种权益设置
- 物理竞赛可以使用计算机,成都男孩痴迷物理 保送清华最牛计算机专业实验班...
- “FCK编辑器”版本识别及信息收集技术
- android2.5纬数字地图,步行者地图安卓版下载
- java steam 去重_List去重的5种方式