3款实用的在线JS代码工具(国外)

1. JSFiddle

简介

JSFiddle 是一个在线的代码编辑器，可以用来编辑 HTML/CSS/JavaScript 代码，并且可以立即运行和分享代码。它可以在左侧编辑 HTML/CSS/JavaScript 代码，在中间显示运行结果，在右侧显示 JavaScript 控制台。

使用方法

打开 JSFiddle 的网站 https://jsfiddle.net/
在左侧编辑区输入你的 HTML/CSS/JavaScript 代码
在上方菜单栏中进行相关的操作，如保存、分享、运行代码等
在右边 JavaScript 控制台查看输出日志

示例

下面是一个在 JSFiddle 上运行的简单示例，用于输出 "Hello World!"：

<!DOCTYPE html>
<html>
<head>
    <title>JSFiddle 示例</title>
</head>
<body>
    <script>
    console.log("Hello World!");
    </script>
</body>
</html>

2. CodePen

简介

CodePen 是一个在线的前端开发环境，主要用于展示、试验和分享 HTML/CSS/JS 代码。它具备实时文本编辑，自动生成前缀、代码高亮和整合 CSS、HTML 和 JavaScript 的特色功能。

使用方法

打开 CodePen 的网站 https://codepen.io/
在中心编辑器区域中输入你的代码
点击左侧菜单栏中的 "Run" 按钮，以查看代码运行结果
点击左侧菜单栏中的 "Share" 按钮，用于分享你的代码

示例

下面是在 CodePen 上运行的简单示例，用于实现一个翻转动画：

.flip {
  -webkit-perspective: 800px;
  perspective: 800px;
  position: relative;
  text-align: center;
}
.flip > p {
  background: rgba(0,0,0,0.1);
  color: #fff;
  display: inline-block;
  font-size: 40px;
  font-weight: bold;
  height: 160px;
  line-height: 160px;
  margin: 30px;
  width: 160px;
  -webkit-transition: -webkit-transform .3s ease-in-out;
  transition: transform .3s ease-in-out;
  -webkit-transform-style: preserve-3d;
  transform-style: preserve-3d;
}
.flip:hover > p {
  -webkit-transform: rotateY(180deg);
  transform: rotateY(180deg);
}

<div class="flip">
  <p>Front</p>
  <p>Back</p>
</div>

3. JS Bin

简介

JS Bin 是一个在线的实时代码编辑器，可用于 HTML5、CSS 和 JavaScript 的实时协作和调试。它还可以提供代码版本控制和分支等功能。

使用方法

打开 JS Bin 的网站 https://jsbin.com/
在左侧编辑区域输入 HTML/CSS/JavaScript 代码
在右侧查看预览效果
在下方控制台查看输出日志

示例

下面是一个在 JS Bin 上运行的简单示例，用于实现一个动态画图：

<!DOCTYPE html>
<html>
<head>
    <title>JS Bin 示例</title>
</head>
<body>
    <p>画一个圆形:</p>
    <canvas id="myCanvas" width="400" height="400"></canvas>

    <script>
        var canvas = document.getElementById("myCanvas");
        var context = canvas.getContext("2d");
        context.beginPath();
        context.arc(200, 200, 150, 0, 2 * Math.PI);
        context.fillStyle = "red";
        context.fill();
    </script>
</body>
</html>

以上是对三款在线JS代码工具的简介、使用方法和示例，希望对您有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：3款实用的在线JS代码工具(国外) - Python技术站