Html，Css和Javascript项目实战
项目1：使用Html5的Canvas对象绘制一个圆形钟盘，显示实时时间
- 效果图如下
-
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
</head>
<body>
<canvas id="canvas" width="500" height="500"></canvas>
<script>
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");
function drawClock(){
context.clearRect(0,0,500,500);
var now = new Date();
var sec = now.getSeconds();
var min = now.getMinutes();
var hours = now.getHours();
//小时必须获取浮点类型 (小时+分钟/60)
hours = hours+min/60;
var hours = hours>12?hours-12:hours;
context.lineWidth = 10;
context.strokeStyle = "blue";
context.beginPath();
context.arc(250,250,200,0,360,false);
context.closePath();
context.stroke();
for(var i=0;i<12;i++){
context.save();
context.lineWidth = 7;
context.strokeStyle = "#000";
context.translate(250,250);
context.rotate(i*30*Math.PI/180);
context.beginPath();
context.moveTo(0,-170);
context.lineTo(0,-190);
context.closePath();
context.stroke();
context.restore();
}
for(var i=0;i<60;i++){
context.save();
context.beginPath();
context.lineWidth = 5;
context.strokeStyle = "#000";
context.translate(250,250);
context.rotate(i*6*Math.PI/180);
context.moveTo(0,-180);
context.lineTo(0,-190);
context.closePath();
context.stroke();
context.restore();
}
context.save();
context.lineWidth = 7;
context.strokeStyle = "#000";
context.beginPath();
context.translate(250,250);
context.rotate(hours*30*Math.PI/180);
context.moveTo(0,-140);
context.lineTo(0,10);
context.closePath();
context.stroke();
context.restore();
context.save();
context.lineWidth = 5;
context.strokeStyle = "#000";
context.beginPath();
context.translate(250,250);
context.rotate(min*6*Math.PI/180);
context.moveTo(0,-140);
context.lineTo(0,10);
context.closePath();
context.stroke();
context.restore();
context.save();
context.lineWidth = 5;
context.strokeStyle = "#ff0000";
context.beginPath();
context.translate(250,250);
context.rotate(sec*6*Math.PI/180);
context.moveTo(0,-160);
context.lineTo(0,15);
context.closePath();
context.stroke();
context.restore();
}
setInterval(drawClock,1000);
</script>
</body>
</html>项目2：模拟手机上的7881网页，使用Html，Css和Javascript联合开发
1. 主页
- 效果图如下
-
index.html主页主要代码如下
<head>
<meta charset="utf-8">
<title></title>
<script>
function init() {
document.getElementById("seach").value = "输入搜索的内容";
}
function _focus() {
document.getElementById("seach").value = "";
}
function _blur() {
var name = document.getElementById("seach").value;
if (name == "") {
document.getElementById("seach").value = "输入搜索的内容";
} else {
document.getElementById("seach").style.color = "black";
}
}
function clickme(){
alert("假装你已经搜到了种子！");
}
</script>
<style>
#top {
background-color: #E4F2FC;
}
.div_user {
position: relative;
float: right;
margin-top: 20px;
margin-right: 20px;
}
#left {
width: 33.3%;
position: relative;
float: left;
}
#center {
width: 33.3%;
position: relative;
float: left;
}
#right {
width: 33.3%;
position: relative;
float: left;
}
#bottom {
position: relative;
float: left;
width: 100%;
}
</style>
</head>
<body style="margin:0;background:#E4E4E4" onload="init()">
<div id="top">
<img src="../img/7881/logo.png" />
<div class="div_user">
<a href="login.html" style="text-decoration: none;">登录</a>
<a href="regist.html" style="text-decoration: none;">注册</a>
</div>
</div>
<div id="headad">
<img src="../img/7881/s01.jpg" style="width: 100%;" onclick="location.href='login.html'" />
</div>
<div id="left">
<img src="../img/7881/i01.png" width="100%" height="50%" onclick="location.href='buy.html'" />
<img src="../img/7881/i02.png" width="100%" height="50%" onclick="location.href='change.html'" />
</div>
<div id="center">
<img src="../img/7881/i05.png" width="100%" height="100%" onclick="location.href='list.html'" />
</div>
<div id="right">
<img src="../img/7881/i03.png" width="100%" height="50%" onclick="location.href='list.html'" />
<img src="../img/7881/i04.png" width="100%" height="50%" onclick="location.href='login.html'" />
</div>
<div id="bottom">
<p align="center">
<input type="text" id="seach" onfocus="_focus()" onblur="_blur()" style="color: darkgrey;" />
<input type="button" value="搜索" onclick="clickme()" />
<br> (c) Copyright 2016 Administrator. All Rights Reserved.
</p>
</div>
</body>
2. 登录界面
- 效果图如下
-
login.html登录页主要代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function clickme() {
var name = document.getElementById("name").value;
var pass = document.getElementById("pass").value;
var reg = /^[\w]{6,12}$/;
if(name =="用户名：" || pass == "密码：" || !pass.match(reg)){
alert("用户名或密码错误");
}else{
location.href = "index.html";
}
}
function init() {
document.getElementById("name").value = "用户名：";
document.getElementById("pass").value = "密码：";
}
function name_focus() {
document.getElementById("name").value = "";
}
function pass_focus() {
document.getElementById("pass").value = "";
document.getElementById("pass").type = "password";
}
function name_blur() {
var name = document.getElementById("name").value;
if (name == "") {
document.getElementById("name").value = "用户名：";
} else {
document.getElementById("name").style.color = "black";
}
}
function pass_blur() {
var pass = document.getElementById("pass").value;
if (pass == "") {
document.getElementById("pass").value = "密码：";
document.getElementById("pass").type = "text";
} else {
document.getElementById("pass").style.color = "black";
}
}
</script>
<style>
.div_head {
width: 100%;
height: 50px;
background: #0073C3;
padding-top: 15px;
}
#img_back {
width: 25px;
height: 25px;
margin-top: 5px;
margin-left: 12px;
position: relative;
float: left;
}
#img_home {
position: relative;
float: right;
width: 32px;
height: 30px;
margin-top: 5px;
margin-right: 14px;
}
span {
font-size: 25px;
color: white;
font-family: "微软雅黑";
margin-top: 20px;
}
input {
width: 80%;
height: 20px;
margin: 8px;
padding: 10px;
color: #B2B2B2;
font-size: large;
}
#btn {
width: 85%;
background: #F9873C;
height: 50px;
color: white;
margin-top: 25px;
font-size: large;
}
#a_login {
position: relative;
float: left;
margin-left: 60px;
margin-top: 30px;
}
#a_regist {
position: relative;
float: right;
margin-right: 60px;
margin-top: 30px;
}
</style>
</head>
<body style="margin:0;background:#E4E4E4" id="body" onload="init()">
<div class="div_head">
<p align="center" style="margin-top: 0px;">
<a href="index.html">
<img src="../img/7881/back.png" id="img_back" />
</a>
<span>会员登录</span>
<a href="index.html">
<img src="../img/7881/home.png" id="img_home" />
</a>
</p>
</div>
<center style="margin-top: 20px; height: 200px;">
<input type="text" id="name" onfocus="name_focus()" onblur="name_blur()" />
<input type="text" id="pass" onfocus="pass_focus()" onblur="pass_blur()" />
<input type="button" value="登录" id="btn" onclick="clickme()" />
</center>
<div style="height: 80px;" align="center">
<p>
<a href="regist.html" id="a_login" style="text-decoration: none;">用户注册</a>
<a href="#" id="a_regist" style="text-decoration: none;">忘记密码</a>
</p>
</div>
<div style="height: 50px;" align="center">
<p>
<a href="index.html" style="text-decoration: none;">登录</a> |
<a href="regist.html" style="text-decoration: none;">注册</a> |
<a href="#body" style="text-decoration: none;">返回顶部</a>
</p>
</div>
<div align="center">
(c) 2014 m.7881.com
</div>
</body>
</html>3. 注册界面
- 效果图如下
-
regist.html注册页主要代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script>
function register() {
var pass = document.getElementById("pass");
var conpass = document.getElementById("conpass");
var reg = /^[\w]{6,12}$/;
var passValue = pass.value;
var conpassValue = conpass.value;
if (passValue == "密码：(6-12位英文或数字)" || conpassValue == "确认密码：") {
alert("密码不完整");
return;
}
if (passValue != conpassValue) {
alert("两次密码不一致！");
} else {
if (!passValue.match(reg)) {
alert("密码格式不对");
} else {
location.href = "index.html";
}
}
}
function init() {
document.getElementById("phone").value = "请输入你的手机号码：";
document.getElementById("pass").value = "密码：(6-12位英文或数字)";
document.getElementById("conpass").value = "确认密码：";
document.getElementById("phone_very").value = "请输入手机验证码";
}
function phone_focus() {
document.getElementById("phone").value = "";
}
function pass_focus() {
document.getElementById("pass").value = "";
document.getElementById("pass").type = "password";
}
function conpass_focus() {
document.getElementById("conpass").value = "";
document.getElementById("conpass").type = "password";
}
function very_focus() {
document.getElementById("phone_very").value = "";
}
function phone_blur() {
var phone = document.getElementById("phone").value;
if (phone == "") {
document.getElementById("phone").value = "请输入你的手机号码：";
} else {
document.getElementById("phone").style.color = "black";
}
}
function pass_blur() {
var pass = document.getElementById("pass").value;
if (pass == "") {
document.getElementById("pass").value = "密码：(6-12位英文或数字)";
document.getElementById("pass").type = "text";
} else {
document.getElementById("pass").style.color = "black";
}
}
function conpass_blur() {
var conpass = document.getElementById("conpass").value;
if (conpass == "") {
document.getElementById("conpass").value = "确认密码：";
document.getElementById("conpass").type = "text";
} else {
document.getElementById("conpass").style.color = "black";
}
}
function very_blur() {
var very = document.getElementById("phone_very").value;
if (very == "") {
document.getElementById("phone_very").value = "请输入手机验证码";
} else {
document.getElementById("phone_very").style.color = "black";
}
}
</script>
<style>
@import url("../css/head.css");
#phone,
#pass,
#conpass {
width: 90%;
margin: 8px;
padding: 10px;
color: #B2B2B2;
font-size: large;
}
#btn {
width: 95%;
background: #F9873C;
height: 50px;
color: white;
margin-top: 25px;
font-size: large;
}
#phone_very {
width: 50%;
position: relative;
float: left;
margin: 8px;
padding: 10px;
color: #B2B2B2;
font-size: large;
}
#btn_very {
width: 30%;
position: relative;
float: right;
height: 42px;
margin: 8px;
padding: 5px;
color: #E1E5D6;
background: #898989;
font-size: large;
}
.div_very {
width: 98%;
height: 60px;
}
</style>
</head>
<body style="margin:0;background:#E4E4E4" onload="init()">
<div class="div_head">
<p align="center" style="margin-top: 0px;">
<a href="index.html">
<img src="../img/7881/back.png" id="img_back" />
</a>
<span>会员注册</span>
<a href="index.html">
<img src="../img/7881/home.png" id="img_home" />
</a>
</p>
</div>
<center style="margin-top: 20px; height: 350px;">
<input type="phone" id="phone" value="请输入你的手机号码：" onfocus="phone_focus()" onblur="phone_blur()" />
<input type="text" id="pass" value="密码：(6-12位英文或数字)" onfocus="pass_focus()" onblur="pass_blur()" />
<input type="text" id="conpass" value="确认密码：" onfocus="conpass_focus()" onblur="conpass_blur()" />
<div class="div_very">
<input type="text" id="phone_very" value="请输入手机验证码" onfocus="very_focus()" onblur="very_blur()" />
<input type="button" id="btn_very" value="发送验证码" />
</div>
<input type="button" value="注册" id="btn" onclick="register()" />
</center>
<div style="height: 50px;" align="center">
<p>
<a href="login.html" style="text-decoration: none;">登录</a> |
<a href="regist.html" style="text-decoration: none;">注册</a> |
<a href="#body" style="text-decoration: none;">返回顶部</a>
</p>
</div>
<div align="center">
(c) 2014 m.7881.com
</div>
</body>
4. 物品详情页
- 效果图如下
-
list.html物品详情页主要代码如下
<head>
<meta charset="utf-8">
<title></title>
<style>
@import url("../css/head.css");
.continar {
background: white;
height: 410px;
width: 94%;
margin-top: 15px;
}
#btn {
width: 94%;
background: #F9873C;
height: 50px;
color: white;
margin-top: 15px;
font-size: large;
}
font {
position: relative;
float: left;
}
#backlist {
position: relative;
float: right;
}
</style><div class="div_head">
<p align="center" style="margin-top: 0px;">
<a href="index.html">
<img src="../img/7881/back.png" id="img_back" />
</a>
<span>忘仙</span>
<a href="index.html">
<img src="../img/7881/home.png" id="img_home" />
</a>
</p>
</div>
<center>
<div class="continar">
<p style="width: 80%; ">
<font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-top: 20px;margin-bottom: 10px;">寄</font>
<b><font color="#1873CC" size="4" style="padding: 5px;margin-top: 20px;font-family: '微软雅黑';margin-bottom: 10px;">7300银两=100元 即买即发</font></b>
</p>
<br/>
<hr width="80%" />
<p style="width: 80%; ">
<b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏名称：忘仙</font></b>
</p>
<br/>
<p style="width: 80%; ">
<b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏区服：三区/万剑逍遥</font></b>
</p>
<br/>
<p style="width: 80%; ">
<b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 游戏类型：游戏币</font></b>
</p>
<br/>
<p style="width: 80%; ">
<b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 单件数量：7300银两</font></b>
</p>
<br/>
<p style="width: 80%; ">
<b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';"> 商品单价：0.0135698515744元/银两</font></b>
</p>
<br/>
<p style="width: 80%; ">
<b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-bottom: 15px;"> 商品库存：1件</font></b>
</p>
<br/>
<br/>
<hr width="80%" />
<p style="width: 80%; ">
<b><font color="#FF6600" size="6" style="font-family: '微软雅黑';">￥100</font> </b>
<font id="backlist" color="#1873CC" size="5" style="font-family: '微软雅黑';margin: 4px;"><a href="list.html" style="text-decoration: none;">返回列表页</a></font>
</p>
<br/>
</div>
<a href="index.html" style="text-decoration: none;">
<input type="button" value="立即购买" id="btn" />
</a>
</center>
<div style="height: 50px;" align="center">
<p>
<a href="login.html" style="text-decoration: none;">登录</a> |
<a href="regist.html" style="text-decoration: none;">注册</a> |
<a href="#body" style="text-decoration: none;">返回顶部</a>
</p>
</div>
5. 手游交易界面
- 效果图如下
-
change.html手游交易界面主要代码如下
<head>
<meta charset="utf-8">
<title></title>
<style>
@import url("../css/head.css");
.tab {
background: white;
width: 90%;
border: solid thin #E4E4E4;
font-size: 20px;
color: #6F7383;
}
.more {
width: 100%;
height: 40px;
}
#moreGm {
position: relative;
float: right;
margin-right: 20px;
}
#left_content {
position: absolute;
margin-left: 22px;
}
#right_content {
position: absolute;
margin-left: 22px;
}
</style>
<script>
function showLeft() {
// 显示左边
document.getElementById("left_content").style.visibility = "visible";
document.getElementById("right_content").style.visibility = "hidden";
}
function showRight() {
// 显示右边
document.getElementById("right_content").style.visibility = "visible";
document.getElementById("left_content").style.visibility = "hidden";
}
</script>
</head>
<body style="margin:0;background:#E4E4E4">
<div class="div_head">
<p align="center" style="margin-top: 0px;">
<a href="index.html">
<img src="../img/7881/back.png" id="img_back" />
</a>
<span>手游交易</span>
<a href="index.html">
<img src="../img/7881/home.png" id="img_home" />
</a>
</p>
</div>
<center>
<table style="width: 100%; height: 30px; margin-top:30px ;font-size: 20px;color: #6F7383;">
<tr>
<th><a href="#" onclick="showLeft()" style="text-decoration: none;">热门游戏</a></th>
<th><a href="#" onclick="showRight()" style="text-decoration: none;">最近浏览</a></th>
</tr>
</table>
<hr width="90%" style="margin-top: 15px;margin-bottom: 15px;"></hr>
<div style="height: 200px;" align="center">
<table class="tab" id="left_content" border="1px" cellpadding="0px" cellspacing="0px">
<tr style="height: 50px;">
<td style="width: 50%"><font style="margin-left: 20px;">忘仙</font></td>
<td style="width: 50%"><font style="margin-left: 20px;">神魔</font></td>
</tr>
<tr style="height: 50px;">
<td style="width: 50%"><font style="margin-left: 20px;">仙变</font></td>
<td style="width: 50%"><font style="margin-left: 20px;">时空猎人</font></td>
</tr>
<tr style="height: 50px;">
<td style="width: 50%"><font style="margin-left: 20px;">神与魔</font></td>
<td style="width: 50%"><font style="margin-left: 20px;">九州OL</font></td>
</tr>
<tr style="height: 50px;">
<td style="width: 50%"><font style="margin-left: 20px;">世界OL</font></td>
<td style="width: 50%"><font style="margin-left: 20px;">诸神OL</font></td>
</tr>
</table>
<table id="right_content" class="tab" border="1px" cellpadding="0px" cellspacing="0px" style="visibility: hidden;">
<tr style="height: 50px;">
<td style="width: 50%"><font style="margin-left: 20px;">1</font></td>
<td style="width: 50%"><font style="margin-left: 20px;">2</font></td>
</tr>
<tr style="height: 50px;">
<td style="width: 50%"><font style="margin-left: 20px;">3</font></td>
<td style="width: 50%"><font style="margin-left: 20px;">4</font></td>
</tr>
<tr style="height: 50px;">
<td style="width: 50%"><font style="margin-left: 20px;">5</font></td>
<td style="width: 50%"><font style="margin-left: 20px;">6</font></td>
</tr>
<tr style="height: 50px;">
<td style="width: 50%"><font style="margin-left: 20px;">7</font></td>
<td style="width: 50%"><font style="margin-left: 20px;">8</font></td>
</tr>
</table>
</div>
</center>
<div class="more">
<b>
<p id="moreGm"><a href="#" style="text-decoration: none;"><font color="#1280C8">更多手机游戏>></font></a></p>
</b>
</div>
<div style="height: 50px;" align="center">
<p>
<a href="login.html" style="text-decoration: none;">登录</a> |
<a href="regist.html" style="text-decoration: none;">注册</a> |
<a href="#body" style="text-decoration: none;">返回顶部</a>
</p>
</div>
<div align="center">
(c) 2014 m.7881.com
</div>
</body>
6. 购物清单页
- 效果图如下
-
buy.html购买清单页主要代码如下
<head>
<meta charset="utf-8">
<title></title>
<script>
function clickme() {
var result = confirm("确认购买吗？");
if (result) {
alert("购买成功");
} else {}
}
</script>
<style>
@import url("../css/head.css");
.first {
background: white;
height: 140px;
width: 94%;
margin-top: 15px;
}
.second {
background: white;
height: 140px;
width: 94%;
margin-top: 5px;
}
.three {
background: white;
height: 140px;
width: 94%;
margin-top: 5px;
}
.decs {
position: relative;
float: left;
width: 220px;
height: 120px;
}
.buy {
position: relative;
float: right;
}
font {
position: relative;
float: left;
}
input {
width: 60px;
height: 30px;
background: #0073C3;
color: white;
font-size: 18px;
margin-right: 28px;
margin-top: 60px;
}
</style>
</head>
<body style="margin:0;background:#E4E4E4">
<div class="div_head">
<p align="center" style="margin-top: 0px;">
<a href="index.html">
<img src="../img/7881/back.png" id="img_back" />
</a>
<span>忘仙</span>
<a href="index.html">
<img src="../img/7881/home.png" id="img_home" />
</a>
</p>
</div>
<center>
<div class="first">
<div class="decs">
<p>
<font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px;">寄</font>
<b><font color="#1873CC" size="4" style="padding: 5px;margin-left: 2px;font-family: '微软雅黑';">7300银两=100元</font></b>
<font></font>
</p>
<p>
<b><font color="#FF6600" size="5" style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px;">￥100</font> </b>
</p>
<p>
<b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px;"> 三区/万剑逍遥/游戏币</font></b>
</p>
</div>
<div class="buy">
<input type="button" value="购买" onclick="clickme()" />
</div>
</div>
<div class="second">
<div class="decs" style="width: 240px;height: 120px;">
<p>
<font color="white" style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px;">寄</font>
<b><font color="#1873CC" size="4" style="padding: 5px;margin-left: 2px;font-family: '微软雅黑';">7300银两=100元</font></b>
<font></font>
</p>
<p>
<b><font color="#FF6600" size="5" style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px;">￥100</font> </b>
</p>
<p>
<b><font color="#424240" style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px;"> 三区/万剑逍遥/游戏币</font></b>
</p>
</div>
<div class="buy">
<input type="button" value="购买" onclick="clickme()" />
</div>
</div>
<div class="three">
<div class="decs">
<p>
<font color="white " style="background: #F770CF;padding: 5px;font-family: '微软雅黑';margin-left: 20px; ">寄</font>
<b><font color="#1873CC " size="4 " style="padding: 5px;margin-left: 2px;font-family: '微软雅黑'; ">7300银两=100元</font></b>
<font></font>
</p>
<p>
<b><font color="#FF6600 " size="5 " style="font-family: '微软雅黑';margin-top: 8px;margin-left: 20px; ">￥100</font> </b>
</p>
<p>
<b><font color="#424240 " style="padding: 2px;font-family: '微软雅黑';margin-top: 10px;margin-left: 20px; "> 三区/万剑逍遥/游戏币</font></b>
</p>
</div>
<div class="buy">
<input type="button" value="购买" onclick="clickme()" />
</div>
</div>
</center>
<div style="height: 50px; " align="center">
<p>
<a href="login.html " style="text-decoration: none; ">登录</a> |
<a href="regist.html " style="text-decoration: none; ">注册</a> |
<a href="#body " style="text-decoration: none; ">返回顶部</a>
</p>
<p>
<img style="width: 150px;height: 60px; " src="../img/7881/bottom.png " />
</p>
</div>
</body>