javaweb_day2_JavaScript

最新推荐文章于 2022-03-30 10:20:24 发布

guoyebing

最新推荐文章于 2022-03-30 10:20:24 发布

阅读量309

点赞数

分类专栏： java复习

本文链接：https://blog.csdn.net/lushizhuo9655/article/details/97872875

版权

java复习专栏收录该内容

23 篇文章 0 订阅

订阅专栏

ECMAScript：语法，语句

BOM：浏览器对象模型

DOM：文档对象模型（操作文档中的元素和内容）

数组中的join()方法:把数组中所有元素放入一个字符串,元素通过指定的分隔符进行分隔,默认是逗号(,)

push()方法:像数组的末尾添加一个或多个元素,并返回新的数组长度

正则对象

1.创建: var reg=new RegExp("正则表达式"); var reg=/正则表达式/

2.方法 test(参数) 验证是否符合正则规范

<script>
   var reg=new RegExp("^\\w{6,12}$");
   // var reg=/^\w{6,12}$/;
   var username="guoyebing";
   var flag=reg.test(username)
    document.write(flag);
   //结果是true
</script>

<script>
var jscode="alert(123)";
eval(jscode);
</script>
//浏览器显示的是123

变量 var

定义变量用var: 局部变量

不用:定义的变量是全局变量

==和=== ==比较的是值 ===比较的是值和类型

var i=”3”; alert(typeof(i));

注释 // /**/

求任意两个数之间的随机数

Math.floor(Math.random()*（大数-小数+1）+小数)

取1到100之间的随机数

Math.floor((Math.random()*100))+1

alert () document.write();

document.getElementById(“id名称”) 获取元素

如果id是一个字符串，那么必须加上引号，如果是一个变量那么不需要

document.getElementById(“id名称”).value 获取元素里面的值

控制表单提交 οnsubmit=return checkForm() 不想提交就return false

JavaScript的输出

警告框：alert();

向页面指定位置写入内容：innerHTML(属性)

向页面写入内容：document.write(“”)

表单提交在 form中，<form οnsubmit=”return checkform() “>

验证邮箱if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(eValue)){

alert("邮箱格式不正确");

return false;

}

切换图片 document.getElementById("img").src="../images/"+i+".jpg";

页面加载放在 <body οnlοad="init()">

定时器 setInterval（“changeImg()” , 3000）单位是毫秒周期

clearInterval() 方法可取消由setInterval() 返回的ID值

隐藏图片 display：none 显示图片 block <style=” display：none”>

外部引入 <script type="text/javascript" src="" ></script>

弹出广告步骤：

首先将图片隐藏起来
设置多长时间广告会出来
将图片的none改为block
清除时间间隔
设置多长时间广告消失
将图片的block改为none
清除设置时间间隔

setTimeout（“”，t）设置多长时间后操作(毫秒值)

clearTimeout（）可取消由setTimeout () 返回的ID值

BOM对象

Window对象：confirm():确认框 prompt():用户输入对话框 alert():弹出框 open():打开新窗口 close():关闭新窗口(谁调用我就关闭谁)

History对象: back():前一个URL forward():下一个URL go(-1或者1):某个具体页面

Location对象：包含当前URL信息 οnclick="javascript:location.href='6.History对象.html'" location.reload():重新加载

onsubmit() onload() 这两个比较特殊

向页面指定位置写入内容，innerHTML

修改属性的方法：

html:对象.html属性=值；css：对象.style.css属性=”值”

事件：

onclick：点击 onmouseover：鼠标放上 onmouseout：鼠标离开

确认删除

<a href="javascript:deleteUser(${user.id});" id="deleteById">删除</a>

<script>

    function deleteUser(id){
        if(confirm("您确认要删除吗?")){
            location.href="${pageContext.request.contextPath}/deleteServletUserById?id="+id;
        }
    }
</script>

注意：js修改字体大小不是font-size 而是fontSize

修改div中的内容：

innerHTML：对象中的所有内容（文本内容和标签内容）

innerText：对象中所有的文本内容

Element:元素对象

方法:

removeAttribute():删除属性

setAttribute():设置属性

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">

</head>

<body>
    <a>点我试一试</a>
    <input type="button" value="设置属性" id="btn_set">
    <input type="button" value="删除属性" id="btn_remove">
</body>
<script>
    document.getElementById("btn_set").onclick=function () {
        document.getElementsByTagName("a")[0].setAttribute("href","https://www.baidu.com");
    }
    document.getElementById("btn_remove").onclick=function () {
        document.getElementsByTagName("a")[0].removeAttribute("href");
    }
</script>

</html>

a超链接功能:

1.可以被点击

2.点击后跳转到href指定的url

需求:保留1,去掉2功能

实现:<a href="javascript:void(0);">

在页面获取的内容都是字符串

事件：

鼠标事件：

onclick: 点击

onmouseover: 鼠标放上

onmouseout:鼠标离开

ondbclick: 双击事件

onmousedown ：鼠标按下

onmouseup：鼠标抬起

onmousemove：鼠标移动

表单事件：

onfocus：获得焦点

onblur：失去焦点

onsubmit：提交事件

onchange：当发生改变的时候

onreset：重置事件

键盘事件:

onkeyup: 键盘抬起

onkeydown;键盘按下

onkeypress: 键盘按键一次

窗口事件：

onload：页面一加载完后立即执行

有名的在body里面写<body οnlοad=”init()” >

匿名的 <script> window.οnlοad=function(){ } </ script>

表格的隔行变色

//获取表格中tbody里面的行数(长度)

var talEle=document.getElementById("tbl").tBodies[0].rows.length;

event:保存事件发生时的相关的信息

event.clientx:事件发生时的x的坐标

event.clienty:事件发生时的y的坐标

event.target:事件源

event：必须通过实际参数的形式传递给函数，才可以用

注意：在js中后面不需要/

获取复选框的状态（是否选中）

获取复选框： var checkAllEle=document.getElementById(“id”)

获取复选框的状态：checkAllEle.checked ? true为选中 false为未选中

若选中，获取下面所有的复选框，并将其状态置为选中

若未选中，获取下面所有的复选框，并将其状态置为未选中

document.getElementsByName (“name”)

创建文本节点：document.createTextNode()

创建元素节点：document.createElement()

将文本节点添加到li元素节点中去：使用element.appendChild()来添加子节点

var str = "-a-b-c-d-e-f-";

var str1 = str.substr(2,4);//-b-c (后面表示取几个)

var str2 = str.substring(2,4);//-b

省市联动步骤：

1.创建一个二维数组用于存储省份和城市

2.遍历二维数组中的省份

3. 遍历的省份与用户选择的省份比较若相同遍历用户选择的省份下的城市

4.创建城市的文本节点

5.创建option元素节点

6.将城市的文本节点添加到option元素节点

7.获取第二个下拉列表

8.将option元素节点添加到第二个下拉列表中去

9.清空第二个下拉列表的option内容

JS中数组的特点：长度可变数组的长度=最大角标+1

阻止表单的提交:只有当返回值是true才提交

点击事件两种方式

控制灯泡的亮和灭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<img src="img/off.gif" id="change1" onclick="change1();">
</body>
<script>
        var flag=true;
        function change1() {
            if(flag){
                document.getElementById("change1").src="img/on.gif";
                flag=false;
            }else {
                document.getElementById("change1").src="img/off.gif";
                flag=true;
            }
        }
</script>
</html>

打开新窗口并关闭

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<input type="button" value="打开新窗口" id="openBtn">
<input type="button"  value="关闭新窗口" id="closeBtn">
</body>
<script>
    var newWiondow;
    document.getElementById("openBtn").onclick=function () {
        newWiondow=open("https://www.baidu.com");
    }
    document.getElementById("closeBtn").onclick=function () {
        newWiondow.close();
    }

</script>
</html>

5秒后自动跳转到百度首页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        p{
            text-align : center;
        }
        span{
            color:red;
        }
    </style>
</head>

<body>
    <p>
        <span color="red" id="number">5</span>秒后,自动跳转到百度
    </p>
</body>
<script>
    var seconds=5;
    function showTime(){
        seconds--;
        if(seconds<=1){
            window.location.href="https://www.baidu.com";
        }
        document.getElementById("number").innerHTML=seconds;
    }
   setInterval(showTime,1000);
</script>

</html>

动态表格

模板代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>

<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="">删除</a></td>
    </tr>


</table>
</body>


</html>

动态表格添加:

1.绑定事件 2.获取文本框内容 3.创建td,并将td的文本设置为输入的内容 4.创建tr 5.将td添加到tr中 6.获取table,将tr添加到table中

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>

<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>


</table>
</body>
<script>
    document.getElementById("btn_add").onclick=function () {
        //获取每一个输入框内容
        var id=document.getElementById("id").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementById("gender").value;
        //获取表格
        var table=document.getElementsByTagName("table")[0];
        //创建tr
        var tr=document.createElement("tr");
        //创建td
        var td_id = document.createElement("td");
        //创建文本内容
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        tr.appendChild(td_id);

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        tr.appendChild(td_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        tr.appendChild(td_gender);

        //创建删除的超链接
        var td_a=document.createElement("td");
        var ele_a=document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);")
        var text_a=document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);
        tr.appendChild(td_a);

        table.appendChild(tr);

    }
</script>

</html>

删除

1.确定点击的超链接是哪一个超链接 <a href="javascript:void(0);" οnclick="delTr(this)">删除</a>

2.怎么删除 removeChild():通过父节点删除子节点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>动态表格</title>

    <style>
        table{
            border: 1px solid;
            margin: auto;
            width: 500px;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            text-align: center;
            margin: 50px;
        }
    </style>
</head>

<body>
<div>
    <input type="text" id="id" placeholder="请输入编号">
    <input type="text" id="name"  placeholder="请输入姓名">
    <input type="text" id="gender"  placeholder="请输入性别">
    <input type="button" value="添加" id="btn_add">

</div>


<table>
    <caption>学生信息表</caption>
    <tr>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>

    <tr>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>

    <tr>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);" onclick="delTr(this)">删除</a></td>
    </tr>


</table>
</body>
<script>
    document.getElementById("btn_add").onclick=function () {
        //获取每一个输入框内容
        var id=document.getElementById("id").value;
        var name=document.getElementById("name").value;
        var gender=document.getElementById("gender").value;
        //获取表格
        var table=document.getElementsByTagName("table")[0];
        //创建tr
        var tr=document.createElement("tr");
        //创建td
        var td_id = document.createElement("td");
        //创建文本内容
        var text_id = document.createTextNode(id);
        td_id.appendChild(text_id);
        tr.appendChild(td_id);

        var td_name = document.createElement("td");
        var text_name = document.createTextNode(name);
        td_name.appendChild(text_name);
        tr.appendChild(td_name);

        var td_gender = document.createElement("td");
        var text_gender = document.createTextNode(gender);
        td_gender.appendChild(text_gender);
        tr.appendChild(td_gender);

        //创建删除的超链接
        var td_a=document.createElement("td");
        var ele_a=document.createElement("a");
        ele_a.setAttribute("href","javascript:void(0);");
        ele_a.setAttribute("onclick","delTr(this)");
        var text_a=document.createTextNode("删除");
        ele_a.appendChild(text_a);
        td_a.appendChild(ele_a);
        tr.appendChild(td_a);

        table.appendChild(tr);

    }

    //删除
    function  delTr(obj) {
        var table=obj.parentNode.parentNode.parentNode;
        var tr=obj.parentNode.parentNode;
        table.removeChild(tr);
    }
</script>

</html>

注意的地方

动态表格添加使用innerHTML添加

表格全选功能:

1.鼠标放上去变颜色

2.全选

3.全不选

4.反选

5.鼠标点击最上面下面全选择或者不选择

模板

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
    </style>



</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" ></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" ></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" ></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" ></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
</html>

效果代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格全选</title>
    <style>
        table{
            border: 1px solid;
            width: 500px;
            margin-left: 30%;
        }

        td,th{
            text-align: center;
            border: 1px solid;
        }
        div{
            margin-top: 10px;
            margin-left: 30%;
        }
        .over{
            background-color: pink;
        }
        .out{
            background-color: white;
        }
    </style>



</head>
<body>

<table>
    <caption>学生信息表</caption>
    <tr>
        <th><input type="checkbox" name="cb" id="firstcb"></th>
        <th>编号</th>
        <th>姓名</th>
        <th>性别</th>
        <th>操作</th>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>1</td>
        <td>令狐冲</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>2</td>
        <td>任我行</td>
        <td>男</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

    <tr>
        <td><input type="checkbox" name="cb"></td>
        <td>3</td>
        <td>岳不群</td>
        <td>?</td>
        <td><a href="javascript:void(0);">删除</a></td>
    </tr>

</table>
<div>
    <input type="button" id="selectAll" value="全选">
    <input type="button" id="unSelectAll" value="全不选">
    <input type="button" id="selectRev" value="反选">
</div>
</body>
<script>
    window.onload=function () {

        //全选
        document.getElementById("selectAll").onclick=function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked=true;
            }
        }

        //全不选
        document.getElementById("unSelectAll").onclick=function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked=false;
            }
        }

        //反选
        document.getElementById("selectRev").onclick=function () {
            var cbs = document.getElementsByName("cb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = !cbs[i].checked;
            }
        }

        document.getElementById("firstcb").onclick=function () {
            var cbs = document.getElementsByName("cb");
            var firstcb = document.getElementById("firstcb");
            for (var i = 0; i < cbs.length; i++) {
                cbs[i].checked = firstcb.checked;
            }
        }

        var trs = document.getElementsByTagName("tr");
        for (var i = 0; i < trs.length; i++) {
            trs[i].onmouseover = function(){
                this.className = "over"
            }

            trs[i].onmouseout = function(){
                this.className = "out"
            }

        }



    }

</script>
</html>

这里的this表示document.getElementById("firstcb")

表单校验

后面给个<span id="s_username"></span>

注意:等于的是函数对象 document.getElementById("username").onblur = checkUsername;

<script>
    window.onload = function(){
        document.getElementById("form").onsubmit = function(){
            //验证用户名
            //验证密码
            //...
            //都成功则返回true
            //
            return checkUsername() && checkPassword();
        }

        document.getElementById("username").onblur = checkUsername;
        document.getElementById("password").onblur = checkPassword;
    }

    function checkUsername(){
        var username = document.getElementById("username").value;
        var reg_username = /^\w{6,12}$/;
        var flag = reg_username.test(username);
        var s_username = document.getElementById("s_username");
        if(flag){
            s_username.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
        }else{
            s_username.innerHTML = "用户名格式有误";
        }
        return flag;
    }

    function checkPassword(){
        var password = document.getElementById("password").value;
        var reg_password = /^\w{6,12}$/;
        var flag = reg_password.test(password);
        var s_password = document.getElementById("s_password");
        if(flag){
            s_password.innerHTML = "<img height='25' width='35' src='img/gou.png'>"
        }else{
            s_password.innerHTML = "密码格式有误";
        }
        return flag;
    }

</script>

效果一:实现以下效果,使用JS完成注册页面表单非空和格式校验

效果二:通过事件切换图片

效果三:首页轮播图(通过定时器自动变换)

效果四:自动弹出广告

效果五:使用JS完成注册页面表单校验

效果六:使用JS完成表格的隔行换色

效果七:使用JS完成表格的高亮显示(鼠标放上去,显示颜色)

效果八:使用JS完成全选和全不选

效果九:动态添加城市节点

效果十:使用JS完成省市二级联动

一:实现以下效果,使用JS完成注册页面表单非空和格式校验

<html>
    <head>
        <title>使用JS完成注册页面表单校验</title>
        <script>
            function checkForm(){
                    var vTest=document.getElementById("text").value;
                    if(vTest ==""){
                        alert("用户名不能为空!!");
                        return false;
                    }


                    var vPassword=document.getElementById("password").value;
                    if(vPassword ==""){
                        alert("密码不能为空!!");
                        return false;
                    }


                    var vRepassword=document.getElementById("repassword").value;
                    if(vRepassword ==""){
                        alert("确认不能为空!!");
                        return false;
                    }

                    if(vRepassword !=vPassword){
                        alert("两次密码不一致!!");
                        return false;
                    }

                    var vEmail=document.getElementById("email").value;
                    if(!/^([a-zA-Z0-9_-])+@([a-zA-Z0-9_-])+(.[a-zA-Z0-9_-])+/.test(vEmail)){
                        alert("邮箱格式不正确!!");
                        return false;
                    }

                }
        </script>
       

    </head>
    <body>
        <form action="#" method="get" onsubmit="return checkForm()">
            <table >
                <tr>
                    <td >会员注册 </td>
                    <td > &nbsp;&nbsp;USER REGISTER</td>
                </tr>
                <tr>
                    <td >用户名</td>
                    <td><input type="text" name="username" id="text"></td>
                </tr>
                <tr>
                    <td>密码</td>
                    <td><input type="password" name="password" id="password"></td>
                </tr>
                <tr>
                    <td>确认密码</td>
                    <td><input type="password" name="repassword" id="repassword"></td>
                </tr>
                <tr>
                    <td>Email</td>
                    <td><input type="text" name="email" id="email"></td>
                </tr>
                <tr>
                    <td>姓名</td>
                    <td><input type="text" name="name"></td>
                </tr>
                <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" value="男">男
                        <input type="radio" name="sex" value="女">女
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td><input type="text" name="birth"></td>
                </tr>
                <tr>
                    <td colspan="2"><input type="submit" value="注册"></td>
                </tr>
        </table>
    </form>
    </body>

</html>

二通过事件切换图片


<html>
    <head>
        <title>通过事件切换图片</title>
       <style>
           div{
               width: 200px;
               height: 200;
               margin: auto;
               text-align: center;
           }
       </style>
       <script>
           var i=1;
           function change(){
               i++;
               document.getElementById("img").src="./img/"+i+".jpg";
               if(i==4){
                    i=0;
               }
           }
       </script>

    </head>
    <body>
        <div>
            <input type="submit" value="下一张" onclick="change()">
            <img src="./img/1.jpg" width="100%" height="100%" id="img">


        </div>
            
    </body>

</html>

三首页轮播图(通过定时器自动变换)



<html>
    <head>
        <title>首页轮播图(通过定时器自动变换)</title>
       <style>
           div{
               width: 200px;
               height: 200;
               margin: auto;
           }
       </style>
       <script>
           window.onload=function(){
               setInterval("changeImg()",1000);

               

           }
            var i=1;
            function changeImg(){
                i++;
                document.getElementById("img").src="./img/"+i+".jpg";
                if(i==4){
                    i=0;
                }
           }
       
       </script>

    </head>
    <body>
        <div>
           
            <img src="./img/1.jpg" width="100%" height="100%" id="img">
        </div>
            
    </body>

</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
    <img src="img/banner_1.jpg" id="banner">
</body>
<script>
    window.onload=function () {
        setInterval(change,1000);
    }
        var i=1;
        function  change() {
                i++;
            if(i>3){
                i=1;
            }
                document.getElementById("banner").src="img/banner_"+i+".jpg";

        }
</script>
</html>

四自动弹出广告

<html>
    <head>
        <title>定时弹出广告</title>
       <style>
           div{
               width: 200px;
               height: 200;
               margin: auto;
           }
       </style>
       <script>
           window.onload=function(){
               setInterval("changeImg()",1000);
               //1.设置显示广告图片的定时操作
				time = setInterval("showAd()",2000);

               

           }
            var i=1;
            function changeImg(){
                i++;
                document.getElementById("img").src="./img/"+i+".jpg";
                if(i==4){
                    i=0;
                }
           }

           function showAd(){
            document.getElementById("img2").style.display="block";
            clearInterval(time);
            time = setInterval("hideAd()",2000);
           }

           function hideAd(){
            document.getElementById("img2").style.display="none";
            clearInterval(time);
           }
       
       </script>

    </head>
    <body>
        <div>
            <img src="./img/4.jpg" width="100%" height="100%" id="img2" style="display: none">
            <img src="./img/1.jpg" width="100%" height="100%" id="img">
        </div>
            
    </body>

</html>

五使用JS完成注册页面表单校验

<html>
    <head>
        <title>使用JS完成注册页面表单校验之多个</title>
     
      

    </head>

    <script>
         function showTips(id,info){
            document.getElementById(id+"span").innerHTML="<font color='gray'>"+info+"</font>";
        }

        function checkTips(id,info){
            var vText=document.getElementById(id).value;
            if(vText==""){
                document.getElementById(id+"span").innerHTML="<font color='red'>"+info+"</font>";
            }else{
                document.getElementById(id+"span").innerHTML="";
            }
        }
    </script>


    <body>
       <table>
           <tr>
               <td colspan="2"><font size="5">会员注册</font>  &nbsp;&nbsp; USER  REGISTER</td>
           </tr>

           <tr>
                <td>用户名</td>
              <td><input type="text" name="username" onfocus="showTips('username','用户名必填')" onblur="checkTips('username','用户名不能为空')" id="username"><span id="usernamespan"></span></td>
            </tr> 

           
            <tr>
                <td>密码</td>
                <td><input type="password" name="password" onfocus="showTips('password','密码必填')" onblur="checkTips('password','密码不能为空')" id="password"><span id="passwordspan"></span></td>
            </tr>
    
            <tr>
                <td>确认密码</td>
                <td><input type="password" name="repassword"></td>
            </tr>
            <tr>
                <td>Email</td>
                <td><input type="text" name="email"></td>
            </tr>
    
            <tr>
                <td>姓名</td>
                <td><input type="text" name="user"></td>
            </tr>
            <tr>
                    <td>性别</td>
                    <td>
                        <input type="radio" name="sex" value="男">男
                        <input type="radio" name="sex" value="女">女
                    </td>
                </tr>
                <tr>
                    <td>出生日期</td>
                    <td><input type="text" name="birth" ></td>
                </tr>
        
                <tr>
                    <td colspan="2">
                        <input type="button" value="注册">
                    </td>
                </tr>

            
       </table>
        
    </body>

</html>

六使用JS完成表格的隔行换色


<html>
    <head>
        <title>使用JS完成表格的隔行换色</title>
    </head>

    <script>
        window.onload=function(){
            var tb=document.getElementById("tb1");
            var len=tb.tBodies[0].rows.length;
            for(var i=0;i<len;i++){
                if(i%2==0){
                    //tBodies[0]是因为body可以写多个,本案例中是第一个tbody
                    tb.tBodies[0].rows[i].style.backgroundColor="pink";
                }else{
                    tb.tBodies[0].rows[i].style.backgroundColor="gold";
                }
            }
        }
        

    </script>


    <body>
       <table border="1px" cellspacing="0px" align="center" width="450px" id="tb1">
        <thead>   
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
           <tr>
               <td>1</td>
               <td>张三</td>
               <td>22</td>
           </tr>
           <tr>
                <td>2</td>
                <td>李四</td>
                <td>23</td>
            </tr>
            <tr>
                <td>3</td>
                <td>王五</td>
                <td>24</td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵六</td>
                <td>25</td>
            </tr>
            <tr>
                <td>5</td>
                <td>田七</td>
                <td>26</td>
            </tr>
            <tr>
                <td>6</td>
                <td>八神</td>
                <td>27</td>
            </tr>
            <tr>
                <td>7</td>
                <td>汾九</td>
                <td>28</td>
            </tr>
        </tbody> 
            
       </table>
        
    </body>

</html>

七使用JS完成表格的高亮显示(鼠标放上去,显示颜色)

<html>
    <head>
        <title>使用JS完成表格的高亮显示之flag</title>
    </head>

    <script>
            function changeColor(id,flag){
                if(flag=='over'){
                    document.getElementById(id).style.backgroundColor="red";
                }else{
                    document.getElementById(id).style.backgroundColor="white";
                }
            }
           

        

    </script>


    <body>
       <table border="1px" cellspacing="0px" align="center" width="450px" id="tb1">
        <thead>   
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
           <tr onmouseover="changeColor('tr1','over')" onmouseout="changeColor('tr1','out')" id="tr1">
               <td>1</td>
               <td>张三</td>
               <td>22</td>
           </tr>
           <tr onmouseover="changeColor('tr2','over')" onmouseout="changeColor('tr2','out')" id="tr2">
                <td>2</td>
                <td>李四</td>
                <td>23</td>
            </tr>
            <tr onmouseover="changeColor('tr3','over')" onmouseout="changeColor('tr3','out')" id="tr3">
                <td>3</td>
                <td>王五</td>
                <td>24</td>
            </tr>
            <tr onmouseover="changeColor('tr4','over')" onmouseout="changeColor('tr4','out')" id="tr4">
                <td>4</td>
                <td>赵六</td>
                <td>25</td>
            </tr>
            <tr onmouseover="changeColor('tr5','over')" onmouseout="changeColor('tr5','out')" id="tr5">
                <td>5</td>
                <td>田七</td>
                <td>26</td>
            </tr>
            <tr onmouseover="changeColor('tr6','over')" onmouseout="changeColor('tr6','out')" id="tr6">
                <td>6</td>
                <td>八神</td>
                <td>27</td>
            </tr>
            <tr onmouseover="changeColor('tr7','over')" onmouseout="changeColor('tr7','out')" id="tr7">
                <td>7</td>
                <td>汾九</td>
                <td>28</td>
            </tr>
        </tbody> 
            
       </table>
        
    </body>

</html>

八:使用JS完成全选和全不选

<html>
    <head>
        <title>使用JS完成全选和全不选</title>
    </head>

    <script>
            function selectAll(){
                var eleAll=document.getElementById("selectAll");
                    if(eleAll.checked==true){
                        var eleOne=document.getElementsByName("selectOne");
                        for(var i=0;i<eleOne.length;i++){
                            eleOne[i].checked=true;
                        }
                        
                    }else{
                        var eleOne=document.getElementsByName("selectOne");
                        for(var i=0;i<eleOne.length;i++){
                            eleOne[i].checked=false;
                        }
                    }
            }
           

        

    </script>


    <body>
       <table border="1px" cellspacing="0px" align="center" width="450px" id="tb1">
        <thead>   
            <tr>
                <th><input type="checkbox" onclick="selectAll()" id="selectAll"></th>
                <th>编号</th>
                <th>姓名</th>
                <th>年龄</th>
            </tr>
        </thead>
        <tbody>
           <tr>
               <td><input type="checkbox" name="selectOne"></td>
               <td>1</td>
               <td>张三</td>
               <td>22</td>
           </tr>
           <tr>
                <td><input type="checkbox" name="selectOne"></td>
                <td>2</td>
                <td>李四</td>
                <td>23</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne"></td>
                <td>3</td>
                <td>王五</td>
                <td>24</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne"></td>
                <td>4</td>
                <td>赵六</td>
                <td>25</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne"></td>
                <td>5</td>
                <td>田七</td>
                <td>26</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne"></td>
                <td>6</td>
                <td>八神</td>
                <td>27</td>
            </tr>
            <tr>
                <td><input type="checkbox" name="selectOne"></td>
                <td>7</td>
                <td>汾九</td>
                <td>28</td>
            </tr>
        </tbody> 
            
       </table>
        
    </body>

</html>

九:动态添加城市节点

<html>
    <head>
        <title>动态添加城市节点</title>
    </head>

    <script>
           
           window.onload=function(){
                document.getElementById("btn").onclick=function(){
                    var ul1=document.getElementById("ul1");
                    var textNode=document.createTextNode("天津");
                    var ele=document.createElement("li");
                    ele.appendChild(textNode);
                    ul1.appendChild(ele);
                }
           }

    </script>


    <body>
        <input type="button" value="动态添加城市" id="btn">
      <ul id="ul1">
          <li>北京</li>
          <li>上海</li>
          <li>广州</li>
      </ul>
        
    </body>

</html>

十:使用JS完成省市二级联动

<html>
    <head>
        <title>使用JS完成省市二级联动</title>
    </head>

    <script>
            //1.创建一个二维数组用于存储省份和城市
            var cities=new Array(3);
            cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市");
            cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市");
            cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市");
            cities[3] = new Array("郑州市","洛阳市","开封市","安阳市");

            function changeCity(val){
                //7.获取第二个下拉列表
                var selectValue=document.getElementById("city");
                //9.清空第二个下拉列表的option内容
                selectValue.options.length=0;
                //2.遍历二维数组中的省份
               for(var i=0;i<cities.length;i++){
                   //注意，比较的是角标
                    if(val==i){
                        //3.遍历用户选择的省份下的城市
                        for(var j=0;j<cities[i].length;j++){
                            //4.创建城市的文本节点
                            var textNode=document.createTextNode(cities[i][j]);
                            //5.创建option元素节点
                            var eleValue=document.createElement("option");
                            eleValue.appendChild(textNode);
                            selectValue.appendChild(eleValue);
                        }
                    }
               }
               
            }
    </script>


    <body>
        
        <select id="provice" onchange="changeCity(this.value)">
            <option>---请选择---</option>
            <option value="0">湖南</option>
            <option value="1">湖北</option>
            <option value="2">河南</option>
            <option value="3">河北</option>
        </select>

        <select id="city">

        </select>
        
    </body>

</html>

guoyebing

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
javaweb_day2_JavaScript

ECMAScript：语法，语句BOM：浏览器对象模型DOM：文档对象模型（操作文档中的元素和内容）变量 var==和=== ==比较的是值 ===比较的是值和类型var i=”3”; alert(typeof(i));注释 // /**/求任意两个数之间的随机数Math.floor(Math.random...
复制链接

扫一扫