stackoom
  简体   繁体   中英

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

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

Question

This is probably really dumb but someone recommended this fiddle to me

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.

3 answers

solution1
 6  2014-01-17 01:48:20

Add <script> tags to include a script. For something you need loaded AFTER the HTML, load it at the bottom before your </body> .

Add a <style> tag inside your head to include 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>

solution2
 4  2014-01-17 01:57:57

Jsfiddle uses HTML, CSS and JavaScript to render the final result. Both CSS and JS can be easily embedded into an HTML document using <style> and <script> tags respectively. 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.

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

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How to combine HTML, CSS, and Javascript into an HTML code How do I copy html, css, Javascript code from email How do you combine JavaScript code and html code together? Javascript function works on JSFiddle but not in my HTML document? Code works in jsfiddle but not in html document. Why? How do I request an HTML document in Javascript? How do i enable javascript in a .html document? How do I intergrate a html document into the code Where do I insert jsfiddle code in raw html How do I load a specific javascript file or javascript code into an HTML document?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM