Question

这可能真的很蠢，但有人向我推荐这个小提琴

我想测试一下，但我想在Notepad ++中编写它，唯一的问题是我不知道将所有三种语言合并为一个文档的正确语法。

Answer 1

添加<script>标记以包含脚本。对于您需要在HTML之后加载的内容，请在</body>之前将其加载到底部。

在<style>内添加head标记，以包含CSS。

<!DOCTYPE html>
<html>
<head>
<style>
#textin {
    width: 500px;
    height: 150px;
}
#textout {
    font-family: courier;
    font-size: 12px;
    width: 40em;
    height: 200px;
    resize: none;
}
</style>
</head>
<body>

<form>
    <textarea id="textin" name="myText"></textarea>
    <br/>
    <br/>Cost:
    <input type="text" name="lineCount" size="1" value="0" />Dollars
    <br/>
    <br/>Formatted:
    <br/>
    <textarea id="textout" name="formatText" disabled="yes"></textarea>
</form>

<script>
function countLines() {
    var theArea = document.getElementById("textin");
    var theLines = theArea.value;
    theLines = theLines.split("\n");
    var finalLines = [];

    var numLines = theLines.length;
    for (var i = 0; i < numLines; i++) {
        if (theLines[i].length > 40) {
            if(theLines[i].match(/^.{0,38}\S{41}/)) {
                theLines[i] = theLines[i].replace(/^(.{40})/, "$1\n");
                var newLines = [i,1].concat(theLines[i].split("\n"));
                numLines++;
                Array.prototype.splice.apply(theLines, newLines);
            } else {
                theLines[i] = theLines[i].replace(/(.{1,40}[^\S\n])/, "$1\n");
                var newLines = [i,1].concat(theLines[i].split("\n"));
                numLines++;
                Array.prototype.splice.apply(theLines, newLines);
            }
        }
        finalLines.push(theLines[i]);
    }

    while (finalLines.length && finalLines[finalLines.length - 1].match(/^\s*$/)) {
        finalLines.pop();
    }

    theArea.form.lineCount.value = finalLines.length;

    document.getElementById("textout").value = finalLines.join("\n");
}

var el = document.getElementById("textin");
if (el.addEventListener) {
    el.addEventListener("input", countLines, false);
} else {
    el.attachEvent('onpropertychange', countLines);
    el.attachEvent('onkeypress', countLines);
}

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on' + event, handler);
    };
} else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}

function init() {
    var text = document.getElementById('text');

    function resize() {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize() {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change', resize);
    observe(text, 'cut', delayedResize);
    observe(text, 'paste', delayedResize);
    observe(text, 'drop', delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}
</script>
</body>
</html>

Answer 2

Jsfiddle使用HTML，CSS和JavaScript来渲染最终结果。 CSS和JS都可以分别使用<style>和<script>标签轻松嵌入到HTML文档中。你会看到这样的东西：

<html>
    <head>
        <style type="text/css">
            CSS goes here
        </style>
        <script type="text/javascript">
            JS goes here
        </script>
    </head>

    <body>
        HTML goes here
    </body>
</html>

通常最好将CSS / JS放在外部文件中，然后将它们链接起来，以便浏览器可以缓存它们，除了其他原因，但嵌入式工作还是紧要关头。

Answer 3

我甚至没有查看代码，但我只是把它放在一起，希望这能让你开始：）

<html>
<head>
<style>
#textin {
    width: 500px;
    height: 150px;
}
#textout {
    font-family: courier;
    font-size: 12px;
    width: 40em;
    height: 200px;
    resize: none;
}
</style>
<script type="text/javascript">
function countLines() {
    var theArea = document.getElementById("textin");
    var theLines = theArea.value;
    theLines = theLines.split("\n");
    var finalLines = [];

    var numLines = theLines.length;
    for (var i = 0; i < numLines; i++) {
        if (theLines[i].length > 40) {
            if(theLines[i].match(/^.{0,38}\S{41}/)) {
                theLines[i] = theLines[i].replace(/^(.{40})/, "$1\n");
                var newLines = [i,1].concat(theLines[i].split("\n"));
                numLines++;
                Array.prototype.splice.apply(theLines, newLines);
            } else {
                theLines[i] = theLines[i].replace(/(.{1,40}[^\S\n])/, "$1\n");
                var newLines = [i,1].concat(theLines[i].split("\n"));
                numLines++;
                Array.prototype.splice.apply(theLines, newLines);
            }
        }
        finalLines.push(theLines[i]);
    }

    while (finalLines.length && finalLines[finalLines.length - 1].match(/^\s*$/)) {
        finalLines.pop();
    }

    theArea.form.lineCount.value = finalLines.length;

    document.getElementById("textout").value = finalLines.join("\n");
}

var el = document.getElementById("textin");
if (el.addEventListener) {
    el.addEventListener("input", countLines, false);
} else {
    el.attachEvent('onpropertychange', countLines);
    el.attachEvent('onkeypress', countLines);
}

var observe;
if (window.attachEvent) {
    observe = function (element, event, handler) {
        element.attachEvent('on' + event, handler);
    };
} else {
    observe = function (element, event, handler) {
        element.addEventListener(event, handler, false);
    };
}

function init() {
    var text = document.getElementById('text');

    function resize() {
        text.style.height = 'auto';
        text.style.height = text.scrollHeight + 'px';
    }
    /* 0-timeout to get the already changed text */
    function delayedResize() {
        window.setTimeout(resize, 0);
    }
    observe(text, 'change', resize);
    observe(text, 'cut', delayedResize);
    observe(text, 'paste', delayedResize);
    observe(text, 'drop', delayedResize);
    observe(text, 'keydown', delayedResize);

    text.focus();
    text.select();
    resize();
}
</script>

<body>

<form>
    <textarea id="textin" name="myText"></textarea>
    <br/>
    <br/>Cost:
    <input type="text" name="lineCount" size="1" value="0" />Dollars
    <br/>
    <br/>Formatted:
    <br/>
    <textarea id="textout" name="formatText" disabled="yes"></textarea>
</form>

</body>
</html>

如何将html，css和javascript代码组合成一个来自jsfiddle的文档？

3 个答案: