前端项目——当当图书网（javaScript）
2024-04-03 23:48:20
一、项目运行：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;//可见宽 Heightwindow.onload = function() {//获取距离上面的距离初始值//根据id找到广告图片var myi = document.getElementById("dd_close");var mys = document.getElementById('right1');//区分浏览器//拿到top值if (myi.currentStyle != undefined) { //IEt = myi.currentStyle.top;l = myi.currentStyle.left;t1 = mys.currentStyle.top;l1 = mys.currentStyle.left;} else { //非IEt = document.defaultView.getComputedStyle(myi).top;l = document.defaultView.getComputedStyle(myi).right;t1 = document.defaultView.getComputedStyle(mys).top;l1 = document.defaultView.getComputedStyle(mys).right;}//100px-->100t = 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为dome2function 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"); //图片所在层IDvar 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="data:images/shopping_arrow_up.gif";//改变图标图片tj.style.display='block';//如果为隐藏则改变为显示}else{img.src="data: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>前端项目——当当图书网（javaScript）相关推荐
- 前端项目——当当书网(js项目)
一.编译器:HBuilderX 运行:各种浏览器 二.项目技术:1.广告随鼠标滚动而发生位置变化 2.循环向上垂直特效 三.项目中的难点:购物车的相关系列操作 界面要求:1.实现点击收起 2.实现点 ...
- WEB前端项目实战/酒仙网开发-李强强-专题视频课程
WEB前端项目实战/酒仙网开发-204人已学习 课程介绍 WEB前端项目实战/酒仙网开发 课程收益 WEB前端项目实战/酒仙网开发 讲师介绍 李强强 更多讲师课程 ...
- python scrapy框架爬虫当当图书网
最近在复习scrapy框架,就随便找了个网站做了一下爬虫,当当网,说实话这种网站还是比较好做爬虫的,我没加代理,也没限速,没写多线程,就直接搞下来了,数据量还是比较可观的.接下来进入正题: 先看一下整 ...
- Gitlab CI/CD教程以及实战docker自动部署前端项目（全）
目录 前言 1. 技术知识 1.1 docker安装gitlab 1.2 docker安装gitlab-runner 1.3 .gitlab-ci.yml编写 1.4 使用docker部署前端项目 1 ...
- 一个简单的图书网店项目
GitHub下载地址:https://github.com/mdxiaohu/onlineBookstoreSystem 图书网店项目部署说明 一.所需环境 1.win7 系统 (已装JDK1.6以上 ...
- 前端项目课程6 做酒仙网顶部注意事项有哪些
前端项目课程6 做酒仙网顶部注意事项有哪些 一.总结 一句话总结: 1.css样式代码搁在那? 先搁在本页面,后面很多的时候在一次剪过去 2.如何给页面部分的什么ceo邮箱.社区.电话等字体变成红色? ...
- nodejs+gulp内网前端项目代码打包解决手动清空浏览器缓存问题（一）
nodejs+gulp内网前端项目代码打包解决手动清空浏览器缓存问题 项目介绍 打包工具选择 环境搭建 使用gulp 项目介绍 项目前端框架是jquery+miniUI框架,它存在不少问题,但是我们的 ...
- 前端趋势榜：上周最热门的 10 大前端项目 - 210327
大家好,我是你们的 猫哥,那个不喜欢吃鱼.又不喜欢喵 的超级猫 ~ 关于猫哥,大家可以看看我的年终总结 前端工程师的 2020 年终总结 - 乾坤未定,你我皆黑马. 猫哥从 2016 年加入 GitH ...
- 精选 GitHub 值得收藏的100个前端项目
作者:小明小明长大了 博客:https://www.jianshu.com/p/72ca8192f7b8 引言 整理与收集的一些比较优秀github项目,方便自己阅读,顺便分享出来,大家一起学习,作者 ...
- 为什么vue前端项目要使用nodejs
一.传统的JavaScript 传统的js是运行在浏览器上的,因为浏览器内核分为两个部分: 渲染引擎---渲染HTML和CSS, JavaScript 引擎---负责运行 JavaScript 随着技 ...
最新文章
- Kubernetes学习笔记三：Docker安装，Docker使用，编写Dockerfile，制作容器镜像，上传docker镜像
- 将多窗体应用程序改造为仿Chrome形式的简易方法
- 《MacTalk•人生元编程》导读
- mysql 关键词相关度排序方法详细示例分析
- 原码 反码 补码 详解
- 微信墙服务器地址,一面微信墙的诞生(3) 用户端界面的创建
- python模块导入视频教程_63-知识点回顾-函数和导入模块
- 苹果一体机系统恢复_趁双十一大促销，赶紧升级苹果一体机升级SSD固态和液态内存吧...
- Python 树莓派 引脚
- 如何使用flex布局，实现三个div垂直居中布局
- python 爬阳光高考高校数据
- matlab中abs是什么函数,abs是什么函数(excel表格abs公式)
- rabbitMQ的使用概述及使用rabbitMQ进行短信验证码发送案例
- JButton部分常用的方法
- oracle计算两个日期相隔月数,计算日期相差
- 数学加强 第一节 第三课
- phpts以及nts版本到底该怎么选择
- SpringBoot整合Mybatis3 Dynamic Sql（IDEA）
- Simple-fasterrcnn源码学习笔记（4）
- Java最小公倍数和最大公因数_详细介绍java中最小公倍数与最大公约数