<html>
<head>
<meta charset="utf-8">
<title>用户登录</title>
<link rel="stylesheet" href="css/style.css">
<style>
* {
margin: 0;
padding: 0;
}
#login {
width: 300px;
height: 200px;
margin: 10px auto;
}
#login label {
text-align: right;
display: inline-block;
width: 80px;
margin: 5px 5px;
}
#login input[type] {
border: none;
outline: none;
border-bottom: 1px dotted darkgray;
}
#login input[type=submit] {
border: none;
display: inline-block;
width: 60px;
height: 20px;
background-color: red;
color: white;
margin-top: 10px;
position: relative;
left: 200px;
}
#login fieldset {
padding: 10px 5px;
border-radius: 5px 5px 5px 5px;
}
#login legend {
background-color: lightgoldenrodyellow;
}
#h1 {
color: red;
}
h1 {
color: pink !important;
}
h1 {
text-align: center;
color: blue !important;
}
</style>
</head>
<body>
<h1 id="h1" class="foo">用户登录</h1>
<div id="login">
<form action="" method="post">
<fieldset>
<legend>用户登录</legend>
<p>
<label for="username">用户名：</label>
<input type="text" id="username" name="username">
</p>
<p>
<label for="password">密码：</label>
<input type="password" id="password" name="password">
</p>
<p>
<label for="email">电子邮箱：</label>
<input type="email" id="email" name="email">
</p>
<p>
<input type="submit" value="登录">
</p>
</fieldset>
</form>
</div>
<script>
function showTable() {
document.write("<table style='border-collapse: collapse;'>");
for (var i = 1; i <= 9; i += 1) {
document.write("<tr>");
for (var j = 1; j <= i; j += 1) {
document.write("<td style='border: 1px solid black;'>");
document.write(i + "*" + j + "=" + i * j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>
11.png
2.让浏览器弹出提示框（交互）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button onclick="showMessage()">确定</button>
<script>
function showMessage() {
for (var i = 0; i < 3; i += 1) {
var name = window.prompt("请输入你的名字:");
if (name) {
window.alert("你好, " + name + "!");
} else {
window.alert("大家好!");
}
}
if (window.confirm("确定要关闭浏览器窗口吗?")) {
window.close();
}
}
</script>
</body>
</html>
22.png
33.png
3.在浏览器按钮提示，打印乘法口诀表
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<button onclick="showTable()">查看乘法口诀表</button>
<script>
function showTable() {
document.write("<table style='border-collapse: collapse;'>");
for (var i = 1; i <= 9; i += 1) {
document.write("<tr>");
for (var j = 1; j <= i; j += 1) {
document.write("<td style='border: 1px solid black;'>");
document.write(i + "*" + j + "=" + i * j);
document.write("</td>");
}
document.write("</tr>");
}
document.write("</table>");
}
</script>
</body>
</html>
44.png
55.png
4.在浏览器右上角插入系统时间
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#time {
float: right;
background-color: blue;
color: yellow;
width: 320px;
height: 40px;
font: 20px/40px Arial;
text-align: center;
}
</style>
</head>
<body>
<div id="time"></div>
<script type="text/javascript">
var days = ["日", "一", "二", "三", "四", "五", "六"];
function showTime() {
var now = new Date();
var year = now.getFullYear();
var month = now.getMonth() + 1;
var date = now.getDate();
var hour = now.getHours();
var minute = now.getMinutes();
var second = now.getSeconds();
var day = now.getDay();
var div = document.getElementById("time");
div.innerHTML = year + "年"
+
(month < 10 ? "0" : "") + month + "月"
+
(date < 10 ? "0" : "") + date + "日 "
+
(hour < 10 ? "0" : "") + hour + ":"
+
(minute < 10 ? "0" : "") + minute + ":"
+
(second < 10 ? "0" : "") + second
+
" 星期" + days[day];
}
showTime();
window.setInterval(showTime, 1000);
</script>
</body>
</html>
66.png
5.走马灯效果
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
h1 {
font-size: 36px;
background-color: lightgoldenrodyellow;
color: darkolivegreen;
width: 960px;
margin: 0 auto;
}
</style>
</head>
<body>
<h1 id="welcome" class="foo">欢迎来到千锋教育成都校区Python就业班▁▂▃▄▅▆▇▆▅▄▃▂▁</h1>
<script>
var h1= document.querySelectorAll(".foo")[0];
function move() {
var str = h1.textContent;
str = str.substring(1) + str.charAt(0);
h1.textContent = str;
}
window.setInterval(move, 200);
</script>
</body>
</html>
77.jpg
- 5秒后自动跳转到页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<h2><span id="counter">5</span>秒钟以后自动跳转到百度...</h2>
<script type="text/javascript">
var countdown = 5;
var span = document.getElementById("counter");
function delayGo() {
countdown -= 1;
if (countdown == 0) {
location.href = "http://www.baidu.com";
} else {
span.textContent = countdown;
setTimeout(delayGo, 1000);
}
}
setTimeout(delayGo, 1000);
</script>
</body>
</html>
88.png
网友评论