html - 如何将 html、css 和 javascript 代码从 jsfiddle 合并到一个文档中?

标签 html

这可能真的很蠢,但有人向我推荐了这个 fiddle

http://goo.gl/Fgmwjj

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

最佳答案

添加<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>

关于html - 如何将 html、css 和 javascript 代码从 jsfiddle 合并到一个文档中?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/21176427/

相关文章:

html - CSS <hr> 宽度过渡

html - CSS z-index 与链接冲突

c# - 具有由 ASP.NET 构建的 CSS 样式的 HTML 标记是否需要 runat ="server"?

php - 延迟提交表单 5 秒并显示 jquery 对话框?

html - 导航的父列表项下的子项

javascript - jQuery .html() 函数删除文本

html - CSS :target does not work on mozilla firefox

javascript - 如何使用 MathJax.typeset() 解析动态加载的内容?

javascript - HTML5 Canvas粗线宽度椭圆有奇怪的空白

html - CSS/HTML : Border builds it self?