您的位置：首页 > Web前端 > JQuery

源码-JavaScript&jQuery交互式前端开发-第4章-判断和循环

2016-09-27 11:07 811 查看

示例效果：

JS代码：

var table = 3;             // Unit of table
var operator = 'addition'; // Type of calculation
var i = 1;                 // Set counter to 1
var msg = '';              // Message

if (operator === 'addition') {
// Do addition
while (i < 11) {
msg += i + ' + ' + table + ' = ' + (i + table) + '<br />';
i++;
}
} else {
// Do multiplication
while (i < 11) {
msg += i + ' x ' + table + ' = ' + (i * table) + '<br />';
i++;
}
}

// Write the message into the page
var el = document.getElementById('blackboard');
el.innerHTML = msg;

HTML代码：

<!DOCTYPE html>
<html>
<head>
<title>Bullseye! Tutoring</title>
<link rel="stylesheet" href="css/c04.css" />
</head>
<body>
<section id="page2">
<h1>Bullseye</h1>
<img src="images/teacher.png" id="teacher2" alt="" />
<section id="blackboard"></section>
</section>
<script src="js/example.js"></script>
</body>
</html>

CSS代码：

@import url(http://fonts.googleapis.com/css?family=Wellfleet);

body {
background-color: #523620;
color: #fff;
font-family: 'Wellfleet', times, serif;
font-size: 150%;
margin: 0px 0px 0px 0px;}

h1 {
background-image: url('../images/bullseye-logo.png');
background-repeat: no-repeat;
text-indent: 100%;
white-space: nowrap;
overflow: hidden;
height: 109px;
width: 643px;
margin: 40px auto;}

#teacher {
float:right;
margin:0px 30px 0px 0px;}
#teacher2 {
float:right;
margin:135px 30px 0px 0px;}

#page1, #page2 {
background-color: #fecc6f;
height: 596px;
padding: 10px;
min-width: 779px;}
#page2 {
height: 730px;}

#answer {
border: 12px double #fff;
color: #523620;
text-align: left;
padding: 20px;
margin: 70px auto 10px auto;
width: 250px;
text-align: center;}

#blackboard {
background-color: #425a5a;
border: 25px solid #523620;
border-radius: 20px;
padding: 40px 20px;
margin: 0px auto;
height: 370px;
width: 600px;
text-align: center;}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航