返回 导航

其他

hangge.com

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

作者：hangge | 2019-12-03 08:10
    在之前的文章中我介绍了一个在线的前端代码编辑工具：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 栏目中添加如下代码：
<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）最终的效果如下，通过上方输入框可以实时筛选下方表格的数据：
评论

全部评论（0）

回到顶部