堆棧內存溢出
  簡體   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  5   3    html

問題描述

這可能真的很蠢，但有人向我推薦這個小提琴

http://goo.gl/Fgmwjj

我想測試它，但我想在Notepad ++中編寫它唯一的事情是我不知道將所有三種語言組合成一個文檔的正確語法。

3 個解決方案

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

添加<script>標記以包含腳本。 對於需要在HTML之后加載的內容，在</body>之前將其加載到底部。

在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使用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放在外部文件中，然后鏈接它們，以便瀏覽器可以緩存它們，除了其他原因，但嵌入式工作在緊要關頭。

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

我甚至沒有看代碼，但我只是把它放在一起，希望這能讓你開始:) 

<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 代碼 如何從電子郵件中復制 html、css、Javascript 代碼 您如何將JavaScript代碼和html代碼結合在一起？ Javascript 函數適用於 JSFiddle 但不適用於我的 HTML 文檔？ 代碼在jsfiddle中有效，但在html文檔中無效。 為什么？ 如何在 Javascript 中請求 HTML 文檔？ 如何在 .html 文檔中啟用 javascript？ 如何將html文檔集成到代碼中 我在原始html的哪里插入jsfiddle代碼 如何將特定的javascript文件或javascript代碼加載到HTML文檔中？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM