第85节：Java中的JavaScript-原创手记-慕课网

webp

标题图

第85节：Java中的JavaScript

复习一下css：

选择器的格式：

元素选择器：元素的名称{}
类选择器：. 开头
ID选择器：# ID选择器

后代选择器：选择器1 选择器2
子元素选择器：选择器1 > 选择器2
选择器分组：选择器1，选择器2，选择器3{}
属性选择器：选择器[属性名称='属性值']

盒子模型：

内边距：盒子内的距离
边框：盒子的边框
外边距：盒子和盒子之间的距离

轮播图

自动播放：每隔3秒切换，切换图片，

// 点击弹框
// 确定事件，点击事件
// 通过事件定义函数
// 在函数里定义操作页面元素，做一些交互的操作<script>
 function d(){  // alert("点击了");
  // 获取div
  var div = document.getElementById("div1");
  div.innerHTML = "<font color='red'> 内容 </font>";
 }</script><body>
 <input type="button value="点我" onclick="d()"/>
 <div id = "div1">
  这里是达叔小生 </div></body>

// 点击切换图片<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function changeImg(){//              alert("要切换了")
                var img = document.getElementById("img1");
                img.src = "../img/1.gif";
            }        </script>
    </head>
    <body>
        <input type="button" value="点击切换图片" onclick="changeImg()" />
        <br />
        <img src="../img/333.jpg" id="img1" />
    </body></html>

setTimeout(): 在指定的毫秒数后调用函数
setInterval(): 按照指定的周期来调用函数
scrollTo(): 把内容滚动到指定的坐标
scrollBy(): 按照指定的像素值来滚动内容
resizeTo(): 把窗口的大小调整到指定的宽度和高度
resizesBy(): 按照指定的像素调整窗口的大小
prompt(): 显示可提示用户输入的对话框
open(): 打开一个新的浏览器窗口
moveTo(): 把窗口的左上角移动到一个指定的坐标
moveBy(): 可相对窗口的当前坐标把它移动指定的像素
focus(): 把键盘焦点给予一个窗口

setInterval()方法按照指定的周期来调用函数，方法会不停地调用函数，直到clearInterval()被调用或者窗口被关闭，

<html><body><input type="text" id="clock" size="20"/><script language=javascript>var int = self.setInterval("clock()", 50)function clock(){ var t = new Date() document.getElementById("clock").value
}</script><button onclick="int=window.clearInterval(int)">stop</button></body></html>

定时器

// 技术分析function test(){ console.log("调用了");
}// setInterval("test()", 2000); 这个函数会循环，定时2秒后，这个函数会重新被调用，一直循环。// setTimeout("test()", 2000);这个函数被用了，就不再执行了

取消操作，alert()显示一段消息，blur()把键盘焦点从顶层窗口移开，clearInterval()取消由setInterval()设置的timeout，clearTimeout()取消由setTimeout()方法设置的timeout。

setIntervale()

参数：
mode 参数为要调用的函数，或是执行代码串
millisec 参数为调用code之间的时间间隔

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function test(){                console.log("setInterval");
            }//          setInterval("test()",2000);//          setTimeout("test()",2000);
            var timerID;            function startDinshiqi(){//              timerID = setInterval("test()",2000);
                timerID = setTimeout("test()",3000);
            }            
            function stopDingshiqi(){//              clearInterval(timerID);
                clearTimeout(timerID);
            }            
        </script>
    </head>
    <body>
        <input type="button" value="开启定时器" onclick="startDinshiqi()" /><br />
        <input type="button" value="取消定时器" onclick="stopDingshiqi()"/><br />
    </body></html>

图片自动轮播：

// 会被显示在状态栏<html><head><script type="text/javascript">function load(){ window.status = "Page"}</script></head><body onload="load()"></body></html>

文件加载完成事件onload，事件触发

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            var index = 0;            
            function changeImg(){                
                var img = document.getElementById("img1");                
                //当前要切换到第几张图片
                var curIndex = index%3 + 1; 
                img.src="../img/"+curIndex+".jpg"; 
                //每切换完,索引加1
                index = index + 1;
            }            
            function init(){
                setInterval("changeImg()",1000);
            }            
        </script>
    </head>
    <body onload="init()">
        <img src="../img/1.jpg" width="100%" id="img1"/>
    </body></html>

显示和隐藏

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>//          var img = document.getElementById("img1");
            
            function hideImg(){                var img = document.getElementById("img1");
                img.style.display = "none";
            }            
            function showImg(){                var img = document.getElementById("img1");
                img.style.display = "block";
            }        </script>
    </head>
    <body>
        <input type="button" value="显示" onclick="showImg()" />
        <input type="button" value="隐藏" onclick="hideImg()" /><br />
        
        <img src="../img/1.gif" id="img1" />
        
        
    </body></html>

setInterval：每隔多少毫秒执行一次
setTimeout：多少毫秒后执行一次
clearInterval和clearTimeout
img.style.display=block和img.style.display=none

定时广告：

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
        
            function init(){
                setTimeout("showAD()",3000);
            }            
            function showAD(){                //获取要操作的img
                var img = document.getElementById("img1");                //显示广告
                img.style.display = "block";                
                //再开启定时器,关闭广告
                setTimeout("hideAD()",3000);
            }            
            function hideAD(){                //获取要操作的img
                var img = document.getElementById("img1");                //隐藏广告
                img.style.display = "none";
            }        </script>
    </head>
    <body onload="init()">
        <img id="img1" src="../img/555.jpg" width="100%" style="display: none;"/>
    </body></html>

表单效果

onblur 元素失去焦点
onchange 域的内容被改变
onfocus 元素获取焦点

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <!--
            引入外部的js文件
        -->
        <script type="text/javascript" src="../js/regutils.js" ></script>
        <script>

            function showTips(spanID,msg){                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }            function checkUsername(){                var uValue = document.getElementById("username").value;                var span = document.getElementById("span_username");                if(uValue.length < 6){
                    span.innerHTML = "<font color='red' size='2'>太短</font>";                    return false;
                }else{
                    span.innerHTML = "<font color='red' size='2'>可用</font>";                    return true;
                }
            }            
            /*
             密码校验
             */
            function checkPassword(){                var uPass = document.getElementById("password").value;                var span = document.getElementById("span_password");                if(uPass.length < 6){
                    span.innerHTML = "<font color='red' size='2'>太短</font>";                    return false;
                }else{
                    span.innerHTML = "<font color='red' size='2'>够用</font>";                    return true;
                }
            }            
            /*
             确认密码校验
             * */
            function checkRePassword(){                var uPass = document.getElementById("password").value;                var uRePass = document.getElementById("repassword").value;                var span = document.getElementById("span_repassword");                if(uPass != uRePass){
                    span.innerHTML = "<font color='red' size='2'>两次密码不一致</font>";                    return false;
                }else{
                    span.innerHTML = "";                    return true;
                }
            }            
            /*
             校验邮箱
             * */
            function checkMail(){                var umail = document.getElementById("email").value;                var flag = checkEmail(umail);                var span = document.getElementById("span_email");                //对邮箱输入进行校验
                if(flag){
                    span.innerHTML = "<font color='red' size='2'>可用</font>";                    return true;
                }else{
                    span.innerHTML = "<font color='red' size='2'>邮箱格式貌似有问题</font>";                    return false;
                }
            }            
            function checkForm(){                var flag = checkUsername() && checkPassword() && checkRePassword() && checkMail();                return flag;
            }            
        </script>
    </head>
    <body>
        <form action="../555.html" onsubmit="return checkForm()" >
            用户名:<input type="text" id="username" onfocus="showTips('span_username','用户名长度不能小于6')" onblur="checkUsername()" onkeyup="checkUsername()" /><span id="span_username"></span><br />
            密码:<input type="password" id="password" onfocus="showTips('span_password','密码长度不能小于6')" onblur="checkPassword()" onkeyup="checkPassword()"/><span id="span_password"></span><br />
            确认密码:<input type="password" id="repassword" onfocus="showTips('span_repassword','两次密码必须一致')" onblur="checkRePassword()" onkeyup="checkRePassword()" /><span id="span_repassword"></span><br />
            邮箱:<input type="text" id="email" onfocus="showTips('span_email','邮箱格式必须正确')" onblur="checkMail()" /><span id="span_email"></span><br />
            手机号:<input type="text" id="text" /><br />
            
            <input type="submit" value="提交" />
        </form>
    </body></html>

表单提交规则

https://github.com/huangguangda/Tools/blob/master/regutils.js

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
            function showTips(spanID,msg){                var span = document.getElementById(spanID);
                span.innerHTML = msg;
            }            
            function checkUsername(){                var uValue = document.getElementById("username").value;                var span = document.getElementById("span_username");                if(uValue.length < 6){
                    span.innerHTML = "太短啦!"
                    return false;
                }else{
                    span.innerHTML = "够用!"
                    return true;
                }
            }            
            function checkForm(){                var flag = checkUsername();                return flag;
            }            
        </script>
    </head>
    <body>
        <form action="../555.html" onsubmit="return checkForm()">
            用户名:<input type="text" id="username" onblur="checkUsername()"  onfocus="showTips('span_username','用户名长度不能小于6位')" /><span id="span_username"></span> <br />
            <input type="submit" value="注册" />
        </form>
            
    </body></html>

引入文件

<script src="js文件路径" type="text/javascript" />

ondblclick: 当用户双击某个对象时调用的事件
onerrror: 在加载文档或图像时发生错误
onfocus: 元素获得焦点
onkeydown: 某个键盘按键被按下
onkeypress: 某个键盘按键被按下并松开
onkeyup: 某个键盘按键被松开
onload: 一张页面或一副图像完成加载
onmousedown: 鼠标按钮被按下
onmousemove: 鼠标被移动
onmouseout: 鼠标从某元素移开
onmouseover: 鼠标移到某元素之上
onmouseup: 鼠标按键被松开

表格隔行颜色

<tr> <td>
  <input type="checkbox"/>
 </td>
 <td><a href="#">修改</a> | <a href="#">删除</a></td></tr>

<tr bgcolor="red">
</tr>

<body onload="init()">
<table border="1px" width="600px" id="tab">function init(){ var tab = document.getElementById("tab");
}

table对象

table对象代表一个html表格，<table>标签
cells[] 返回包含表格中所有单元格的一个数组// 所有单元格rows[] 返回包含表格中所有行的一个数组
tBodies[] 返回包含表格中所有tbody的一个数组

webp

代码

表格全选和全不选

getElementById()方法
getElementById()方法返回带有指定ID的元素

var element = document.getElementById("tag");

appendChild(node)： 插入新的子节点
removeChild(node)：删除子节点
innerHTML: 节点元素的文本值
parentNode：节点的父节点
childNodes：节点元素的子节点
attributes：节点的属性节点

getElementById(): 返回带有指定ID的元素
getElementsByTagName(): 返回包含带有指定标签名称的所有元素的节点列表
getElementsByClassName(): 返回包含带有指定类名的所有元素的节点列表
appendChild(): 把新的子节点添加到指定节点
removeChild(): 删除子节点
replaceChild():替换子节点
insertBefore(): 在指定子节点前面插入新的子节点
createAttribute(): 创建属性节点
createElement(): 创建元素节点
createTextNode(): 创建文本节点
getAttribute(): 返回指定的属性值
setAttribute(): 把指定属性设置值

webp

效果

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
        <img src="../img.gif" />
        <p>文本</p>
    </body></html>

省市联动

<select>
 <option></option>
 <option></option>
 <option></option></select>

DOM：

Document Object Model
HTML DOM定义了访问和操作的html文档的标准
DOM是标准，定义了访问html和xml文档的标准
DOM是 
Document Object Model 文档对象模型的缩写

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            
            function dianwo(){                var div = document.getElementById("div1");                //创建元素节点
                var p = document.createElement("p");  // <p></p>
                //创建文本节点
                var textNode = document.createTextNode("文本内容");//  文本内容
                
                //将p 和文本内容关联起来
                p.appendChild(textNode);  //  <p>文本</p> 
                
                //将P添加到目标div中
                div.appendChild(p);
            }            
        </script>
    </head>
    <body>
        <input type="button" value="点我" onclick="dianwo()" />
        
        <div id="div1">
            
        </div>
    </body></html>

选择城市

webp

代码

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>

            var provinces = [
                ["深圳市","东莞市","惠州市","广州市"],
                ["长沙市","岳阳市","株洲市","湘潭市"],
                ["厦门市","福州市","漳州市","泉州市"]
            ];            function selectProvince(){                var province = document.getElementById("province");                //得到当前选中的是哪个省份
                //alert(province.value);
                var value = province.value;                //从数组中取出对应的城市信息
                var cities = provinces[value];                var citySelect = document.getElementById("city");                //清空select中的option
                citySelect.options.length = 0;                
                for (var i=0; i < cities.length; i++) {                    var cityText = cities[i]; 
                    var option1 = document.createElement("option");                    //创建城市文本节点
                    var textNode = document.createTextNode(cityText) ;                    
                    //将option节点和文本内容关联起来
                    option1.appendChild(textNode); 
//                  添加到城市select中
                    citySelect.appendChild(option1);
                }
                
            }            
        </script>
    </head>
    <body>
        <!--选择省份-->
        <select onchange="selectProvince()" id="province">
            <option value="-1">--请选择--</option>
            <option value="0">广东省</option>
            <option value="1">湖南省</option>
            <option value="2">福建省</option>
        </select>
        <!--选择城市-->
        <select id="city"></select>
    </body></html>

案例:

<!DOCTYPE html><html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function selectOne(){                var leftSelect = document.getElementById("leftSelect");                var options = leftSelect.options;                
                //找到右侧的Select
                var rightSelect = document.getElementById("rightSelect");                //遍历找出被选中的option
                for(var i=0; i < options.length; i++){                    var option1 = options[i];                    if(option1.selected){        //              将选中的元素添加到右边的Select中就可以
                        rightSelect.appendChild(option1);
                    }
                }
            }            
            //将左边所有的商品移动到右边
            function selectAll(){//              获取左边Select中被选中的元素
                var leftSelect = document.getElementById("leftSelect");                var options = leftSelect.options;                
                //找到右侧的Select
                var rightSelect = document.getElementById("rightSelect");                //遍历找出被选中的option
                for(var i=options.length - 1; i >=0; i--){                    var option1 = options[i];
                    rightSelect.appendChild(option1);
                }
            }            
            
            
        </script>
    </head>
    <body>
        
        <table border="1px" width="400px">
            <tr>
                <td>分类名称</td>
                <td><input type="text" value="手机数码"/></td>
            </tr>
            <tr>
                <td>分类描述</td>
                <td><input type="text" value="手机数码"/></td>
            </tr>
            <tr>
                <td>分类商品</td>
                <td>
                    <!--左边-->
                    <div style="float: left;">
                        已有商品<br />
                        <select multiple="multiple" id="leftSelect" ondblclick="selectOne()">
                            <option></option>
                            <option></option>
                            <option></option>
                            <option></option>
                        </select>
                        <br />
                        <a href="#" onclick="selectOne()"> &gt;&gt; </a> <br />
                        <a href="#" onclick="selectAll()"> &gt;&gt;&gt; </a>
                    </div>
                    <!--右边-->
                    <div style="float: right;"> 
                        未有商品<br />
                        <select multiple="multiple" id="rightSelect">
                            <option></option>
                            <option></option>
                            <option></option>
                            <option></option>
                        </select>
                        <br />
                        <a href="#"> &lt;&lt; </a> <br />
                        <a href="#"> &lt;&lt;&lt; </a>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan="2">
                    <input type="submit" value="提交"/>
                </td>
            </tr>
        </table>
        
        
    </body></html>

作者：达叔小生
链接：https://www.jianshu.com/p/24b0ecc738dc