返回 导航

其他

hangge.com

CodePen - 一个在线的前端代码编辑工具(可用于制作测试页面、代码调试)

作者:hangge | 2019-12-02 08:10
    有时我们需要调试一些前端代码(无论是 htmlcss,还是 js),或者要制作一个 demo 分享给他人。这些都可以借助 CodePen 这个网站来实现。

一、基本介绍

1,什么是 CodePen?

    CodePen(代码笔)一款前端所见即所得的工具,我们可以在线编辑制作前端页面,所见即所得。同时网站提供所有常见的 jscss 库,并且支持流行技术(如 SASS),免去了我们自建平台的麻烦。

2,CodePen 主要功能

  • 即时预览。我们甚至可以本地修改并即时预览别人的作品。支持多种主流预处理器。
  • 快速添加外部资源文件。只需在输入框里输入库名, CodePen 就会从 cdnjs 上寻找匹配的 cssjs 库。
  • 免费创建模板。支持创建三个模板,不是每个作品都需要从白板开始。
  • 优秀的外嵌体验。在 WordPressReddit 等支持 oEmbed 的平台上,只要简单地把链接贴入编辑框,发布后会自动转为嵌入作品。

二、使用样例1:JQuery + Font Awesome

(1)首先访问 CodePen 网站,并注册登录。点击 Pen 按钮新建一个 Pen

(2)在打开的页面中点击 JS 栏目前面的齿轮图标。

(3)由于我们要引入 jQuery 库,直接搜索 jQuery,让后点击搜索结果的第一项。

(4)这样 jQuery 库就引入进来了:

(5)同样地,我们在 CSS 栏目中搜索 Font Awesome 并将其引入:

(6)保存回到主界面后,在 HTML 栏目中添加如下代码:
<button id="changeColor">随机颜色</button>
<i id="fa1" class="fa fa-camera-retro fa-3x"></i>

(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 element-ui 并引入这两个库。

(2)接着在 CSS 栏目中引入 element-ui 使用的 CSS。由于 CodePan 上搜索不到,这里我们使用手动配置: 
https://unpkg.com/element-ui/lib/theme-chalk/index.css

(3)保存回到主界面后,在 HTML 栏目中添加如下代码:
<div id="app">
  <div class="search-wrapper">
      <el-input id="searchInput" placeholder="根据姓名筛选..."  v-model="filter"></el-input>
      <el-button type="primary" @click="reset">重置</el-button>
  </div> 
  <el-table
      :data="getTableData"
      :border="true"
      :stripe="true"
      style="width: 100%">
      <el-table-column
        prop="date"
        label="日期"
        width="180">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="180">
      </el-table-column>
      <el-table-column
        prop="address"
        label="地址">
      </el-table-column>
  </el-table>
</div>

(4)在 CSS 栏目中添加如下代码:
.search-wrapper {
  margin-bottom: 10px;
  display: flex;
}

.search-wrapper .el-input {
  flex:1;
  margin-right:10px;
}

(5)在 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 () {
    }
})

(6)最终的效果如下,通过上方输入框可以实时筛选下方表格的数据:
评论

全部评论(0)

回到顶部