JSRun - 在线JS、HTML编辑器（同时也支持各种后台代码的编辑运行）
在之前的文章中我介绍了一个在线的前端代码编辑工具：CodePan（点击查看），方便我们编写制作测试页面、代码调试，而免去搭建相关环境的麻烦。
但 CodePan 毕竟是国外的网站，有时使用起来并不是那么顺畅。下面接着介绍一个国内同样类型的网站：JSRun。
一、JSRun 介绍
（1）JSRun 是一款 HTML/CSS/Javascript 在线代码编辑、运行工具。支持手机端、支持 vue.js/angular.js 的在线编辑、支持 ES6 开发 babel。
- 官网地址：http://jsrun.pro/
（2）JSRun 除了可以进行前端代码编辑外，还支持许多后台代码的在线运行，比如：PHP、Java、Python、Shell、Node.js 等等。
二、使用样例1：JQuery + Font Awesome
（1）首先访问 JSRun 网站，并注册登录。点击“创建代码”开始编辑。
（2）点击“添加资源引用”按钮。
（3）由于 JSRun 已经提供了许多常用的库，比如 JQuery，我们直接点击引入即可。
（4）对于其它没有列出来的库，比如 Font Awesome。我们可以手动添加网络资源（或者搜索、甚至直接上传）：
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.2/css/all.min.css
（5）引入完毕后显示结果如下：
（6）接着我们在 HTML 栏目中添加如下代码：
<button id="changeColor">随机颜色</button> <i id="fa1" class="fa fa-camera-retro fa-3x"></i>
（7）在 JS 栏目中添加如下代码：
$(document).ready(function(){
// 随机颜色按钮点击
$("#changeColor").click(function(){
var r = Math.floor(Math.random()*256);
var g = Math.floor(Math.random()*256);
var b = Math.floor(Math.random()*256);
var color = '#'+r.toString(16)+g.toString(16)+b.toString(16);
$("#fa1").css("color", color);
});
});
（8）最终的效果如下，点击按钮可以改变右侧图标的颜色：
三、使用样例2：Vue.js + Element UI
（1）同样地，我们首先引入 Vue.js 和 Element UI 相关资源。Vue.js 直接选择版本引入即可，Element UI 通过手动指定 js 和 css 的 url 地址来引入：https://unpkg.com/element-ui/lib/index.js https://unpkg.com/element-ui/lib/theme-chalk/index.css
（2）接着我们在 HTML 栏目中添加如下代码：
<div id="app">
<div class="search-wrapper">
<el-input id="searchInput" placeholder="根据姓名筛选..." v-model="filter"></el-input>
<el-button type="primary" @click="reset">重置</el-button>
</div>
<el-table
:data="getTableData"
:border="true"
:stripe="true"
style="width: 100%">
<el-table-column
prop="date"
label="日期"
width="180">
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
</el-table-column>
<el-table-column
prop="address"
label="地址">
</el-table-column>
</el-table>
</div>
（3）在 CSS 栏目中添加如下代码：
.search-wrapper {
margin-bottom: 10px;
display: flex;
}
.search-wrapper .el-input {
flex:1;
margin-right:10px;
}
（4）在 JS 栏目中添加如下代码：
new Vue({
el: '#app',
data() {
return {
filter: '',
tableData: [{
date: '2016-05-02',
name: 'hangge',
address: '上海市普陀区金沙江路 1518 弄'
}, {
date: '2016-05-04',
name: '王小虎',
address: '上海市普陀区金沙江路 1517 弄'
}, {
date: '2016-05-01',
name: '李小龙',
address: '上海市普陀区金沙江路 1519 弄'
}]
}
},
computed: {
getTableData() {
var tableData = this.tableData.filter((item) => {
return item.name.toLowerCase().includes(this.filter.toLowerCase());
});
return tableData;
}
},
methods: {
reset() {
this.filter = "";
}
},
mounted: function () {
}
})
（5）最终的效果如下，通过上方输入框可以实时筛选下方表格的数据：
