javascript和html的加载与运行。关于腾讯JX的一个demo程序

我按照你说的加上了那三个class在index.html文件中，但是预览还是一样的效果。这个是index.html文件。谢谢
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>番茄工作法</title>
<link rel="stylesheet" type="text/css" href="./style/main.css" /></head>
<body>
<h1 id="title">番茄工作法</h1>
<div id="remainTime" class="remainTime"></div>
<div id="progressBarBorder">
<div id="progressBar"></div>
</div> <div id="control">
<h3>当前任务</h3>
<div id="currentTask">赶紧开始当前任务吧！</div>
<h3>工作名称</h3>
<input id="taskName" type="text" value="工作1" /> <h3>工作时长</h3>
<input id="workTime" type="text" value="25" />
<h3>休息时长</h3>
<input id="restTime" type="text" value="0.05" />
<input id="isLoopCheckbox" type="checkbox" /><label for="isLoopCheckbox">循环</label>
<button id="startWorkButton" class="btn btn-primary">开始工作</button>
<button id="startRestButton" class="btn btn-warning">开始休息</button>
<button id="stopButton" class="btn btn-danger disabled">停止</button> <h3>番茄工作方法</h3>
<ul>
<li>输入一个任务，将番茄时间设为25分钟点【开始工作】</li>
<li>专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起</li>
<li>然后短暂休息一下，5分钟左右</li>
</ul>
<h3>任务记录</h3>
<ul id="taskList"></ul>
</div> <div class="copyright">Copyright &copy; <script>document.write(new Date().getFullYear());</script> <a href="http://www.AlloyTeam.com/" target="_blank">Tencent AlloyTeam</a>. All Rights Reserved.</div> <script src="./js/jx/jx.core.js"></script>
<script src="./js/jx/jx.base.js"></script>
<script src="./js/jx/jx.browser.js"></script>
<script src="./js/jx/jx.dom.js"></script>
<script src="./js/jx/jx.event.js"></script>

<script src="./js/jx/jx.format.js"></script>
<script src="./js/jx/jx.date.js"></script>
<script src="./js/jx/jx.json.js"></script>
<script src="./js/jx/jx.swfobject.js"></script>
<script src="./js/jx/jx.sound.js"></script> <script src="./js/tomato.js"></script>
</body>
</html>

解决方案 »

  1.   

    你忘记把bootstrap引入了，你去http://twitter.github.io/bootstrap/这里把bootstrap下载了，然后引入那个CSS文件就可以了。
      

  2.   

    http://alloyteam.github.io/AlloyTimer/这是他们程序的样子。我下载了css，也加了路径但是样式还是不对。这个是他们程序的查看源文件的内容。下边图，为我加了bootstrap.css后的样式。请高手解答下。<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8" />
    <meta name="author" content="Tencent.AlloyTeam.Jetyu" />
    <meta name="copyright" content="Tencent.AlloyTeam" />
    <title>Alloy Timer 之番茄工作法</title>
    <link rel="stylesheet" type="text/css" href="./bootstrap/css/bootstrap.css" />
    <link rel="stylesheet" type="text/css" href="./style/main.css" /></head>
    <body> <div id="main">
    <div id="control">
    <h2 id="title">Alloy Timer</h2>
    <h5 id="subTitle">之番茄工作法</h5>
    <div id="remainTime" class="remainTime">25:00</div>
    <div id="progressBarBox" class="progress progress-striped">
    <div id="progressBar" class="bar"></div>
    </div> <div id="currentTask"></div>

    <textarea id="taskName" rows="2" title="请输入任务...">请输入任务...</textarea>
    <button id="startWorkButton" class="btn btn-primary">开始工作</button>
    <button id="startRestButton" class="btn btn-warning">开始休息</button>
    <button id="stopButton" class="btn btn-danger disabled">停止</button> </div> <div id="more">
    <button id="introButton" class="btn btn-info">番茄工作方法</button>
    <div id="introBoard">
    <h4>番茄工作法：最简单有效的时间管理方式</h4>
    <ol id="introList">
    <li>输入一个任务，将番茄时间设为25分钟点【开始工作】</li>
    <li>专注工作，中途不允许做任何与该任务无关的事，直到番茄时钟响起</li>
    <li>然后短暂休息一下，5分钟左右</li>
    </ol>
    <a href="http://baike.baidu.com/view/5259318.htm" target="_blank">详细...</a>
    </div>
    <button id="settingButton" class="btn btn-info">设置</button>
    <ul id="settingBoard" class="form-inline">
    <li>
    <label>
    <span id="loopCheckboxText">自动循环</span>
    <input id="isLoopCheckbox" type="checkbox" />
    </label>
    </li>
    <li>
    <span id="workTimeText">工作时长</span>
    <input id="workTime" type="text" value="25" title="上下拖拽或者上下按键也可以改变值" />
    </li>
    <li>
    <span id="restTimeText">休息时长</span>
    <input id="restTime" type="text" value="5" title="上下拖拽或者上下按键也可以改变值" />
    </li>
    </ul>
    <button id="taskListButton" class="btn btn-info">任务记录</button>
    <div id="taskListBoard">
    <ul id="taskList"></ul>
    <button id="clearTaskListButton" class="btn btn-danger">清空记录</button>
    </div>
    </div>

    <div class="copyright">Copyright &copy; <script>document.write(new Date().getFullYear());</script> <a href="http://www.AlloyTeam.com/" target="_blank">Tencent AlloyTeam</a>. All Rights Reserved.</div> </div>


    <script src="./js/jx/jx.core.js"></script>
    <script src="./js/jx/jx.base.js"></script>
    <script src="./js/jx/jx.browser.js"></script>
    <script src="./js/jx/jx.dom.js"></script>
    <script src="./js/jx/jx.event.js"></script>

    <script src="./js/jx/jx.format.js"></script>
    <script src="./js/jx/jx.date.js"></script>
    <script src="./js/jx/jx.json.js"></script>
    <script src="./js/jx/jx.swfobject.js"></script>
    <script src="./js/jx/jx.sound.js"></script> <script src="./js/alloy.timer.js"></script>



    <!--Google Analytics-->
    <script type="text/javascript">   var _gaq = _gaq || [];
      _gaq.push(['_setAccount', 'UA-23019343-9']);
      _gaq.push(['_trackPageview']);   (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
      })(); </script>
    </body>
    </html>