[英]How to combine HTML, CSS, and Javascript into an HTML code
I'm currently working on a project with a team of designers and need to combine HTML/CSS/JS code into HTML.我目前正在与一个设计师团队合作一个项目,需要将 HTML/CSS/JS 代码组合成 HTML。
I've successfully wrote these codes separately in CodePen:我已经成功地在 CodePen 中分别编写了这些代码:
<button id="replay">Replay</button>
<br />
<pre id="logo"></pre>
#logo { background: black;display: inline-block;color: #00d600;font-weight: normal;}
var text = [
[' ', ',', '-', '-', '-', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ',', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ',', '-', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
['\'', ' ', ' ', '.', '-', '-', '.', '/', ' ', ',', '-', '-', '-', '.', ' ', ',', '-', '-', ',', '-', '-', ',', '-', '-', '.', '`', '-', '-', '\'', ' ', ',', '-', '-', '-', '.', '\'', ' ', ' ', ' ', '.', '-', '\'', ' ', ' ', ',', '-', '-', ',', '-', '-', '.', ',', '-', '-', ',', '-', '-', ',', ' ', ' ', ',', '-', '-', '-', '.', ' ', ' '],
['|', ' ', ' ', '|', ' ', ' ', ' ', ' ', '|', ' ', '.', '-', '.', ' ', '|', '|', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '|', ',', '-', '-', '.', '|', ' ', '.', '-', '-', '\'', '`', '.', ' ', ' ', '`', '-', '.', ' ', '\'', ' ', ',', '-', '.', ' ', ' ', '|', '|', ' ', ' ', ' ', ' ', ' ', ' ', '\\', '(', ' ', ' ', '.', '-', '\'', ' ', ' '],
['\'', ' ', ' ', '\'', '-', '-', '\'', '\\', '\'', ' ', '\'', '-', '\'', ' ', '\'', '|', ' ', ' ', '|', ' ', ' ', '|', ' ', ' ', '|', '|', ' ', ' ', '|', '\\', ' ', '`', '-', '-', '.', '.', '-', '\'', ' ', ' ', ' ', ' ', '|', '\\', ' ', '\'', '-', '\'', ' ', ' ', '|', '|', ' ', ' ', '|', '|', ' ', ' ', '|', '.', '-', '\'', ' ', ' ', '`', ')', ' '],
[' ', '`', '-', '-', '-', '-', '-', '\'', ' ', '`', '-', '-', '-', '\'', ' ', '`', '-', '-', '`', '-', '-', '`', '-', '-', '\'', '`', '-', '-', '\'', ' ', '`', '-', '-', '-', '\'', '`', '-', '-', '-', '-', '-', '\'', ' ', ' ', '`', '-', '-', '`', '-', '-', '\'', '`', '-', '-', '\'', '\'', '-', '-', '\'', '`', '-', '-', '-', '-', '\'', ' ', ' ']
];
$(document).ready(function() {
var $logo = $('#logo');
var currentlyDrawing = false;
function drawLogo() {
currentlyDrawing = true;
$logo.css('color', '#00d600');
var s = '';
function writeNext(i, j) {
s += text[i][j];
$logo.html(s);
j += 1;
if (j >= text[i].length) {
i += 1;
j = 0;
s += '<br />';
$logo.html(s);
}
if (i < text.length) {
setTimeout(function() {
writeNext(i, j);
}, Math.random() * 20);
} else {
$logo.css('color', '#00FF00');
currentlyDrawing = false;
}
}
writeNext(0, 0);
}
$('#replay').click(function() {
if (!currentlyDrawing) {
drawLogo();
}
});
drawLogo();
})
Be sure to include jQuery to make your JavaScript work!确保包含 jQuery 以使您的 JavaScript 工作!
<html>
<head>
<style>
#logo { background: black;display: inline-block;color: #00d600;font-weight: normal;}
</style>
</head>
<body>
<button id="replay">Replay</button>
<br />
<pre id="logo"></pre>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script type="text/javascript">
var text = [
[' ', ',', '-', '-', '-', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ',', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ',', '-', '-', '-', '.', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' '],
['\'', ' ', ' ', '.', '-', '-', '.', '/', ' ', ',', '-', '-', '-', '.', ' ', ',', '-', '-', ',', '-', '-', ',', '-', '-', '.', '`', '-', '-', '\'', ' ', ',', '-', '-', '-', '.', '\'', ' ', ' ', ' ', '.', '-', '\'', ' ', ' ', ',', '-', '-', ',', '-', '-', '.', ',', '-', '-', ',', '-', '-', ',', ' ', ' ', ',', '-', '-', '-', '.', ' ', ' '],
['|', ' ', ' ', '|', ' ', ' ', ' ', ' ', '|', ' ', '.', '-', '.', ' ', '|', '|', ' ', ' ', ' ', ' ', ' ', ' ', ' ', ' ', '|', ',', '-', '-', '.', '|', ' ', '.', '-', '-', '\'', '`', '.', ' ', ' ', '`', '-', '.', ' ', '\'', ' ', ',', '-', '.', ' ', ' ', '|', '|', ' ', ' ', ' ', ' ', ' ', ' ', '\\', '(', ' ', ' ', '.', '-', '\'', ' ', ' '],
['\'', ' ', ' ', '\'', '-', '-', '\'', '\\', '\'', ' ', '\'', '-', '\'', ' ', '\'', '|', ' ', ' ', '|', ' ', ' ', '|', ' ', ' ', '|', '|', ' ', ' ', '|', '\\', ' ', '`', '-', '-', '.', '.', '-', '\'', ' ', ' ', ' ', ' ', '|', '\\', ' ', '\'', '-', '\'', ' ', ' ', '|', '|', ' ', ' ', '|', '|', ' ', ' ', '|', '.', '-', '\'', ' ', ' ', '`', ')', ' '],
[' ', '`', '-', '-', '-', '-', '-', '\'', ' ', '`', '-', '-', '-', '\'', ' ', '`', '-', '-', '`', '-', '-', '`', '-', '-', '\'', '`', '-', '-', '\'', ' ', '`', '-', '-', '-', '\'', '`', '-', '-', '-', '-', '-', '\'', ' ', ' ', '`', '-', '-', '`', '-', '-', '\'', '`', '-', '-', '\'', '\'', '-', '-', '\'', '`', '-', '-', '-', '-', '\'', ' ', ' ']
];
$(document).ready(function() {
var $logo = $('#logo');
var currentlyDrawing = false;
function drawLogo() {
currentlyDrawing = true;
$logo.css('color', '#00d600');
var s = '';
function writeNext(i, j) {
s += text[i][j];
$logo.html(s);
j += 1;
if (j >= text[i].length) {
i += 1;
j = 0;
s += '<br />';
$logo.html(s);
}
if (i < text.length) {
setTimeout(function() {
writeNext(i, j);
}, Math.random() * 20);
} else {
$logo.css('color', '#00FF00');
currentlyDrawing = false;
}
}
writeNext(0, 0);
}
$('#replay').click(function() {
if (!currentlyDrawing) {
drawLogo();
}
});
drawLogo();
})
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.