1
這可能是真的愚蠢的，但有人推薦這個小提琴我如何將html，css和javascript代碼合併到jsfiddle的一個文檔中？
，我想測試一下，但我想它寫在記事本+ +的唯一的事情是我不知道正確的語法將所有三種語言合併成一個文件。
A
回答
3
添加<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>
1
我甚至沒有看代碼，但我只是把它一起給你，希望這可以讓你開始:)
<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>
+1
打敗你;-) –
+1
你的複製粘貼技能不是開玩笑，先生。 –
+0
:-P沒關係，同一個隊員:-) –
3
的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在外部文件中，然後將它們鏈接使瀏覽器可以緩存他們，其他的原因之一，但嵌入作品在緊要關頭。
+0
100％同意。這是快速測試的解決方案，但是您的最終情況應該爲'CSS'和'JS'加載外部文件。 –
相關問題
- 1. 如何將這個PHP，Javascript和HTML文檔合併成一個？
- 2. 如何將html文檔整合到代碼中
- 3. 你如何將JavaScript代碼和html代碼結合在一起？
- 4. 正確合併2個html頁面的css和javascript代碼
- 5. 如何將特定的JavaScript文件或JavaScript代碼加載到HTML文檔中？
- 6. 用於將CSS合併到HTML中的Python代碼
- 7. 將JVM和代碼合併到一個文件中
- 8. 如何將一個HTML文檔中使用純JavaScript在文檔
- 9. 在R中，如何將兩個XML文檔合併到一個文檔中？
- 10. 如何將php文檔合併到1個文檔中？
- 11. html - javascript代碼合併
- 12. 如何將兩個XML文檔合併爲一個XML文檔？
- 13. 如何將不同的文檔合併爲一個文檔？
- 14. 代碼在jsfiddle中工作，但不在html文檔中
- 15. 如何將圖像合併到我的文本中？ HTML CSS
- 16. 如何合併php和html代碼？
- 17. 如何將jQuery代碼結合到一個javascript函數中
- 18. 將一個非代碼文件合併到多個項目中
- 19. 如何將jsfiddle代碼轉移到dreamweaver？
- 20. 如何將多段代碼合併爲一個？ （JavaScript）
- 21. 將HTML，CSS和JavaScript代碼注入到iframe中
- 22. 如何將逐字源代碼包含到html文檔中
- 23. 如何將不同的代碼文件合併爲一個文件代碼
- 24. 如何將多個HTML文件（包含PHP和JS代碼）合併爲一個大HTML文件
- 25. 如何合併這兩個javascript代碼？
- 26. 將代碼添加到jsfiddle
- 27. 將C代碼文件合併爲一個C代碼文件
- 28. 將多個文檔合併到單個PDF文檔中
- 29. 將多個JS和CSS文件實現爲一個HTML文檔
- 30. Conbining CSS和JavaScript到一個文件中，並將其鏈接
非常感謝你！ – user3192299
如果您認爲這是一個可以接受的答案，請在投票選項旁邊用綠色複選框標記。 –