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)最终的效果如下,通过上方输入框可以实时筛选下方表格的数据:
html在线编辑器代码运行,JSRun - 在线JS、HTML编辑器(同时也支持各种后台代码的编辑运行)...相关推荐
- 代码改变世界_改变世界,一次只写一行代码
代码改变世界 People like to look at changing the world as a big task. I believe changing the world can be ...
- 解决Button设置disabled后无法执行后台代码问题
一.开始调式下面的程序,发现Button在js中设置disabled后无法执行后台代码(btnsave_Click)问题 <asp:Button ID="btnsave" r ...
- linux项目运行日志查看,Linux项目部署、后台启动和终止运行及查看日志信息_MQ...
Linux项目部署.后台启动和终止运行及查看日志信息_MQ Linux项目部署.后台启动和终止运行及查看日志信息_MQ Linux项目部署.后台启动和终止运行及查看日志信息_MQ [var1] (1) ...
- 综合各代码在线运行 jsrun
综合各代码在线运行 jsrun.net 支持30多种语言在在线运行, 大家试一试 PHP在线运行 http://php.jsrun.net Python在线运行 Python3在线运行 http: ...
- 【博客大赛】100行js代码实现网站在线用户数量统计 nodejs + socket.io方案
需求提出 公司的在线培训平台,需要增加一个新功能:实时统计当前在线的用户数量并在终端界面上显示,需要的时候可以查询当前在线的用户的明细. 有3种技术方案可以选用: 1)改动后台代码,在用户登录和退出时 ...
- 自己做在线HTML编辑器,#6 从零开始制作在线 代码编辑器
复制 与 剪切 与 粘贴 能获得选区内容后,就可以做进一步的操作啦. 剪切的话,实现原理同复制,只不过需要附加一个删除操作而已,所以先不管他. 监听事件 在浏览器中可以使用以下监听器来捕获到事件: o ...
- java在线编辑器_微软开源在线代码编辑器——Monaco Editor
介绍 Monaco Editor是为VS Code提供支持的代码编辑器,运行在浏览器环境中.编辑器提供代码提示,智能建议等功能.供开发人员远程更方便的编写代码.移动浏览器或移动Web框架不支持Mona ...
- php在线编辑器_8款功能强大的Java编辑器,建议收藏!「渡一教育」
作为一名合格的程序员,每天打交道最多的除了手机,恐怕就是编辑器了,需要花费大量的时间投身于代码的海洋中,使用各种不同的IDE来开发代码. 对于程序员们来说,一款好用的编辑器,需要像自己的左右手一样.一 ...
- 在线文档技术揭秘开篇 - 富文本编辑器
前言 本文旨在向大家介绍在线文档的核心模块富文本编辑器技术,并介绍业内主流商业文档产品如何进行富文本编辑器技术选型. 富文本编辑器 富文本编辑器,Rich Text Editor, 简称 RTE, 是 ...
最新文章
- 开启一个新的终端并执行特定的命令
- php之类,对象(四)加载类及练习题
- 花了我一天一夜整理出的软件测试学习路线
- 去邵程程博客,得到很有喜感图片一张
- Oracle 安装报错 [INS-06101] IP address of localhost could not be determined 解决方法
- Notepad++技巧
- qt 分割字符串的两种方法
- 2018--20179215--《文献管理与信息分析》第三讲 英文数据库资源的发展趋势和利用...
- 开源软件和自由软件_自由和开源软件的经济学
- 最好用的虚拟机软件----VMware详细图文教程
- mysql debug版本_MySQL各个版本区别
- Java 习题 (12)
- 蜂巢的艺术与技术价值 - PostgreSQL PostGIS's hex-grid
- 有感电机霍尔故障检测及修复
- 瞎姬霸写之畅想互联网
- windows网站操作系统管理【1】
- 技术总监是干什么的?
- ARI聚类效果评价指标
- Google账户_GooglePlay_关联
- Sqlite3中对于毫秒数和本地时间之间的转换以及时间相关操作