堆栈内存溢出
  简体   繁体   English

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

[英]How do I combine the html, css, and javascript code into one document from a jsfiddle?

 原文  2014-01-17 01:45:25  9   3    html

问题描述

This is probably really dumb but someone recommended this fiddle to me 这可能真的很蠢，但有人向我推荐这个小提琴

http://goo.gl/Fgmwjj http://goo.gl/Fgmwjj

and I want to test it out but I want to write it in Notepad++ the only thing is I don't know the right syntax to combine all three languages into one document. 我想测试它，但我想在Notepad ++中编写它唯一的事情是我不知道将所有三种语言组合成一个文档的正确语法。

3 个解决方案

解决方案1
 6  2014-01-17 01:48:20

Add <script> tags to include a script. 添加<script>标记以包含脚本。 For something you need loaded AFTER the HTML, load it at the bottom before your </body> . 对于需要在HTML之后加载的内容，在</body>之前将其加载到底部。

Add a <style> tag inside your head to include CSS . 在head添加一个<style>标签以包含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>

解决方案2
 4  2014-01-17 01:57:57

Jsfiddle uses HTML, CSS and JavaScript to render the final result. Jsfiddle使用HTML，CSS和JavaScript来呈现最终结果。 Both CSS and JS can be easily embedded into an HTML document using <style> and <script> tags respectively. CSS和JS都可以分别使用<style>和<script>标签轻松嵌入到HTML文档中。 You would be looking at something like this: 你会看到这样的东西： 

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

It's usually best to put your CSS/JS in external files then link them so the browser can cache them, among other reasons, but embedded works in a pinch. 通常最好将CSS / JS放在外部文件中，然后链接它们，以便浏览器可以缓存它们，除了其他原因，但嵌入式工作在紧要关头。

解决方案3
 1  2014-01-17 01:50:45

I didn't even look at the code but I just put it together for you, hopefully this gets you started :) 我甚至没有看代码，但我只是把它放在一起，希望这能让你开始:) 

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

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何将 HTML、CSS 和 Javascript 组合成 HTML 代码 - How to combine HTML, CSS, and Javascript into an HTML code 如何从电子邮件中复制 html、css、Javascript 代码 - How do I copy html, css, Javascript code from email 您如何将JavaScript代码和html代码结合在一起？ - How do you combine JavaScript code and html code together? Javascript 函数适用于 JSFiddle 但不适用于我的 HTML 文档？ - Javascript function works on JSFiddle but not in my HTML document? 代码在jsfiddle中有效，但在html文档中无效。 为什么？ - Code works in jsfiddle but not in html document. Why? 如何在 Javascript 中请求 HTML 文档？ - How do I request an HTML document in Javascript? 如何在 .html 文档中启用 javascript？ - How do i enable javascript in a .html document? 如何将html文档集成到代码中 - How do I intergrate a html document into the code 我在原始html的哪里插入jsfiddle代码 - Where do I insert jsfiddle code in raw html 如何将特定的javascript文件或javascript代码加载到HTML文档中？ - How do I load a specific javascript file or javascript code into an HTML document?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM