javaWeb课程实验1---客户端html,css,js基础

前言

这周开始javaWeb实验课程,记录下每个实验完成的小作业

实验内容

熟悉html,css,javascript前端技术的使用

项目涉及技术

语言:html,css,javascript
框架::bootstrap

项目内容

1.2、实现功能

• 1.2.1、网络图片浏览功能
  网络图片来自免费的开放api
• 1.2.2、用户登录功能
  利用cookie实现本地端的登录(部分浏览器不支持,可使用firefox)
• 1.2.3、用户注册功能
  利用cookie实现本地用户信息保存(部分浏览器不支持,可使用firefox)

1.3、核心代码

代码已上传gitHub:链接

• 1.3.1、图片浏览功能

		Js: var imageList = document.getElementById("imageList");
    for (let i = 0; i < 30; i++)
        setTimeout(getImage, i * 800, i)

    function getImage(i) {

        var url = "https://uploadbeta.com/api/pictures/random/?key=BingEverydayWallpaperPicture&n=" + i;
        var html = "<div class='box'>" +
            "<div class = 'image'>" +
            "<a href='#' class='thumbnail'>" +
            "<img src = '" + url + "'  οnerrοr='" + url + "&e=" + i + "' >" +
            "</a>" +
            "</div>" +
            "</div>"

        imageList.innerHTML += html
    }

• 1.3.2、登录

function login() {
    var strExp = /^[a-z0-9]+$/
    var userName = document.getElementById("userName").value;
    var password = document.getElementById("password").value;
    if (strExp.test(password)) {
        if (strExp.test(userName) && searchUserFromCookie(userName, password)) {
            window.location.replace("right.html")

        } else
            alert("账号或密码错误")
    } else
        alert("信息有误")

}

• 1.3.3、注册

function sign() {
    var strExp = /^[a-z0-9]+$/
    var userName = document.getElementById("userName").value;
    var password = document.getElementById("password").value;
    var repassword = document.getElementById("repassword").value;
    if (strExp.test(password) && strExp.test(repassword)) {
        if (strExp.test(userName)) {
            if (password == repassword) {
                addUserToCookie(userName, password);
                window.location.replace("right.html");
            } else if (password == null)
                alert("密码不能为空")
            else
                alert("密码不一致")


        } else
            alert("用户名格式错误")
    } else
        alert("信息有误")

}

1.4、各页面及功能展示

1.4.1、图片浏览功能

1.4.2、登录

1.4.3、注册