第一题：写一个乘法口诀表
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
.foo tr td {
width: 100px;
text-align: center; /*对齐*/
border: 1px solid black; /*外框*/
}
</style>
</head>
<body>
<h1>九九乘法表</h1>
<hr>
<script type="text/javascript">
mulTable();
function mulTable(){
document.write('<table class="foo">');
for (var row = 1; row < 10; row++){
document.write('<tr>');
for (var col = 1; col <= row ; col++ ){
document.write('<td>');
document.write(row + '×' + col +'='
+row *col);
document.write('</td>');
}
document.write('</tr>');
}
document.write('</table>');
}
</script>
</body>
</html>
第二题是输入行数，打印出多少行的 笑脸：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
请输入行数：<input type="number" id="inputNum" value="5"/>
<input type="button" value="打印笑脸" onclick="printSmileFace()"/>
<script type="text/javascript">
function printSmileFace(){
var lineNum = document.getElementById("inputNum").value;
for(var i = lineNum; i > 0; i--){
temp = ""
for(var j = 1; j <= 2 * i - 1; j++){
temp += "\u263a";
}
document.write("<p style='margin: 10px auto; text-align: center;'>"
+ temp + "</p>")
}
}
</script>
</body>
</html>
第三题：在页面输入两个数字，计算出运算结果。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" id="num1" />
<select id="op">
<option value="+">+</option>
<option value="-">-</option>
<option value="*">×</option>
<option value="/">÷</option>
</select>
<input type="text" id="num2" />
<button onclick="calculate()">=</button>
<input type="text" id="result" readonly />
<script>
function calculate(){
var x = document.getElementById("num1").value;
var y = document.getElementById("num2").value;
var operator = document.getElementById("op").value;
var result = eval(x + operator + y);
document.getElementById("result").value=result;
}
</script>
</body>
</html>
第四：早上 中午 晚上 自动显示出来
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#message {
text-align: right;
margin: 10px 50px 0 0 ;
font-size: 2em;
color: red;
}
</style>
</head>
<body>
<div id="message"></div>
<script type="text/javascript">
var h = new Date().getHours();
var message = "";
if (0 <= h && h < 5) {
message = "你好";
}else if (h < 10 ){
message = "早上好";
}else if (h < 13){
message = "上午好";
}else if (h < 15){
message = "中午好";
}else if (h < 19){
message = "下午好";
}else {
message = "晚上好";
}
document.getElementById("message").innerHTML =
"<a href='http://www.qq.com'>" + message + "</a>";
</script>
</body>
</html>
第五题：根据学生名单，在网页上显示速记被点名的学员名单
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p id="demo">点击生成随机名单</p>
<button onclick="foo()">点我</button>
<script>
function foo(){
var students = ["A", "B", "C", "D", "E"];
var after_stu = [];
for (var i = 0; i < 3; i += 1){
var index = parseInt(Math.random() * students.length);
after_stu.push(students[index]);
students.splice(index, 1);
}
var x = document.getElementById("demo")
x.innerHTML = "生成的随机名称：" + after_stu;
}
</script>
</body>
</html>
第六：宾馆系统，订房间就减少一间，退房也是，可以更改营业状态。
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>显示酒店信息</title>
<style>
*{
margin: 0;
padding: 0;
font-family: "幼圆";
font-size: 20px;
font-weight: bold;
}
.main {
width: 300px;
height: 350px;
margin: 100px auto;
background-color: gray;
}
P {
height: 50px;
text-align: center;
line-height: 50px;
color: white;
}
hr {
width: 300px;
}
button{
float: top;
margin: 10px 75px;
width: 150px;
height: 40px;
}
</style>
</head>
<body>
<div class="main">
<p id="status"></p>
<hr />
<p id="name"></p>
<hr />
<p id="rooms"></p>
<hr />
<button type="button" onclick="hotel.reservation()">预定房间</button>
<button type="button" onclick="hotel.checkout()">退房</button>
<button type="button" onclick="hotel.changestatus()">改变营业状态</button>
</div>
<script>
var hotel = {
status : true,
hotelname : "Hotel",
rooms : 15,
reservation : function()
{
if (this.rooms > 0 && this.status)
{
this.rooms -= 1;
alert("预定成功，我们期待您的光临");
document.getElementById("rooms").textContent = this.rooms;
} else {
alert("预定失败！");
}
},
checkout : function()
{
if (this.rooms < 15 && this.status)
{
this.rooms += 1;
alert("退房成功，欢迎您下次光临！");
document.getElementById("rooms").textContent = this.rooms;
} else {
alert("退房失败！");
}
},
changestatus : function()
{
if (this.status)
{
this.status = false;
document.getElementById("status").textContent = "休息中"
} else {
this.status = true
document.getElementById("status").textContent = "营业中"
}
}
};
if (hotel.status){
document.getElementById("status").textContent = "营业中";
} else {
document.getElementById("status").textContent = "休息中";
}
document.getElementById("name").textContent = hotel.hotelname;
document.getElementById("rooms").textContent = hotel.rooms;
</script>
</body>
</html>
