鲜花网站pc端

使用原生js开发的网站

首页 

首页部分源码

轮播图源码

  //轮播图js
    //获取标签
    var slider = document.getElementById('slider');
    var slider_main = document.getElementById('slider_main');
    var allBoxs = slider_main.children;
    var next = document.getElementById('next');
    var prev = document.getElementById('prev');
    var slider_index = document.getElementById('slider_index');
    var iNow = 0; //当前可视元素的索引
    var timer = null;
    //动态创建索引器
    for (var i = 0; i < allBoxs.length; i++) {
        //创建span标签当作索引器
        var span = document.createElement('span');
        //给索引器动态赋值类名
        if (i === 0) {
            //给索引器的第一个索引动态赋值类名
            span.className = 'slider_index_icon current';
        } else {
            span.className = 'slider_index_icon';
        }
        //给索引器动态添加索引数
        span.index = i + 1;
        //把索引器添加到索引栏里
        slider_index.appendChild(span);
    }
    //3.让滚动的元素归位
    var scroll_w = parseInt(getStyle(slider, 'width'));
    console.log(scroll_w);
    for (var j = 1; j < allBoxs.length; j++) {
        allBoxs[j].style.left = scroll_w + 'px';
    }
    //监听下一张按钮的事件
    next.onclick = function() {
        /**
         * 1.让当前可视元素动画左移
         * 2.让下一张图片 快速的显示到右边
         * 3.让这个元素动画进入
         */
        startAnimation(allBoxs[iNow], {
            "left": -scroll_w
        })

        //让iNow更新
        iNow++;
        if (iNow >= allBoxs.length) {
            iNow = 0;
        }
        allBoxs[iNow].style.left = scroll_w + 'px';
        startAnimation(allBoxs[iNow], {
                "left": 0
            })
            //改变索引
        changeIndex();
    }

    //监听上一张按钮的事件
    prev.onclick = function() {

        startAnimation(allBoxs[iNow], {
            "left": scroll_w
        })


        iNow--;
        if (iNow < 0) {
            iNow = allBoxs.length - 1;
        }
        allBoxs[iNow].style.left = -scroll_w + 'px';
        startAnimation(allBoxs[iNow], {
                "left": 0
            })
            //改变索引
        changeIndex();
    }

    //开启定时器 自动播放
    timer = setInterval(autoPlay, 2000);

    //自动播放封装代码
    function autoPlay() {

        startAnimation(allBoxs[iNow], {
            "left": -scroll_w
        })

        iNow++;
        if (iNow >= allBoxs.length) {
            iNow = 0;
        }
        allBoxs[iNow].style.left = scroll_w + 'px';
        startAnimation(allBoxs[iNow], {
            "left": 0
        })

        changeIndex();
    }

    //清除定时器
    slider.onmouseover = function() {
        clearTimeout(timer);
    }
    slider.onmouseout = function() {
        timer = setInterval(autoPlay, 2000);
    }
    var slider_index_icons = slider_index.children;
    //遍历索引器，添加鼠标按下去的监听事件
    for (var i = 0; i < slider_index_icons.length; i++) {
        slider_index_icons[i].onmousedown = function() {
            //获取当前点击索引
            var index = parseInt(this.index) - 1;

            //点击的索引与当前的iNow进行对比
            if (index > iNow) {
                //下一个操作
                startAnimation(allBoxs[iNow], {
                    'left': -scroll_w
                })
                allBoxs[index].style.left = scroll_w + 'px';
            } else if (index < iNow) {
                //上一个操作
                startAnimation(allBoxs[iNow], {
                    'left': scroll_w
                })
                allBoxs[index].style.left = -scroll_w + 'px';
            }
            iNow = index;
            startAnimation(allBoxs[iNow], {
                "left": 0
            })

            changeIndex();
        }
    }

    //控制当前的索引
    function changeIndex() {
        for (var i = 0; i < slider_index_icons.length; i++) {
            slider_index_icons[i].className = 'slider_index_icon';
        }
        slider_index_icons[iNow].className = 'slider_index_icon current';
    }

导航栏源码 

  <!-- 顶部导航模块 -->
    <div class="nb">
        <div class="navw">
            <div class="fl">
                <ul>
                    <li>花乐鲜购欢迎您!</li>
                    <li>
                        <span class="txr"></span>
                        <span class="yhm">李bb</span>

                    </li>
                    <li class="wxin"><span class="iconfont">&#xe70e;</span>
                        <a href="">关注微信平台</a>
                        <div class="dropdown-weixin">
                            <img src="images/erweima.png" height="80" width="80">

                        </div>
                    </li>


                </ul>
            </div>
            <div class="fri">
                <ul>
                    <li><a href="">订单查询</a><b></b></li>

                    <li><a href="">花言花语</a>

                        <b></b>
                    </li>

                    <li><a href="">烂漫贺卡</a><b></b></li>

                    <li><a href="">常见问题</a><b></b></li>


                    <li><a href="">关于我们</a>
                        <b></b>
                    </li>

                    <li><a href="">站点导航</a>

                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!-- header头部制作 -->
    <div class="header w">
        <!-- Logo模块 -->
        <div class="logo">
            <h1>
                <a href="index.html" title="花乐鲜购">花乐鲜购</a>
            </h1>
        </div>
        <!-- search搜索模块 -->
        <div class="search">
            <span class="iconfont iconstyle_red">&#xe604;</span>
            <input type="search" name="" id="" placeholder="请输入关键词搜索" />
            <button type="button">搜索</button>
        </div>

        <!-- hotwords (热点词) 模块制作 -->
        <div class="hotwords">
            <a href="#">爱情鲜花</a>
            <a href="#">开业花篮</a>
            <a href="#">生日鲜花</a>
            <a href="#">鲜花礼盒</a>
            <a href="#">情人节</a>
            <a href="#">绿植</a>
            <a href="#">送父母</a>
            <a href="#">送女朋友</a>
        </div>

 侧边栏部分

 

 //客服侧边栏监听

    //获取标签
    var kefuaside = document.getElementById('kefuaside');
    //获取广告盒子的偏移量
    var kefuaside_top = kefuaside.offsetTop;

    var return_top = document.getElementById("return_top");
    var sTop;

    //滚轮滑动条的监听事件
    window.onscroll = function() {
        //获取页面滚动的高度
        var docScrollTop = document.documentElement.scrollTop || document.body.scrollTop;
        //开启动画
        startAnimation(kefuaside, { "top": docScrollTop + kefuaside_top });
    }

    //侧边栏按钮
    //获取标签
    var gdbox = document.getElementById('gdbox');
    var gdallBoxs = gdbox.children;
    var gdaside = document.getElementById('gdaside');
    var gdlis = gdaside.children;
    var isClick = false; //默认没有被点击



    for (var j = 0; j < gdlis.length; j++) {
        gdlis[j].index = j; //给每一个li标签的索引赋值为j
        //为每一个li标签绑定点击事件
        gdlis[j].onclick = function() {
            isClick = true; //点击
            //点击后，清除每一个li标签原有的类名
            for (var k = 0; k < gdlis.length; k++) {
                gdlis[k].className = '';
            }
            //点击后，给每一个li标签附上新类名
            this.className = 'gdcurrent in';
        }

    }

注册和登录页面

 

 注册和登录页面部分源码

  <!-- 登录页面 -->
    <div class="w">
        <!-- 登录页面的商城logo -->
        <div class="logo">
            <a href="index.html"><img src="images/rglogo.png" class="logoimg" alt=""></a>
        </div>
        <!-- 头部横线 -->
        <header> </header>

        <!-- 登录主盒子 -->
        <div class="loginarea">
            <h3>欢迎登陆花乐鲜购商城
                <a class="register" href="register.html">没有账号，免费去注册一个</a>
            </h3>
            <!-- 登录次盒子 -->
            <div class="loginBox">
                <div class="loginContent">
                    <form action="LoginServlet" method="post">
                        <ul>
                            <li class="loginTit">手机号：</li>
                            <li><input type="text" class="loginInp" id="uname" name="userName"></li>
                            <li class="loginTit">密码:</li>
                            <li><input type="password" class="loginInp" id="upass" name="pwdName" placeholder="6-12位字符"></li>
                            <li class="loginTit">验证码:</li>
                            <li><input type="text" class="loginInp yzhm" id="yzhm" name="yzhm" placeholder="请输入验证码">
                                <img src="images/yzm.jpg" class="yzm-img" />
                            </li>
                            <li><span id="error_box"></span></li>
                            <li class="autoLogin fl"><input type="checkbox" id="a1" class="checked"><label for="a1">自动登录</label>
                                <li class="tranReg fr"><a href="register.html">点击注册</a></li>
                                <li><input type="submit" class="login_btn" value="登 &nbsp; &nbsp; &nbsp; 录" onclick="fnLogin()" /></li>
                        </ul>
                    </form>
                </div>
            </div>
        </div>