代码演示神器——jsfiddle
目录:
1. 介绍
2. jsfiddle的具体使用
3. 总结
1. 介绍
很多时候,我们需要在我们写的文章或博客中,即时显示出我们写的demo,能方便的解释出我们的思路。很久之前我也写过一篇文章,说的是如果利用博客园自己的资源来创建一个demo,只不过这样做的一个坏处是,文章列表中会产生很多的demo标题,而那些文章只是我们在其他文章中引用而已,没必要有个标题专门显示出来。
前几天无意间发现了jsfiddle,看到的第一感觉就是:哇,这么牛X,给你32个赞!不过我也是刚开始用这个,还有很多的功能没有发掘出来,有什么不对的地方,望指正!
jsfiddle的官网:http://jsfiddle.net/
2. jsfiddle的具体使用
进入官网后,我们看到的是这样的界面:
界面主要是分为了三部分:
左侧:添加一些必要的链接或者其他的一些什么东西。比如我们写js时需要用到jquery,那么我们就把http://code.jquery.com/jquery-1.8.0.min.js这个链接引入,就能在js这个编辑框里写jquery代码了。当然引入其他的文件应该也是可以的。
上侧:没标出来的那两个按钮我目前还不知道怎么使用。
运行:当把所有的代码完成后,点击“运行按钮”,就能在"result"框里看到运行的结果;
保存:运行之后没什么问题了,就可以保存了,网页就会跳转到一个新的页面,url地址就是你这个项目的地址,复制出来直接使用就行了,而且我们还看到了share按钮:
share按钮的下拉表里提供了三种选择:项目的url链接地址,项目的全屏展示地址,iframe框架的代码。我们可以根据自己的需要,复制我们需要的地址。
代码格式化:能够将我们写的代码按比较正规的方式进行呈现。
纠错:当我们点击运行按钮没反应时,我们可以用这个代码进行适当的纠错。不过感觉这个的纠错不是完全的可信,有时候不准。做好的方案就是:自己先把代码写完运行没问题了,再粘贴过来。
还有就是,我们可以展示我们需要的代码,就按“项目的全屏展示地址”为例,它默认展示的只是result模块,我们如果想展示html和js,可以这样写:http://jsfiddle.net/bingbing/J965R/embedded/result,html,js/。
而且模块展示的顺序就是我们在url中写的顺序,我们把result写在了第一个,那么默认展示的就是result;如果我们把js写在第一个,那么默认展示的就是js。当然了,大部分的情况默认展示的应该都是result。
需要注意的是:当我们在博客园的文章源码里插入“iframe的框架代码”时,不能直接这样写<iframe width="100%" height="300" src="http://jsfiddle.net/bingbing/J965R/embedded/result,html,js,css" allowfullscreen="allowfullscreen" frameborder="0"></iframe>,而是应该把src里的逗号换成%2C:http://jsfiddle.net/bingbing/J965R/embedded/result%2Chtml%2Cjs%2Ccss
这里插入一个代码演示的demo,点击div,能够随机变换背景颜色。
3. 总结
也没什么好总结的,希望能够发掘出jsfiddle更多的功能。
转载于:https://www.cnblogs.com/xumengxuan/p/3566328.html
代码演示神器——jsfiddle相关推荐
- vue如何生成公钥私钥_百行Python代码演示1私钥生成多公链公钥原理。|区块链财富指北私钥篇(2)...
<区块链财富指北>系列文章由NOCY.COM策划,肖南飞主笔撰写. 技术选型基于BOScore公链,旨在以有趣易懂的方式传播普及区块链技术,不构成任何投资建议! 学习之前说学习 今天这篇文 ...
- 02《区块链财富指北》私钥篇(2):百行Python代码演示一私钥生成多公链公钥原理。
私钥(2):百行Python代码演示一私钥生成多公链公钥原理. <区块链财富指北>系列文章由NOCY.COM策划,肖南飞主笔撰写. 技术选型基于BOScore公链,旨在以有趣易懂的方式传播 ...
- 代码太多不要怕,分享一个阅读代码的神器
大家好,我是程序员小哈. 又到了知识分享时间,今天我给大家分享一个阅读代码的神器,如果对你有所帮助的话,还请文末点赞支持一下哈. 今天给大家介绍一个查看代码的编辑器软件:Source Insight, ...
- Boostnote+坚果云:程序员的^表白^代码管理神器
Boostnote+坚果云:程序员的^表白^代码管理神器 作者:痴澳超 Boostnote+坚果云:程序员的^表白^代码管理神器 1. 更改语言选项 2. 配置坚果云同步 3. 新建笔记分组 4. 新 ...
- OpenCV卡尔曼滤波介绍与代码演示
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 卡尔曼滤波原理 卡尔曼滤波最早可以追溯到Wiener滤波,不同的是 ...
- YOLOv5在最新OpenVINO 2021R02版本的部署与代码演示详解
点击上方"小白学视觉",选择加"星标"或"置顶" 重磅干货,第一时间送达 本文转载自:OpenCV学堂 YOLOv5在OpenVINO上的部 ...
- C语言工程代码查看神器 SourceInsight
C语言工程代码查看神器 SourceInsight 安装 默认安装即可 链接:https://pan.baidu.com/s/14CD9RK3yXJ7e43Lf3hxe4A 提取码:12lw 安装完毕 ...
- OpneCV3特征提取及匹配SURF算法(一)——SURF概述与代码演示
前言 1.在目标检测.识别,匹配的应用中,特征点的提取是不可缺少的部分的步骤,在之前博文我演示了HOG特性提取与使用HOG与SVM训练自己的样本进行行人检测. 2.我的编程环境是Windows 7 6 ...
- 【图像处理】图像内插“最近邻插值 最近邻内插法(Nearest Neighbour Interpolate)”代码演示(调整图像大小、放大、缩小)
文章目录 何为内插--最近邻插值,引用自<数字图像处理--第三版> 代码演示 1.设置缩放倍数来放大.缩小图像 2.设置图片最终分辨率来放大.缩小图像 代码中使用的源图 20200625 ...
最新文章
- 细说angular Form addControl方法
- 为AD用户启用或禁用OCS 2007 R2帐户
- VS Code Remote,在服务器上开发程序,开启全新开发模式
- 解决Eclipse中文乱码的方法
- poj 3660(Floyd求传递闭包)
- 关于水晶报表的一些错误
- 深度学习pytorch--线性回归(一)
- Spring源码解析-实例化bean对象
- (3)散列函数设计:直接定址法
- [洛谷P4234]最小差值生成树
- pageoffice 骑缝章_Java 集成PageOffice自带印章配置连接MySQL
- mysql 判断指定条件数据存不存在,不存在则插入
- dio设置自定义post请求_Flutter用dio封装http网络请求,设置统一的请求地址、headers及处理返回内容...
- 趣谈网络协议——HTTPS协议
- 自己动手编写一个VS插件(一)
- 设计测测试用例的五大方法
- vue邮箱验证正则表达式错误:Unterminated regular expression
- 奶块最新服务器叫什么,奶块全部服务器 | 手游网游页游攻略大全
- Android编译命令m、mm、mmm区别及工程搭建示例
- 数学中的术语与常用表达