前端demo工具网站

最近准备好好写博客了,写一系列前端的博客,总结下最近所学。

前端的东西总体来说是比较肤浅的,只是多而繁杂,如果后端的理论能勉强称得上是科学,前端只能说是技术,技巧,没有多少深层次的思维。这样的技巧需要很多即视的例子,看看就成,所以找了几个在线demo的例子,注册使用搞了一上午。

1.Codepen

这个网站我个人比较喜欢,比较简洁友好。我做了一个例子试下效果:

它的编辑页面如下:

做好例子之后,只要点击Share,选择Embed,点击当中的iframe生成iframe代码,拷贝下来放到自己的代码中就ok了。(ps:编写例子的时候可以通过setting方便加载js的库框架等等,流行的基本都有:jquery,argular,backbone,zepto...)

2.jsbin

这个随便看了下,跟上面的差不多。

3.runJS

大家都知道的原因,国外的网站因为墙的过滤规则执行浪费时间,所以建联会慢一些。。。。来来来,这是国内的一个相同功能的网站。这货的交互还是可以的,UI上感觉不好,但是使用感觉很方便,可能是功能少了,没有很多交互分支的原因吧。

时间: 2024-11-10 14:30:04

前端demo工具网站的相关文章

前端实用工具网站

css压缩 <a href="http://tool.lu/css/">css压缩网址</a> <a href="http://tool.lu/js/">js梅花压缩网址</a>

对网站前端开发工具和浏览器的介绍

Web 前端开发工具 1.NotePad ① 占用内存小,微软自带,免安装. ② 不方便编辑代码,一次只能打开一个文件. ③ 不可扩展插件,写代码效率低. ④ 对于代码缩进不太友好. ⑤ 通常来说支持基本的纯文字编辑工作.格式不是很好控制. 2.EditPlus ① 小巧但功能强大,占用内存小. ② 颜色标记智能代码提示以及高亮显示. ③ 同时编辑多个文件 ④ 可支持各类丰富的插件. ⑤ 支持代码高亮显示,并且支持多种语言. ⑥ NotePad开源且跨平台. ⑦ 方便编辑代码.可以同时编辑多个文

前端开发工具集合

收集的一些轻量级非常实用的前端开发小工具: CSS3相关 CSS3样式生成器:http://www.css88.com/tool/css3Preview/ CSS3渐变样式生成器,类似Photoshop中的渐变界面:http://www.colorzilla.com/gradient-editor/ CSS3动画制作工具Sencha Animator:http://www.sencha.com/products/animator/ 背景色alpha透明工具:http://www.linxz.de

Brackets - 强大免费的开源跨平台Web前端开发工具IDE (HTML/CSS/Javascript代码编辑器)

Brackets 是一个免费.开源且跨平台的 HTML/CSS/JavaScript 前端 WEB 集成开发环境 (IDE工具).该项目由 Adobe 创建和维护,根据MIT许可证发布,支持 Windows.Linux 以及 OS X 平台. Brackets 的特点是简约.优雅.快捷!它没有很多的视图或者面板,也没太多花哨的功能,它的核心目标是减少在开发过程中那些效率低下的重复性工作,例如浏览器刷新,修改元素的样式,搜索功能等等.和 Sublime Text.Everedit 等通用代码编辑器

前端自动化工具 grunt 插件的简单使用(一)

Grunt 的简介: Grunt 是一套前端自动化工具,是一个基于 node.js 的命令行工具,它一般用于: 1.压缩文件: 2.合并文件: 3.简单的语法检测: 4.监听文件变动: 5.less 编译: PS:Grunt 官网 (https://gruntjs.com/).Grunt  就像是一个工具箱,拥有非常丰富的任务插件,可以帮助开发人员实现各种各样目标任务的构建.在Grunt工具箱中,按目标任务类型我们可以分为: 1.编译文档型:比如编译 LESS.Sass.Stylus.Coffe

前端构建工具gulpjs

gulpjs是一个前端构建工具,与gruntjs相比,gulpjs无需写一大堆繁杂的配置参数,API也非常简单,学习起来很容易,而且gulpjs使用的是nodejs中stream来读取和操作数据,其速度更快. 1.安装 首先确保你已经正确安装了nodejs环境.然后以全局方式安装gulp: npm install -g gulp 全局安装gulp后,还需要在每个要使用gulp的项目中都单独安装一次.把目录切换到你的项目文件夹中,然后在命令行中执行: npm install gulp 如果想在安装

高效前端优化工具--Fiddler入门教程

简介: Fiddler是用C#编写的一个免费的HTTP/HTTPS网络调试器.Fiddler是以代理服务器的方式,监听系统的网络数据流动英语中Fiddler是小提琴的意思,Fiddler Web Debugger就像小提琴一样,可以让前端开发变得更加优雅. 它可以做什么? Fiddler是以代理服务器的方式,监听系统的网络数据流动,并在ie, 火狐下都可以安装哦(这个是最好的特点 呵呵) 它能 够记录所有的你电脑和互联网之间的http通讯,Fiddler 可以也可以让你检查所有的http通讯,设

sublime+emmet前端开发工具

Sublime简直神一样的存在! 逗的了python,耍的了json,玩得起HTML,撩的了CSS.反正目前能用到几种代码的都能用它编辑. 上手容易,界面清晰,简洁方便,可扩展性强.eclipse,dw什么的启动起来实在慢.而且黑色背景很炫酷.还有各种惊喜随时等你去发现. 恩,说正事,今天开始接触D3.js,本来打算安装myeclipse+tomcat的(用不习惯DW这种半自动的前端开发工具,没开发过很复杂的网站,所以都是前端后台都在eclipse上做,虽然前端大部分都是找模板修改一下),突然意

便捷的前端开发工具

便捷的前端开发工具 说到工具?那是可是不得了的东西,它是人类文明进步的基石.人类,从石器时代发展到现代社会,也是工具,从石具到现代高科技的演变过程史!当然啦!我们现在互联网时代,前端开发,也是离不开工具的.使用工具是为了创造更好的工具,为了更高的效率.那作为前端爱好者或前端开发者们,你们知道哪些前端开发工具吗?享受了它们的便捷了吗?今天,我就给大家介绍几个开发者工具吧! CSS检查工具-CKStyle 之前的几篇文章给大家介绍有关CSS有关的知识点,想必有不少人已经遇到过有关CSS压缩或检查的问