来自javascript的换行符/样式文本?

时间:2013-05-17 13:28:11

标签: javascript css text styling

首先,这可能有点长。 我正在尝试使用javascript创建一个RPG文本游戏。

在我的HTML中,我只有html,head,css,body,div和script标签。

<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="story_css.css">
</head>
<body>
<div class="container">
<script src="story_js.js"></script>
</div>
</body>
</html>

所以这纯粹是我游戏中信息的容器。

然后我有我的javascript:

var ATTACK = 0;
var STRENGTH = 0;
var DEFENSE = 0;
var RANGED = 0;
var MAGIC = 0;
var AGILITY= 0;
var HEALTH = 0;
var CLASS = prompt("Choose a class (class only effects starting stats, but all classes can learn the same abilities at the same rate):Warrior, Mage, Theif, Archer.").toUpperCase();
switch (CLASS){
    case "WARRIOR":
        ATTACK = 16;
        STRENGTH = 18;
        DEFENSE = 17;
        RANGED = 2;
        MAGIC = 2;
        AGILITY = 5;
        HEALTH = 200;
        break;

    case "ARCHER":
        ATTACK = 6;
        STRENGTH = 5;
        DEFENSE = 11;
        RANGED = 20;
        MAGIC = 3;
        AGILITY = 15;
        HEALTH = 175;
    break;
}

document.write("These are the levels for each of your characters skills. You may write these down and keep track of them, but the game will automatically record your progress for you. However, you will not be able to see your levels until you type a command that asks for them, or if you require a certain level to complete a task.")
var  NAME = prompt("Enter your name:");

confirm("You are about to embark on an epic quest... so, " + NAME + " are you ready to begin?");

document.write("It is the year 3355, according to the Delil calendar, and you awake from your night's sleep. Today is a special day. It is your 18th birthday! In your small village of Shadowhollow, you are one of the 23 people who live there. But as of today, you are one of the villages men.");

我的问题是,当javascript正在执行document.write部分时,它只是将它作为一个巨大的文本片段,如果它们来自不同的提示,那么它就是它。有人可以帮助我并告诉我如何设计风格吗?

2 个答案:

答案 0 :(得分:0)

为什么不用HTML构建文本?:

document.write('<p>...</p>');
...
document.write('<p>...</p>');

答案 1 :(得分:0)

document.write("<h2>A sample heading</h2>\
<p>These are the levels for each of your characters skills.\
You may write these down and keep track of them, but the game will automatically record your progress for you.\
However, you will not be able to see your levels until you type a command that asks for them, \
or if you require a certain level to complete a task.</p>");
var  NAME = prompt("Enter your name:");

confirm("You are about to embark on an epic quest... so, " + NAME + " are you ready to begin?");

document.write("<h2>A sample heading</h2>\
<p>It is the year 3355, according to the Delil calendar, and you awake from your night's sleep. \
Today is a special day. It is your 18th birthday! In your small village of Shadowhollow, you are one of the 23 people who live there. \
But as of today, you are one of the villages men.</p>");

您可以使用backslash在javascript中将字符串拆分为不同的行。

对于标题1等段落<p>,您可以使用<h1>之类的不同文本标记标记来设置文本样式,而文本又是HTML的一部分。有关更多信息,您可以查看css

如果您希望javascript中的换行符使用\n\t标签。这仅适用于输出格式。

如果您想在HTML结果中使用换行符,请使用<br>

  

此外,{@ 1}}方法已弃用,如果不推荐,则不推荐使用   你是认真的编程。你必须诉诸于更好   像document.write document.createElement这样的DOM操作方法   等动态创建文档。

Dynamically create a HTML form with Javascript