html在线编辑器代码运行,JSRun - 在线JS、HTML编辑器（同时也支持各种后台代码的编辑运行）...

在之前的文章中我介绍了一个在线的前端代码编辑工具：CodePan(点击查看)，方便我们编写制作测试页面、代码调试，而免去搭建相关环境的麻烦。

但 CodePan 毕竟是国外的网站，有时使用起来并不是那么顺畅。下面接着介绍一个国内同样类型的网站：JSRun。

一、JSRun 介绍

(1)JSRun 是一款 HTML/CSS/Javascript 在线代码编辑、运行工具。支持手机端、支持vue.js/angular.js 的在线编辑、支持 ES6 开发 babel。

(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 栏目中添加如下代码：

随机颜色

(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 栏目中添加如下代码：

重置

:data="getTableData"

:border="true"

:stripe="true"

style="width: 100%">

prop="date"

label="日期"

width="180">

prop="name"

label="姓名"

width="180">

prop="address"

label="地址">

(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)最终的效果如下，通过上方输入框可以实时筛选下方表格的数据：