Chrome即时显示代码效果

  写代码不像写博客,一边写就能一边看到效果,而且代码的容错率极低,哪怕只错了一个字母,整段甚至整篇就有可能全都无法正确运行。正常情况下,程序员们写完代码以后需要通过编译、生成等步骤才能看到效果。在Code Editor中,这个常规被打破了,因此它可以帮助程序员即时显示代码效果。

  在Chrome浏览器中打开Chrome Experiments,并在搜索框中输入“Code Editor”即可找到这个网页应用。


  搜索Code Editor应用

  点击Launch Experiment进入Code Editor,可以看到一段示例代码,以及这段代码所实现的效果:一个滚动的多边球体。


  即时预览代码效果

  代码是可以编辑的,比如我们调整其中的一个参数,就可以将球形变大或缩小,即时生效。


  即时预览修改后的代码效果

  利用这个工具,程序员们在编写代码时就能提高不少效率了。

  Chrome Experiments中目前已经有500多个实例了,而且Google还在不断为其增加更多应用,并鼓励开发者提交他们的JavaScript应用程序,供大家使用和交流。

时间: 2025-01-20 19:21:24

Chrome即时显示代码效果的相关文章

Ajax修改数据即时显示篇实现代码_AJAX相关

我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码. 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

Ajax修改数据即时显示篇实现代码

我们这次要请求的服务端网页是:Edit_Data.Asp 待会我会在本次ajax教程中提供该asp文件的源码. 其实在你学会了怎么使用ajax添加数据时,想实现修改数据对你来说已经很容易了!费话不说先看前端的JavaScript代码和本次的ajax实例效果! 复制代码 代码如下: <html> <head> <title>ajax修改数据</title> <style> body{ font-size:12px; } </style>

jQuery Ajax 异步加载显示等待效果代码分享_jquery

AJAX 全称 Asynchronous JavaScript and XML(异步的 JavaScript 和 XML).它并非一种新的技术,而是以下几种原有技术的结合体. 1) 使用CSS和XHTML来表示. 2) 使用DOM模型来交互和动态显示. 3) 使用XMLHttpRequest来和服务器进行异步通信. 4) 使用javascript来绑定和调用. 通过AJAX异步技术,可以在客户端脚本与web服务器交互数据的过程中使用XMLHttpRequest对象来完成HTTP请求(Reques

javaScript实现可缩放的显示区效果代码_javascript技巧

本文实例讲述了javaScript实现可缩放的显示区效果代码.分享给大家供大家参考,具体如下: 这里演示可缩放的显示区,采用JS代码实现,鼠标按住区域的右下角,出现拖放箭头时,向下或向上拉,就可实现缩放操作,当区域较小时显示滚动条,平时也比较常见的效果,在此将JavaScript代码与大家分享. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-ksf-box-style-demo/ 具体代码如下: <HTML> <HEAD>

Ajax添加数据即时显示信息篇_AJAX相关

今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据.需要说明的是.本次ajax实例教程与前3篇有2点大不同之处. 1:我们要对数据库进行操作.2:更换请求的服务端网页.不再使用Web_ajax.Asp文件.新的请求网页是:Add_Data.Asp.看后缀大家就应该能明白.我在服务端采用的技术是Asp.都说Asp过时了.可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码.我会在该次教程最

Ajax添加数据即时显示信息篇

今天我们要学习的内容是:使用ajax向服务端的数据库添加数据,然后在网页不刷新情况下即时显示被添加的数据.需要说明的是.本次ajax实例教程与前3篇有2点大不同之处. 1:我们要对数据库进行操作.2:更换请求的服务端网页.不再使用Web_ajax.Asp文件.新的请求网页是:Add_Data.Asp.看后缀大家就应该能明白.我在服务端采用的技术是Asp.都说Asp过时了.可他的简单易用,易学深深地吸引着我!当然也你可以使用php, .net,或jsp轻松的模拟该Asp文件的源码.我会在该次教程最

新颖实用的显示图片效果

图片效果|显示 Lightbox--新颖实用的显示图片效果 "Lightbox"是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口.文字表述显然不够明了,所以请先看一下 Lightbox 的演示页面. 如何使用? Lightbox能非常简单地应用到您的页面上.首先将lightbox.js包含到您页面的header部分: <script src="lightbox.js" type="text/javascript&q

Lightbox—新颖实用的显示图片效果

图片效果|显示 Lightbox--新颖实用的显示图片效果 "Lightbox"是一个别致且易用的图片显示效果,它可以使图片直接呈现在当前页面之上而不用转到新的窗口.文字表述显然不够明了,所以请先看一下 Lightbox 的演示页面. 如何使用? Lightbox能非常简单地应用到您的页面上.首先将lightbox.js包含到您页面的header部分: <script src="lightbox.js" type="text/javascript&q

javascript超过容器后显示省略号效果的方法(兼容一行或者多行)_javascript技巧

javascript超过容器后显示省略号效果 在实际的项目中,由于文字内容的长度不确定性和页面布局的固定性,难免会出现文字内容超过div(或其他标签,下同)区域的情况,此时比较好的做法就是当文字超过限定的div宽度后自动以省略号(-)显示,这样,按照习惯,人们都会知道这儿有文字被省略了.css中有个属性叫做text-overflow:ellipsis;比如使用css可以这样写: {width:27em; white-space:nowrap; text-overflow:ellipsis; -o