HTML5 很棒的项目代码在线编辑器

html5 online editor prototype with file tree

html5, editor, tool

《aframe.js 3d拼图代码详解》作品已被踏得网收录！

第三方库
作品简介 3274
作品推荐
使用帮助
常用链接

HTML
CSS
JavaScript
Result

编译

JavaScript

document.addEventListener("DOMContentLoaded", function() {
    loadFont();
    loadButtons();
    loadAnimations();

//shameless advertising...
    console.log('%cNeed a developer? Send me an email:\nservice@techbrood.com', 'font-size: 13px; color: #3498db');
});

function loadFont() {
    var wf = document.createElement('link');
    wf.setAttribute("rel", "stylesheet");
    wf.setAttribute("href", "http://fonts.useso.com/css?family=Source+Sans+Pro:300,400,600");
    wf.setAttribute("type", "text/css");
    var head = document.getElementsByTagName('head')[0];
    head.appendChild(wf);
}

for (var x = 0; x < pages.length; x++) {
                    pages[x].style.display = "none";
                }

if (title == "") {
                    s("#page-1").style.display = "block";
                    s("#fileType").innerHTML = "HTML";
                    s("#color").style.color = "#d28445";
                    return "page-1";
                } else if (title == "styles") {
                    s("#page-2").style.display = "block";
                    s("#fileType").innerHTML = "CSS";
                    s("#color").style.color = "#6a9fb5";
                    return "page-2";
                } else if (title == "main") {
                    s("#page-3").style.display = "block";
                    s("#fileType").innerHTML = "JavaScript";
                    s("#color").style.color = "#f4bf75";
                    return "page-3";
                } else if (title == "data") {
                    s("#page-4").style.display = "block";
                    s("#fileType").innerHTML = "JSON";
                    s("#color").style.color = "#c3ba65";
                    return "page-4";
                }
            }

window.history.pushState(page(), title, url);
        });
    }
}

function loadAnimations() {
    var cGray = s("#c-gray");

setTimeout(function() {
        cGray.style.backgroundColor = "#34c849";
    }, 2000);

var p = document.createElement("p");
    var hello = "Click here and edit!";
    var count = 0;
    var page1 = s("#page-1");
    page1.appendChild(p);

var w = setInterval(function() {
        if (count == hello.length) {
            clearInterval(w);
            return;
        }
        p.innerHTML = p.innerHTML + hello.charAt(count);
        count++;
    }, 140);
}

function s(e) {
    return document.querySelector(e);
}

编译

CSS

* {
    margin: 0;
    padding: 0;
    font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
    font-weight: 300;
    outline: none;
}
p,
a,
ul,
ol,
li {
    font-size: 13px;
}
a {
    text-decoration: none;
    color: #f8f8f8;
    /*containers*/
}
body {
    background-color: #242424;
}
header {
    height: 25px;
    width: 100%;
    background-color: #3c3f41;
    font-size: 7px;
    color: #c5c5c5;
    padding-top: 5px;
}
header h1 {
    margin-top: -8px;
    text-align: center;
}
header span {
    display: inline-block;
    height: 5px;
    width: 5px;
    margin-right: 5px;
    margin-bottom: 2px;
    background-color: #c5c5c5;
    border-radius: 50%;
}
nav {
    z-index: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 180px;
    background-color: #47484b;
}
nav h2 {
    font-size: 14px;
    padding-top: 35px;
    padding-bottom: 10px;
    padding-left: 10px;
    background-color: #3c3f41;
    color: #adb9bd;
}
nav ul {
    list-style: none;
    padding-bottom: 20px;
    background-color: #3c3f41;
    border-bottom: 1px solid #4f5053;
}
nav a {
    display: block;
    width: 148px;
    padding: 2px;
    padding-left: 30px;
}
nav a:hover,
nav a:hover {
    opacity: #3c3f41;
}
footer {
    z-index: -2;
    position: absolute;
    bottom: 0px;
    height: 25px;
    width: 100%;
    background-color: #1b1b1d;
    border-top: 1px solid #333;
}
footer p {
    font-size: 12px;
    float: left;
    padding-top: 4px;
    padding-left: 190px;
    color: #889296;
}
footer ul {
    float: right;
    list-style: none;
}
footer li {
    font-size: 12px;
    display: inline-block;
    padding: 4px;
    padding-right: 10px;
    padding-left: 10px;
    color: #889296;
    border-left: 1px solid #333;
}
footer li:hover,
footer li:focus {
    cursor: default;
    text-decoration: underline;
    /*classes*/
}
.circle {
    z-index: 1;
    position: absolute;
    top: 9px;
    height: 12px;
    width: 12px;
    display: inline-block;
    border-radius: 50%;
}
.page {
    padding: 10px;
    margin-left: 180px;
    color: #f8f8f8;
}
.page p {
    color: #e6db74;
    font-size: 16px;
}
.active {
    background-color: #2d2e30;
    color: #73aec7;
}
.active:after {
    content: " :-)";
}
.active span {
    color: #6c7578;
}
.ft {
    z-index: -2;
    color: #889296;
    /*divs*/
}
#c-red {
    left: 10px;
    background-color: #fc635d;
}
#c-yellow {
    left: 30px;
    background-color: #fdbd41;
}
#c-green {
    left: 50px;
    background-color: #34c94a;
}
#page-2,
#page-3,
#page-4 {
    display: none;
}
#page-2 p {
    color: #e12569;
}
#page-3 p {
    color: #66d9ef;
}
#page-4 p {
    color: #35ca4a;
}
#color {
    color: #d28445;
}

HTML

<header>
    <div id="c-red" class="circle"></div>
    <div id="c-yellow" class="circle"></div>
    <div id="c-green" class="circle"></div>x
    <h1><span id="c-gray"></span>A new project</h1>
</header>

<nav>
    <h2>Working Files</h2>
    <ul>
        <li><a href="/" class="active">index<span class="ft">.html</span></a>
        </li>
        <li><a href="/styles">styles<span class="ft">.css</span></a>
        </li>
        <li><a href="/main">main<span class="ft">.js</span></a>
        </li>
        <li><a href="/data">data<span class="ft">.json</span></a>
        </li>
    </ul>
</nav>

<div id="page-2" class="page">
        <p>Feel free to make some changes!</p>
    </div>

<div id="page-3" class="page">
        <p>function Me() {
            <br>return somethingCool;
            <br>}</p>
    </div>

<div id="page-4" class="page">
        <p>Check out the console... :-)</p>
    </div>
</div>

<footer>
    <p>service@techbrood.com &#45; <span>50 Lines</span>
    </p>
    <ul>
        <li>INS</li>
        <li id="fileType">HTML</li>
        <li id="color">■</li>
        <li>Tab Size: 4</li>
    </ul>
</footer>

html5 online editor prototype with file tree

html5, editor, tool

编辑器支持Emmet

快捷键

html5 online editor prototype with file tree

html5, editor, tool

很棒的HTML5在线交互式乐器

HTML5 很棒的一款智慧家庭应用程序

编辑器支持Emmet

快捷键

语言：

语言：

导入代码模板：