澳门新浦京8455com网页设计——精品商城

澳门新浦京8455com 32

帝国CMS默认注册是没有 会员注册协议的。

运行效果

三、搭建网站后台管理页面

  • 使用框架结构标签<frameset>可以使同一个浏览器窗口中显示不止一个页面

澳门新浦京8455com 1

澳门新浦京8455com 2

效果图

  • 实现左边框架超链接打开的页面显示在右边框架中的代码如下

    澳门新浦京8455com 3

    Paste_Image.png

澳门新浦京8455com ,好吧,其实这是用到JS代码来控制的。

初始状态

澳门新浦京8455com 4

初始表单.png

**说明 :
**初始时,浏览器未保存Cookie,JS给各个表单赋空值,赋复选框未勾选状态


本文使用简单的 html标签+div+css+JavaScript
实现带有表单提交和图片轮播效果的商城网站设计,效果如下图,源码下载github链接(以下仅列举设计过程中的部分注意点)

完整表单代码:

引用


参照简书 – 纯JS操作Cookie

  • 添加Cookie

setCookie ( name, value, expdays )

  • 获取Cookie

getCookie ( name )

  • 删除Cookie

delCookie ( name )

源码下载

github链接

form action=/e/enews/index.php method=post enctype=multipart/form-data name=userinfoform id=userinfoforminput type=hidden name=enews value=register /input name=groupid type=hidden id=groupid value=?=$groupid? class=input_text /input type=hidden name=ecmsfrom value=/e/DoInfo/ChangeClass.php?mid=12div class=menuh3strong基本信息/strong (必填)/h3/divtable width=100% border=0 cellpadding=0 cellspacing=0trtd class=left用户名/tdtdinput name=username type=text class=input_text id=username size=20 maxlength=30 /*/td/trtrtd class=left密码:/tdtdinput name=password type=password class=input_text id=password size=21 maxlength=20 /*/td/trtrtd class=left重复密码:/tdtdinput name=repassword type=password id=repassword size=21 maxlength=20 class=input_text /*/td/trtrtd class=left邮箱:/tdtdinput name=email type=text class=input_text id=email value= size=30 maxlength=50 /*/td/tr/tabletable width=100% border=0 cellpadding=0 cellspacing=0 tr? if($public_r[regkey_ok]) { ?td class=left验证码:/tdtdinput name=key type=text class=input_text size=10 /nbsp;img src=../../ShowKey/?v=reg align=absmiddle //td/tr? } ? tr td class=leftnbsp;/td tdinput id=checked type=checkbox /label for=checked注册/label/td/trtrtd class=leftnbsp;/tdtdinput type=submit id=register name=Submit value=注 册 class=input_sub/nbsp;nbsp;input type=button name=Submit2 value=返 回 class=input_sub onclick=history.go(-1) //td/tr/table/formscript type=text/javascriptvar checked=document.getElementById(checked)var register=document.getElementById(register)register.onclick=function(){ if(checked.checked==true){ alert(可以注册了) } else{ return false } }/script
提交表单,返回

澳门新浦京8455com 5

记住了账号密码.png

**说明 : **浏览器成功保存了用户名与密码


一、搭建网站首页

  • 首页的所有内容可以放置在一个大的table标签中,再通过嵌入表格划分模块,并使用div+css在各个模块中添加居中等css效果

    澳门新浦京8455com 6

    整体布局

澳门新浦京8455com 7

一行三列表格添加模块内容

  • 商品列表模块添加图片
    如下图在table的单元格中插入图片可以居中显示,且在下方有文字说明

    澳门新浦京8455com 8

    商品列表效果图

需要使用align的居中属性,并设置width的值为百分比  

![](https://upload-images.jianshu.io/upload_images/2762413-7295ad3b16474f05.png)

代码实现

当然,我们在注册页面直接写入注册协议也是很简单的。

提交检查函数

点击submit按钮时,会调用此函数

function check ()
{
    //获取表单输入:用户名,密码,是否保存密码
    var username = document.getElementById("username").value.trim() ;
    var password = document.getElementById("password").value.trim() ;
    var isRmbPwd = document.getElementById("isRmbPwd").checked ;

    //判断用户名,密码是否为空(全空格也算空)
    if ( username.length != 0 && password.length != 0 )
    {
        //若复选框勾选,则添加Cookie,记录密码
        if ( isRmbPwd == true )
        {   
            setCookie ( "This is username", username, 7 ) ;
            setCookie ( username, password, 7 ) ;
        }
        //否则清除Cookie
        else
        {
            delCookie ( "This is username" ) ;
            delCookie ( username ) ;
        }
        return true ;
    }
    //非法输入提示
    else
    {
        alert('请输入必填字段!!!')
        return false ;
    }   
}

六、JS实现图片轮播

  • 定时器:BOM浏览器对象模型中window窗口对象的定时器方法,
    结果都将返回一个唯一的id值,一般用于清除定时器

setInterval("run",3000)方法为每隔3秒执行一次run方法
setTimeout("run",3000)方法为3秒后执行一次run方法
  • 在body标签中添加onload事件,并绑定一个带有定时器和更换图片源文件位置的函数

    澳门新浦京8455com 9

    设置定时器和改变图片资源文件目录的函数

  • 套用jquery代码实现手风琴轮播效果

![](https://upload-images.jianshu.io/upload_images/2762413-ec35952c9f2397f7.png)

效果图:

澳门新浦京8455com 10

image.png

如图所示,如果不勾选同意注册协议 注册按钮
将无法点击,只有勾选了同意注册协议才能正常注册。

此时,浏览器就不再保存Cookie了

澳门新浦京8455com 11

最终结果.png

澳门新浦京8455com 12

但追求完美的我们,更需要 勾选同意注册协议才能注册。如下图:

代码说明


七、JS实现页面定时弹出广告

  • 预期效果:与JS实现轮播图片相同,通过onload绑定一个显示图片的定时操作函数,计时结束后执行显示广告图片函数,之后清除定时操作,再重新隐藏广告图片

  • 使用 display属性的block/none值 在页面指定位置 显示/隐藏
    一个广告图片

    澳门新浦京8455com 13

    display属性

  • 清除定时操作

    澳门新浦京8455com 14

    clearInterval方法介绍

  • 特别注意setInterval方法返回的id值赋值给的成员变量不能用var修饰,因为JS的函数中如果成员变量用var修饰的话就成为局部变量,则不能在其他函数中调用

    澳门新浦京8455com 15

    var与成员变量.png

说明:

键入用户名密码,未勾选复选框

澳门新浦京8455com 16

表单键入,未勾选.png

九、JS完成表单各行换色与高亮

  • 表格标签中包含的 thead, th ,tbody 标签

    澳门新浦京8455com 17

    表格标签

  • JS可以书写匿名函数

  • 注意当一个script标签中书写两个相同的 window.onload = funciton(){}
    ,则最新的会覆盖之前的

![](https://upload-images.jianshu.io/upload_images/2762413-7ccc2676475e8ddf.png)

JS的匿名函数
  • 通过onmouseover/onmouseout
    鼠标悬停和移除事件设置表格当前行数高亮

  • 获取标签后设置css样式

![](https://upload-images.jianshu.io/upload_images/2762413-9c2d9373201fc697.png)

获取标签并修改css样式

也就是提交表单按钮,给加上 id=register 。

文档初始化函数

文档加载完毕后,执行此函数

//将function函数赋值给onload对象
window.onload = function ()
{
    //从Cookie获取到用户名
    var username = getCookie("This is username") ;
    //如果用户名为空,则给表单元素赋空值
    if ( username == "" )
    {
        document.getElementById("username").value="" ;
        document.getElementById("password").value="" ;
        document.getElementById("isRmbPwd").checked=false ;
    }
    //获取对应的密码,并把用户名,密码赋值给表单
    else
    {
        var password = getCookie(username) ;

        document.getElementById("username").value = username ;
        document.getElementById("password").value = password ;
        document.getElementById("isRmbPwd").checked = true ;
    }
}

二、搭建网站注册页面

  • 表单标签:所有需要提交到服务器端的表单项必须使用<form></form>括起来

    澳门新浦京8455com 18

    注册页面

  • 表单提交的是value里的内容,所以表单中除了file类型都需要设置value值用于上传到后台

    澳门新浦京8455com 19

    设置value

  • 默认勾选属性在option标签中是selected而不是checked

    澳门新浦京8455com 20

    默认勾选属性

  • 按钮不需要name属性
![](https://upload-images.jianshu.io/upload_images/2762413-4938edd5b2af35a4.png)

按钮不需要name属性

  • H5有required属性,规定该文本区域是必填的
script type=text/javascriptvar checked=document.getElementById(checked)var register=document.getElementById(register)register.onclick=function(){ if(checked.checked==true){ alert(可以注册了) } else{ return false } }/script
此时再去掉复选框勾选状态,提交

澳门新浦京8455com 21

去掉复选框勾选.png

四、JS完成表单校验

  • 在form标签添加onsubmit事件,并为其绑定一个函数

    澳门新浦京8455com 22

    onsubmit绑定js函数

  • 书写函数,用于获取用户输入的数据(获取数据时需要在指定位置定义一个id

  • 对用户输入的数据进行判断(使用document.getElementById(“”).value与判断值比较)

    澳门新浦京8455com 23

    书写值判断函数.png

  • 控制表单提交:若输入数据非法,提示错误信息并通过返回一个false阻止表单提交

    澳门新浦京8455com 24

    返回false则表单提交失败.png

  • 利用正则表达式验证邮箱

澳门新浦京8455com 25

正则表达式验证邮箱

然后调用JS

提交,返回到表单页面

澳门新浦京8455com 26

回到表单页面.png

**说明 :
**未勾选保存密码复选框,JS只提交表单到指定Action,未保存Cookie,同上


精品小屋首页.jpg

很多登录功能上都有个“记住密码”的功能,其实无非就是对cookie的读取。

五、bootstrap的登入表单

  • 在html头中引入bootstrap库文件
![](https://upload-images.jianshu.io/upload_images/2762413-07731a3f1e9d32a7.png)
  • 在body中写入登入表单代码
![](https://upload-images.jianshu.io/upload_images/2762413-073c327d039af92c.png)

image.png
键入用户名密码,未勾选复选框

澳门新浦京8455com 27

键入表单,勾选.png

八、用JS完善注册表单校验

  • 在input标签中添加onclick聚焦事件onblur离焦事件,完成当鼠标点击输入框和鼠标点击另一个输入框后提示不同的内容

    澳门新浦京8455com 28

    表单验证效果

  • 代码重用:相同的代码不变,不同的代码用变量代替

    澳门新浦京8455com 29

    代码重用

form表单

<!-- 登陆表单 -->
<form method="post" autocomplete="off" onsubmit="return check()">
  <!-- 用户名输入 -->
  <input type="text"  name="username" id="username" required="required" >
  <!-- 密码输入,禁用自动填充 -->
  <input type="password" autocomplete="new-password" name="password" id="password" required="required">
  <!-- 是否记住密码复选框 -->
  <input type="checkbox" id="isRmbPwd" name="isRmbPwd" checked="checked">记住密码
  <!-- 提交按钮 -->
  <input type="submit" value="提交">
</form>

十、使用JS完成注册表单的省市二级联动

  • onchange:当用户改变内容时使用这个事件(二级联动)

  • 使用方法传参的方式:this.value
    获取用户选择的省份的value值,this代表当前操作对象

    澳门新浦京8455com 30

    this.value传递选择选项的value值

  • 使用一个二维数组来储存省份和城市(从数据库中导入),并通过遍历数组来获取省份与用户选择的省份比较,如果相同了继续遍历该省份下所有的城市。

    澳门新浦京8455com 31

    创建二维数组.png

  • DOM文档对象模型创建节点、文本节点、添加子节点等常用的方法

    澳门新浦京8455com 32

    DOM常用方法.png

  • JS内置对象中Array对象的数组长度可变,数组的长度为最大角标加1

You can leave a response, or trackback from your own site.

Leave a Reply

网站地图xml地图