一、项目运行：HBuilder X
二、项目技术：1、广告随鼠标滚动二发生位置变化
2、漂浮广告
3、循环垂直向上滚动的特效
三、项目难点：购物车的系列操作
注：购买功能可以实现的前提是行列节点的获取正确，熟练运用单引号、双引号的套用！！！
四、界面展示：
首页界面：
图书界面：
登录界面：
注册界面：
五、代码展示：（函数部分）
主界面函数：
<script type="text/javascript">
//自动弹出广告（在页面第一次加载完毕时）；
//window.open("open.html");
//循环显示图片地址
//imgs——图片路径的数组
var imgs = new Array();
imgs[0] = "images/dd_scroll_1.jpg";
imgs[1] = "images/dd_scroll_2.jpg";
imgs[2] = "images/dd_scroll_3.jpg";
imgs[3] = "images/dd_scroll_4.jpg";
imgs[4] = "images/dd_scroll_5.jpg";
imgs[5] = "images/dd_scroll_6.jpg";
//nums——按钮标号的数组
var nums = new Array();
nums[0] = "scroll_number_1";
nums[1] = "scroll_number_2";
nums[2] = "scroll_number_3";
nums[3] = "scroll_number_4";
nums[4] = "scroll_number_5";
nums[5] = "scroll_number_6";
var Nowimg = 1;
var Maximg = 6;
function loopShow(id) {
if (Number(id)) {
Nowimg = id;
}
for (var i = 1; i < Maximg + 1; i++) {
if (i == Nowimg) {
document.getElementById("dd_scroll").src = imgs[i - 1]; //显示你当前选中的按钮所对应的图片
document.getElementById(nums[i - 1]).className = "scroll_number_over"; //设置当前按钮的CSS样式
} else {
document.getElementById(nums[i - 1]).className = "scroll_number_out"; //如果未选中该按钮则无光亮效果；
}
}
if (Nowimg == Maximg) { //判断是否为最后一个按钮
Nowimg = 1; //是的话就转为第一个按钮
} else {
Nowimg++; //随时递增
}
// var theTimer=setTimeout('loopShow()', 3000); //设置定时器，显示下一张图片
}
//最新上架的改变效果
//
var bookCate = new Array();
bookCate[0] = "book_history";
bookCate[1] = "book_family";
bookCate[2] = "book_culture";
bookCate[3] = "book_novel";
var bookClass = new Array();
bookClass[0] = "history";
bookClass[1] = "bj";
bookClass[2] = "culture";
bookClass[3] = "novel";
//发生改变的函数
function update(id) {
for (var i = 0; i < bookCate.length; i++) {
if (id == i) {
document.getElementById(bookCate[i]).className = 'book_show';
document.getElementById(bookClass[i]).className = 'book_type_out';
} else {
document.getElementById(bookCate[i]).className = "book_none";
document.getElementById(bookClass[i]).className = "book_type";
}
}
}
//广告随着鼠标的移动而发生变化的功能
var t;
var l;
var t1;
var l1;
var rightWidth = 100;
var rightWidth1 = 20;
//可见宽 Height
window.onload = function() {
//获取距离上面的距离初始值
//根据id找到广告图片
var myi = document.getElementById("dd_close");
var mys = document.getElementById('right1');
//区分浏览器
//拿到top值
if (myi.currentStyle != undefined) { //IE
t = myi.currentStyle.top;
l = myi.currentStyle.left;
t1 = mys.currentStyle.top;
l1 = mys.currentStyle.left;
} else { //非IE
t = document.defaultView.getComputedStyle(myi).top;
l = document.defaultView.getComputedStyle(myi).right;
t1 = document.defaultView.getComputedStyle(mys).top;
l1 = document.defaultView.getComputedStyle(mys).right;
}
//100px-->100
t = parseInt(t);
l = parseInt(l);
t1 = parseInt(t1);
l1 = parseInt(l1);
}
//检测鼠标滚动的事件
window.onscroll = function() {
//拿到图片
var myi = document.getElementById("dd_close");
var mys = document.getElementById('right1');
//获取滚动条距离上面/左边的距离
var gt = document.documentElement.scrollTop;
var gl = document.documentElement.scrollLeft;
//计算距离
var a = gt + t + "px";
var b = gl + parseInt(document.documentElement.clientWidth) - l - rightWidth1 + "px";
var a1 = gt + t1 + "px";
var b1 = gl + parseInt(document.documentElement.clientWidth) - l1 - rightWidth + "px";
//重新赋top值/left值确保跟着滚动条走
myi.style.top = a;
myi.style.left = b;
mys.style.top = a1;
mys.style.left = b1;
}
function myc() {
var myi = document.getElementById("dd_close");
var mys = document.getElementById('right1');
myi.style.display = 'none';
mys.style.display = 'none';
}
var theTimer = setInterval('loopShow()', 3000); //设置定时器，显示下一张图片
//书讯快递循环垂直向上滚动的文字特效
var dome = document.getElementById("dome");
var d1 = document.getElementById("dome1");
var dome2 = document.getElementById("dome2");
var speed = 50; //设置向上滚动速度
dome2.innerHTML = d1.innerHTML; //复制dome1为dome2
function moveTop() {
if (dome2.offsetTop - dome.scrollTop <= 0) //当滚动至dome1与dome2交界时
dome.scrollTop -= d1.offsetHeight //dome跳到最顶端
else {
dome.scrollTop++
}
}
var MyMar = setInterval(moveTop, speed) //设置定时器
dome.onmouseover = function() {
clearInterval(MyMar)
} //鼠标移上时清除定时器达到滚动停止的目的
dome.onmouseout = function() {
MyMar = setInterval(moveTop, speed)
} //鼠标移开时重设定时器，继续滚动
//漂浮广告
//定义全局变量
var moveX = 0; //X轴方向移动的距离
var moveY = 0; //Y轴方向移动的距离
var step = 1; //图片移动的速度
var directionY = 0; //设置图片在Y轴的移动方向
var directionX = 0; //设置图片在X轴的移动方向
function changePos() {
var img = document.getElementById("pf"); //图片所在层ID
var width = document.documentElement.clientWidth; //浏览器宽度
var height = document.documentElement.clientHeight; //浏览器高度
var imgHeight = document.getElementById("pftp").height; //漂浮图片高度
var imgWidth = document.getElementById("pftp").width; //漂浮图片宽度
img.style.left = parseInt(moveX + document.documentElement.scrollLeft) + "px"; //漂浮图片距浏览器左侧位置
img.style.top = parseInt(moveY + document.documentElement.scrollTop) + "px"; //漂浮图片距浏览器顶端位置
if (directionY == 0) {
moveY = moveY + step; //漂浮图片在Y轴方向上向下移动
} else {
moveY = moveY - step; //漂浮图片在Y轴方向上向上移动
}
if (moveY < 0) { //如果漂浮图片漂到浏览器顶端时，设置图片在Y轴方向上向下移动
directionY = 0;
moveY = 0;
}
if (moveY >= (height - imgHeight)) { //如果漂浮图片漂到浏览器底端时，设置图片在Y轴方向上向上移动
directionY = 1;
moveY = (height - imgHeight);
}
if (directionX == 0) {
moveX = moveX + step; //漂浮图片在X轴方向上向右移动
} else {
moveX = moveX - step; //漂浮图片在X轴方向上向左移动
}
if (moveX < 0) { //如果漂浮图片漂到浏览器左侧时，设置图片在X轴方向上向右移动
directionX = 0;
moveX = 0;
}
if (moveX >= (width - imgWidth)) { //如果漂浮图片漂到浏览器右侧时，设置图片在X轴方向上向左移动
directionX = 1;
moveX = (width - imgWidth);
}
}
setInterval("changePos()", 30);
</script>购物车部分：
<script type="text/javascript">
//显示和隐藏推荐图书
function gb(){
var img=document.getElementById("shopping_commend_arrow");
var tj =document.getElementById("shopping_commend_sort");
if(tj.style.display=='none'){//判断是否为隐藏或者显示
img.src="images/shopping_arrow_up.gif";//改变图标图片
tj.style.display='block';//如果为隐藏则改变为显示
}
else{
img.src="images/shopping_arrow_down.gif";//改变图标图片
tj.style.display='none';//如果为显示则改变为显隐藏
}
}
//购物车鼠标光亮效果
window.onload=function(){
var sp=document.getElementsByName("shopping_product_list");//一次性拿到所有的商品行
for(var i=0;i<sp.length;i++){
sp[i].onmouseover=function(){
this.style.backgroundColor="orange";
}
sp[i].onmouseout=function(){
this.style.backgroundColor="white";
}
}
ws();
mym();
}
//全选效果
function qx(){
//拿到全选框
var qx=document.getElementById("qx");
//拿到其余复选框对象
var qy=document.getElementsByName("qy");
//遍历让其余复选框的选中状态和全选框保持一致
for(var i=0;i<qy.length;i++){
qy[i].checked=qx.checked;
}
}
//完善全选功能
function ws(){
//拿到全选框
var qx=document.getElementById("qx");
//拿到其余复选框对象
var qy=document.getElementsByName("qy");
for (var i = 0; i < qy.length; i++) {
qy[i].onclick = function() {
var f = true;
//遍历其余复选框的状态发现了未选中则全选的状态为未选中
for (var i = 0; i < qy.length; i++) {
if (qy[i].checked == false) {
f = false;
break;
}
}
qx.checked = f;
}
}
}
//删除单个功能
function del(rid){
//拿到行对象
var row=document.getElementById(rid);
//拿到改行的下标
var index=row.rowIndex;
//拿到表格对象
var tab=document.getElementById("tableshopping");
//删除改行
tab.deleteRow(index);
mym();
}
//选中删除
function delall(){
//拿到其余复选框对象
var qy=document.getElementsByName("qy");
//遍历判断是否选中
for (var i = 0; i < qy.length; i++) {
if(qy[i].checked==true){
//获得改行的下标
var index=qy[i].value;
//调用删除单个的方法
del(index);
//下标改变
i--;
}
}
}
//改变商品的总价格
function mym(){
//拿到表格对象
var tab=document.getElementById("tableshopping");
//拿到表格所有行
var row=tab.rows;
//定义总价格
var sum =0;
//定义总积分
var sjf=0;
//定义总节省
var sjs=0;
//遍历所有行
for(var i=0;i<row.length;i++){
//拿到该行的所欲列
var cells=row[i].cells;
//拿到该行的价格
var hf=cells[3].lastChild.innerHTML;
hf=parseFloat(hf).toFixed(0);
//拿到该行的数量
var num=cells[4].childNodes[1].value;
//相乘
var yuan=hf*num;
sum+=yuan;
//拿到该行的积分
var jf=cells[1].innerHTML;
jf=parseFloat(jf);
jf=num*jf;
sjf+=jf;
sjf=sjf;
//拿到该行的节省
var js=cells[2].lastChild.innerHTML;
js=parseFloat(js);
js=num*js;
sjs+=js;
}
sjs=sjs-sum;
sjs=sjs.toFixed(0);
//拿到总价格的位置并赋值
document.getElementById("qian").innerHTML="¥"+sum;
//拿到总积分的位置并赋值
document.getElementById("jf").innerHTML=sjf;
//拿到总节省的位置并且赋值
document.getElementById("zjs").innerHTML=sjs;
}
//改变数量
function changeNum(rid,type){
//根据下标拿到改行
var row = document.getElementById(rid);
//拿到所有的列
var cs=row.cells;
//拿到第五列第2个孩子
var num = cs[4].childNodes[1].value;
//判断是否为加减
if(type=='add'){
num++;
}
else{
if(num>1){
num--;
}
else{
alert("数量应该最小为1");
}
}
cs[4].childNodes[1].value=num;
mym();
}
//购买的方法
var ids=7;
function add(rid){
var add="add";
var minus="minus";
//获得改行的代码
var row =document.getElementById(rid);
//获得书本名
var sname=row.childNodes[1].childNodes[1].innerHTML;
//获得市场价
var scj=row.childNodes[3].childNodes[1].innerHTML;
//获得当前价格
var jg=row.childNodes[5].childNodes[1].innerHTML;
//开始赋值
//拿到表格对象
var tab=document.getElementById("tableshopping");
//拿到表格所有行
var row=tab.rows;
//获得插入位置
var wz=row.length
//在该位置插入一行
var nrow=tab.insertRow(wz);
nrow.setAttribute("onmouseover","this.style.backgroundColor='orange'");
nrow.setAttribute("onmouseout","this.style.backgroundColor='white'");
nrow.name='shopping_product_list';
nrow.id='shoppingProduct_0'+ids+'';
nrow.className='shopping_product_list';
//插入第一列
var c0=nrow.insertCell(0);
//设置第一列的值
c0.className='shopping_product_list_1';
c0.innerHTML='<input type="checkbox" name="qy" value="shoppingProduct_0'+ids+'"/><a href="#"class="blue">'+sname+'</a></td>'
//插入第二列
var c1=nrow.insertCell(1);
//设置第二列的值
c1.className='shopping_product_list_2';
c1.innerHTML='<td>31</td>';
//插入第三列
var c2=nrow.insertCell(2);
//设置第三列的值
c2.className='shopping_product_list_3';
c2.innerHTML='¥<a>'+scj+'</a>';
//插入第四列
var c3=nrow.insertCell(3);
//设置第四列的值
c3.className='shopping_product_list_4';
//获得折扣
var zk=jg/scj*100+"";
zk=parseInt(zk);
c3.innerHTML='¥<a>'+jg+'('+zk+'折)</a>';
//插入第五列
var c4=nrow.insertCell(4);
//设置第五列的值
c4.className='shopping_product_list_5';
c4.innerHTML="<img src='images/taobao_minus.jpg' onclick=\"changeNum('"+'shoppingProduct_0'+ids+"','minus')\" class='hand'><input type='text' value='1'><img src='images/taobao_adding.jpg' onclick=\"changeNum('"+'shoppingProduct_0'+ids+"','add')\" class='hand'>";
//插入第六列
var c5=nrow.insertCell(5);
//设置第六列的值
c5.className='shopping_product_list_6';
c5.innerHTML='<a href=javascript:del("shoppingProduct_0'+ids+'"); class="blue">删除</a>';
ids++;
mym();
ws();
}
</script>注册界面：
<script type="text/javascript">
//所有的地区
var cityList = new Array();
cityList['北京市'] = ['朝阳区', '东城区', '西城区', '海淀区', '宣武区', '丰台区', '怀柔', '延庆', '房山'];
cityList['上海市'] = ['宝山区', '长宁区', '丰贤区', '虹口区', '黄浦区', '青浦区', '南汇区', '徐汇区', '卢湾区'];
cityList['广州省'] = ['广州市', '惠州市', '汕头市', '珠海市', '佛山市', '中山市', '东莞市'];
cityList['深圳市'] = ['福田区', '罗湖区', '盐田区', '宝安区', '龙岗区', '南山区', '深圳周边'];
cityList['重庆市'] = ['俞中区', '南岸区', '江北区', '沙坪坝区', '九龙坡区', '渝北区', '大渡口区', '北碚区'];
cityList['天津市'] = ['和平区', '河西区', '南开区', '河北区', '河东区', '红桥区', '塘古区', '开发区'];
cityList['江苏省'] = ['南京市', '苏州市', '无锡市'];
cityList['浙江省'] = ['杭州市', '宁波市', '温州市'];
cityList['四川省'] = ['四川省', '成都市'];
cityList['海南省'] = ['海口市'];
cityList['福建省'] = ['福州市', '厦门市', '泉州市', '漳州市'];
cityList['山东省'] = ['济南市', '青岛市', '烟台市'];
cityList['江西省'] = ['江西省', '南昌市'];
cityList['广西省'] = ['柳州市', '南宁市'];
cityList['安徽省'] = ['安徽省', '合肥市'];
cityList['河北省'] = ['邯郸市', '石家庄市'];
cityList['河南省'] = ['郑州市', '洛阳市'];
cityList['湖北省'] = ['武汉市', '宜昌市'];
cityList['湖南省'] = ['湖南省', '长沙市'];
cityList['陕西省'] = ['陕西省', '西安市'];
cityList['山西省'] = ['山西省', '太原市'];
cityList['黑龙江省'] = ['黑龙江省', '哈尔滨市'];
cityList['其他'] = ['其他'];
//获得所有的省份
window.onload = function() {
var sf = document.getElementById("sf");
for (var i in cityList) {
sf.add(new Option(i, i));
}
}
//获得所有的城市
function getcs() {
//获得省份
var sf = document.getElementById("sf").value;
var cs = document.getElementById("cs");
cs.length = 0;
//遍历数组
for (var i in cityList) {
if (sf == i) {
for (var j in cityList[i]) {
cs.add(new Option(cityList[i][j], cityList[i][j]));
}
}
}
}
//鼠标移上提交注册时光标改变
function ys() {
document.getElementById("registerBtn").src = "images/register_btn_over.gif";
}
//鼠标移除提交注册时光标改变
function yc() {
document.getElementById("registerBtn").src = "images/register_btn_out.gif";
}
//当鼠标在email框中时
function inEmail() {
//email框
var email = document.getElementById("email");
//傍边的提示框
var pb = document.getElementById("email_prompt");
email.className = "register_input register_input_Focus";
pb.innerHTML = "此邮箱将是您登录当当网的账号，并将用来接收验证邮件";
pb.className = "register_prompt";
}
//当鼠标在email框外时
function outEmail() {
//email框
var email = document.getElementById("email");
//傍边的提示框
var pb = document.getElementById("email_prompt");
//清空傍边的提示框
pb.innerHTML = "";
//定义正则
var reg = /^\w+@+\w+(\.[a-zA-Z]{2,3}){1,2}$/;
//判断是否为空
if (email.value == "") {
pb.innerHTML = "电子邮件是必填项，请输入您的Email地址";
pb.className = "register_prompt_error";
email.className = "register_input register_input_Blur";
return false;
}
if (reg.test(email.value) == false) {
pb.innerHTML = "电子邮件格式不正确，请重新输入";
pb.className = "register_prompt_error";
email.className = "register_input register_input_Blur";
return false;
}
pb.className = "register_prompt_ok";
email.className = "register_input";
return true;
}
//当鼠标在设置昵称框中时
function onName() {
var nickName = document.getElementById("nickName");
var nickNameId = document.getElementById("nickName_prompt");
nickName.className = "register_input register_input_Focus";
nickNameId.innerHTML = "昵称可由大小写英文字母、数字组成，长度为4-20个字符";
nickNameId.className = "register_prompt";
}
//当鼠标离开设置昵称框时
function outName() {
var nickName = document.getElementById("nickName");
var nickNameId = document.getElementById("nickName_prompt");
nickNameId.innerHTML = "";
var reg = /^[a-zA-Z0-9]{4,20}$/;
if (nickName.value == "") {
nickNameId.innerHTML = "昵称为必填项，请输入您的昵称";
nickNameId.className = "register_prompt_error";
nickName.className = "register_input register_input_Blur";
return false;
}
if (reg.test(nickName.value) == false) {
nickNameId.innerHTML = "昵称格式错误，请用大小写英文字母、数字，长度4-20个字符";
nickNameId.className = "register_prompt_error";
nickName.className = "register_input register_input_Blur";
return false;
}
nickNameId.className = "register_prompt_ok";
nickName.className = "register_input";
return true;
}
//鼠标在密码文本框中时
function onPwd() {
var pwd = document.getElementById("pwd");
var pwdId = document.getElementById("pwd_prompt");
pwd.className = "register_input register_input_Focus";
pwdId.innerHTML = "密码可由大小写英文字母、数字组成，长度6－20个字符";
pwdId.className = "register_prompt";
}
//鼠标离开密码文本框中时
function outPwd() {
var pwd = document.getElementById("pwd");
var pwdId = document.getElementById("pwd_prompt");
pwdId.innerHTML = "";
var reg = /^[a-zA-Z0-9]{6,20}$/;
if (pwd.value == "") {
pwdId.innerHTML = "密码为必填项，请设置您的密码";
pwdId.className = "register_prompt_error";
pwd.className = "register_input register_input_Blur";
return false;
}
if (reg.test(pwd.value) == false) {
pwdId.innerHTML = "密码格式错误，请用大小写英文字母、数字，长度6-20个字符";
pwdId.className = "register_prompt_error";
pwd.className = "register_input register_input_Blur";
return false;
}
pwdId.className = "register_prompt_ok";
pwd.className = "register_input";
return true;
}
//鼠标在再输入一次密码文本框中时
function onPwd2() {
var repwd = document.getElementById("repwd");
repwd.className = "register_input register_input_Focus";
}
//鼠标离开再输入一次密码文本框中时
function outPwd2() {
var pwd = document.getElementById("pwd");
var repwd = document.getElementById("repwd");
var repwdId = document.getElementById("repwd_prompt");
repwdId.innerHTML = "";
if (repwd.value == "") {
repwdId.innerHTML = "请再次输入您的密码";
repwdId.className = "register_prompt_error";
repwd.className = "register_input register_input_Blur";
return false;
}
if (pwd.value != repwd.value) {
repwdId.innerHTML = "两次输入密码不一致，请重新输入";
repwdId.className = "register_prompt_error";
repwd.className = "register_input register_input_Blur";
return false;
}
repwdId.className = "register_prompt_ok";
repwd.className = "register_input";
return true;
}
function tj() {
outEmail();
outName();
outPwd();
outPwd2();
var flagEmail = outEmail();
var flagNickName = outName();
var flagPwd = outPwd();
var flagRepwd = outPwd2();
if (flagEmail == true && flagNickName == true && flagPwd == true && flagRepwd == true) {
alert("注册成功！您是当当图书网的1位用户，祝您生活愉快");
return true;
} else {
return false;
}
}
</script>
5326
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
