html,css,javascript 总结

JS

HTML

<!--这个是HTML的注释符-->

css和js和Java一样

为了方便我都用//表示

title是标签页的内容

body是网页中的内容

直接写在里面就会在网页中显示

实体符号

<!--大于号小于号-->
        a&lt;b<br>  //&lt; 小于号  <br>换行
        b&gt;c      //&gt;大于号
        a&nbsp;&nbsp;c  //&nbsp 空格

表格

//width 也可以是200px之类的  px像素
//<th>33</td>  居中加粗
<table border="5px" width="10%" height="100px">
            <!--align对齐方式-->
            <tr align="center">
                <td>11</td><td>12</td>
            </tr>
            <tr>
                <td>21</td><td>22</td>
            </tr>
        </table>
​

单元格合并

        <table  width="200px" border="1px">
            <tr align="center">
                <td>我爱你</td>
                <td>hehe</td>
                <td>lalala</td>
            </tr>
            <tr>
                <td>我</td>
                <td>最</td>
                <td rowspan="2">帅</td>  //行合并 合并几个写几 在合并的第一个地方写rowspan   colspan 列合并 
            </tr>
            <tr>
                <th>31</th>
                <th>32</td>
                
            </tr>

背景颜色背景图片

//图片可以放到一个文件中  输入路径是会提示  路径相对路径
<body bgcolor="skyblue" background="img/huaizhu.jpg">

图片

//网页中的图片  src相对路径
<body > 
        <img src="img/huaizhu.jpg" width="500px" />
    </body>

超链接

    <body>
        <!--href hot reference
        路径可以是绝对路径也可以是相对路径
        target blank 是超链接点击后在新的窗口打开
        self是在本窗口打开覆盖了
        top 是在顶级窗口打开,嵌套关系是才有
        parent 是在父窗口打开,也是嵌套关系
        -->
        <a href="http://www.baidu.com" target="_blank">
            <img src="img/timg.jpg"  width="500" />//超链接里的图片就是可以点的地方
        </a>
    </body>

request 是浏览器向服务器发送数据

response是服务器向浏览器发送数据

列表

<body>
        <!--
        有序列表
        有序号的
        -->
        <ol type="I">
            <li>水果</li>
            <li>蔬菜</li>
        </ol>
        
        
        <!--
        无序列表
        -->
        <ul type="circle">
            <li>中国
                <ul type="square">
                    <li>北京</li>
                    <li>上海</li>
                </ul>
            </li>
            <li>美国</li>
            <li>日本</li>
            <li>韩国</li>
        </ul>
        
    </body>

表单

将表单中的数据提交给服务器

有name才会提交

<body>
    //action 服务器地址
    <!--画一个提交按钮，这个按钮可以提交表单-->   
            <!--画按钮，可以使用input输入域    type=submit 是提交按钮有提交的能力 button 没有这个效果-->    
                <!--text中一定要有name,有name数据才会提交  name属性一定会提交给服务器-->
//传输的数据为name=value&name=value&...
        <form action="http://www.baidu.com">
            <input type="text" />
            <input type="submit" value="提交" />
                //单选按钮的name一定要一样  checked默认选项
            <input type="radio" name="gender" value="0" />
            <input type="radio" name="gender" value="1" checked />
                //multiple 是多选
                <select multiple="multiple" size="1" name="select">
                <option>北京</option>
                <option>上海</option>
                <option>广州</option>
                <option>深圳</option>
                <option>杭州</option>
                <option>武汉</option>
            </select>
        </form>

文件

<body>
        <!--文件上传专用-->
        <input type="file" />
        <!--隐藏域-->
        <input type="hidden" name="userid" value="111"/>
    </body>

readonly和disabled

disabled数据不能提交

readonly数据可以提交

<body>
        用户代码<input type="text" name="usercode" value="110" readonly="readonly" />
        <br />
        用户姓名<input type="text" name="username" value="张三" disabled="disabled" />
    </body>

maxlength

text 中的属性 文本框中最大输入的个数

HTML的id属性

任意一个元素都有id属性 id属性是唯一的不能重复

div和span

保证页面可以灵活的布局

<body>
        <!--div和span都是图层
        div独占一层
        span不会独占一层
        -->
        <div id="div1">我是一个DIV</div>
        <div id="div2">我是一个DIV</div>
        <span id="span1">我是一个SPAN</span>
        <span id="span2">我是一个SPAN</span>
        <div id="div3">
            <div>
                哈哈
            </div>
            <div>
                啦啦啦
            </div>
        </div>

CSS

三种样式

<body>
        <!--display  none不显示block显示-->
        <div style="width: 300px;height: 300px; background-color: aqua;border: 1px solid black;" ></div>
    </body>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>样式块</title>
        <style type="text/css">
            /*
            css的注释
            */
           /*
           id选择器
           */
          #usernameError{
              color: skyblue;
              font-size: 20px;
          }
          /*
          标签选择器
          作用范围比id选择器广
          */
         div{
             background-color: greenyellow;
             border: 10px;
             width: 100px;
             height: 100px;
         }
         /*
         类选择器
         .类名{
             
         }
         */
    .myclass{
        border:1px solid green;
        color: red;
    }
        </style>
    </head>
    <body>
        <span id="usernameError">对不起用户名不能为空</span>
        <div>我为你代言</div>
        <div>我为自己代言</div>
        <span id="usernameError">对不起用户名不能为空个屁</span>
        <br />
        <br />
        <input type="text" class="myclass"/>
        <br />
        <select class="myclass">
            <option value ="北京">北京</option>
            <option value ="上海">上海</option>
            <option value ="广州">广州</option>
            <option value ="深圳">深圳</option>
            <option value ="重庆">重庆</option>
            <option value ="杭州">杭州</option>
        </select>
    </body>
</html>
//引入
    <head>
        <meta charset="utf-8">
        <title>css引入</title>
        <link rel="stylesheet" type="text/css" href="css引入.css" />
    </head>
    <body>
        <a href="http://www.baidu.com">百度</a>
        <span id="baiduspan">点击我链接到百度</span>
    </body>
a{
    text-decoration: none;
}
#baiduspan{
    text-decoration: underline;//有下划线
    cursor: wait;//光标样式
}

列表样式

绝对定位

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #div1{
                background-color: skyblue;
                border: 1px solid green;
                width: 300px;
                height: 300px;
                position: absolute;
                left: 200px;
                top: 200px;
            }
        </style>
    </head>
    <body>
        <div id="div1"></div>
    </body>
</html>
​

JS

JS的嵌入方式3种

1、

window.alert("HelloWorld")
window.alert("我最帅")
window.alert("我最强")
window.alert("我最棒")
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第三种方式</title>
    </head>
    <body>
        <script type="text/javascript" src="js引入.js"></script>
    </body>
</html>
​

2、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>嵌入js代码第一步</title>
    </head>
    <body>
        <!--
        用户点击按钮后弹出消息框
        -->
        <input type="button" value="hello" onclick="window.alert('hello,js')"/>
        <input type="button" value="hello" onclick='window.alert("hello,jscode")'/>
        <input type="button" value="hello" onclick="window.alert('hello,jsfdfs');window.alert('hello,jfs');window.alert('hello,jsfes')"/>
    </body>
</html>

3、

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>第二种方式</title>
    </head>
    <body>
        <!--第二种方式：脚本块的方式
        脚本块中的代码执行不用事件
        从上至下依次执行
        点开页面就会出现
        -->
        <input type="button" value="我是一个按钮" />
        <script type="text/javascript">
            window.alert("HelloWorld")
        </script>
        <input type="button" value="我是第二个按钮" />
    </body>
</html>
​

标识符

变量

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js变量</title>
    </head>
    <body>
        <script >
            /*js中的函数和Java中的方法类似
            语法格式:
            可以没有函数名
                function 函数名(形式参数){
                    函数体； 
                }
                函数名 = function(形式参数){
                    函数体
                }
            */
            var i;
            alert("i = " +i);
            i = false
            alert(i)
            i = 251
            alert(i)
            i = "lalala"
            alert(i)
            i = 'c'
            alert(i)
            function sum(a,b){
                alert(a+b)
            }
            sum(100,50)
            sayhello = function(username){
                alert("hello" + username)
            }
        </script>
        <!--双引号里再有双引号一定要用单引号-->
        <input type="button" value="hello" onclick="sayhello('jack')" />
    </body>
</html>
​

函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <script type="text/javascript">
        function sum(a,b){
            return a+b
        }
        //同名函数后写的会将之前的函数覆盖掉
        function sum(a,b,c){
            return a+b+c
        }
        
        var i = sum("hello",'c')
        alert(i)
        i = sum(5,'c')
        //5c 也是相当于拼接
        alert(i)
        
        
        var username ="jack"
        function accessName(username){
            var username = "张三"
            alert("hello" + username)
        }
        accessName(username)
        alert("hello" + username)
        //如果一个变量声明没有用var关键字它就是全局变量
    </script>
    <body>
    </body>
</html>

数据类型

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js数据类型</title>
    </head>
    <body>
        <script>
            //js数据类型
            //原始类型Undefined\Number\String\Boolean\Null
            //引用类型Object以及Object的子类
            /*
            ES规范ES6之后又加了一种新类型Symbol
            运算符typeof 程序运行阶段可以动态获取变量的数据类型
            */
           function sum(a,b){
               if(typeof a == "number" && typeof b == "number"){
                   alert("和是"+(a+b))
               }else{
                   alert("类型不符合")
               }
               
           }
           sum(10,2)
        </script>
    </body>
</html>
​

boolean

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        <script>
            // 0 "" NaN null undefined 都是false
            //Null类型只有一个值null但是Null的typeof 值是 
        </script>
    </body>
</html>

number

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Number类型</title>
    </head>
    <body>
        <script>
            var i = 1;
            //isNaN() is not a number  true 不是个数字
            alert(isNaN(i))
            //将字符串变成数字取整数部分
            alert(parseInt("3.99"))
            //将字符串变成数字   55.661
            alert(parseFloat("54.66"+1)+1)
            //向上取整
            alert(Math.ceil(33.3))
        </script>
    </body>
</html>
​

String

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    
    <body>
        <script>
            var x = "abc"
            var y = new String("haha")
            alert(typeof x)//string
            alert(typeof y)//object
            /*
            indexof  指定字符串第一次出现的位置
            lastindexof 指定字符串最后一次出现的位置
             replace 替换 只能替换一个
             substr(2,4)    截取 长度  
             substring(2,4)   截取 位置
            */
            
            alert("abcdefgh".substr(2,4))
            alert("abcdefgh".substring(2,4))
        </script>
    </body>
</html>
​

null

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>null NaN Undefined</title>
    </head>
    <body>
        <script>
            //==等同运算符
            //===全等运算符 即判断值是否相等又判断数据类型是否相等
            
            alert(typeof null)//object
            alert(typeof NaN)//number
            alert(typeof undefined)//undefined
            alert(null == NaN)//false
            alert(null == undefined)//true
            alert(NaN == undefined)//false 
            alert(null === NaN)//false
            alert(null === undefined)//false 
            alert(NaN === undefined)//false 
        </script>
    </body>
</html>
​

JS类

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>js实例</title>
    </head>
    <body>
        <script>
            function User(a,b,c){
                this.sno = a;
                this.sname = b;
                this.sage = c;
            }
            var user = new User(111,"张三",33)
            alert(user.sname)
            alert(user["sno"])//111
            //字符串扩展函数
            String.prototype.suiyi = function(){
                alert("这是扩展函数")
            }
            "abc".suiyi()
        </script>
    </body>
</html>

代码执行顺序

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>代码执行顺序</title>
    </head>
    <!--onload="ready()"-->
    <body >
        <script>
            //不加onload是有问题的 无法显示
            // window.onload = function(){
            //  document.getElementById("hello").onclick = function(){
            //      alert("呵呵")
            //  }
            // }
            window.onload = ready;
            function ready(){
                document.getElementById("hello").onclick = function sayhe(){
                    alert("say 呵呵")
                }
            }
            // function ready(){
                
            //  // document.getElementById("hello").onclick = function(){
            //  //  alert("hello ya haha")
            //  var i = document.getElementById("hello")
            //  i.onclick = function(){
            //  alert("hello js")   
            //  }
                
            // }
        </script>
        <input type="button" value="hello" id="hello"/>
    </body>
</html>

JS常用事件

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS事件</title>
    </head>
    <body>
        <script>
            /*
            blur 失去焦点
            focus 获得焦点
            
            click 鼠标点击
            dblclick 鼠标双击
            
            keydown 键盘按下
            keyup 键盘弹起
            
            mousedown鼠标按下
            mouseover 鼠标经过
            mousemove 鼠标移动
            mouseout 鼠标离开
            mouseup 鼠标弹起
            
            reset表单重置
            submit表单提交
            
            change下拉列表选项中项改变文本框内容改变
            load 页面加载完毕后
            select 文本被选定
            
            任何一个事件都会对应一个事件句柄，事件句柄是在事件前添加on
            事件句柄出现在标签的属性中
            
            回调函数  就是自己写出来函数 让别的程序调用自己不调用
            
            */
           
           function hello(){
               alert("hello everyone")
           }
        </script>
        <!--注册事件的第一个方法
        将hello注册到按钮上，事件发生后浏览器调用
        -->
        <input type="button" value="hello" onclick="alert('I love you')" />
    </body>
</html>
​
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JS常用事件2</title>
    </head>
    <body>
        <input type="button" value="hello" id="mybutton" />
        <input type="button" value="haha" id="ha"/>
        <script>
            function handsome(){
                alert("you are handsome")
            }
            /*
            第一步先获取对象
            */
           var mbt = document.getElementById("mybutton")
           /*
           第二步给按钮对象赋值
           */
          mbt.onclick = handsome  //别加小括号  加了会直接显示 you are handsome 不会当按下按钮后
          
          //简便写法
          document.getElementById("ha").onclick = function sayha(){
              alert("are you OK?")
          }
        </script>
    </body>
</html>

捕捉回车键

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>捕捉回车键</title>
    </head>
<!--    <input type="button" id="mybt" value="hello" />
    <input type="text" id="mytext" /> -->
    <input type="text" id="usetext" />
    <body>
        
        <script>
            // document.getElementById("mybt").onclick = function(){
            //  var i = document.getElementById("mytext")
            //  i.type = "checkbox"
            //回车键键值13
            //Esc键值是27
            
            var mt = document.getElementById("usetext")
            mt.onkeydown = function(event){
                if(event.keyCode === 13){
                    alert("正在验证")
                }
            }
            
        </script>
    </body>
</html>
​

void运算符

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>void运算符</title>
    </head>
    <body>
        <!--必须写javascript:  说明后面是JavaScript的一段代码   void运算符目前就这一个用法-->
        <a href="javascript:void(0)" onclick="window.alert('不要跳转')">
            既保留超链接的样式又执行js代码但是页面还不能跳转
        </a>
    </body>
</html>

控制语句

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>控制语句</title>
    </head>
    <body>
        <script>
            //数组内容任意，长度自动扩容
            
            // var arr = [false,true,"haha",54,'c',"啥都行"]
            
            // for(var i =0; i < arr.length; i++){
            //  alert(arr[i])
            // }
            
            //for in   i是arr数组元素的下标
            //还有定义的类中的成员变量 比如 user["username"]也是代表user.username
            // for(var i in arr){
            //  alert(arr[i])
            // }
            
            function User(a,b){
                this.username = a;
                this.password = b;
            }
            
            var u =new User("张三","111");
            for(var shuXingMing in u){
                alert(u[shuXingMing])
            }
            
            
        </script>
    </body>
</html>
​

DOM编程

JS包括三大块

1、ECMA

js核心语法

2、DOM

文本对象模型，对网页中的节点进行增删改查

3、BOM

浏览器对象模型，关闭浏览器窗口，打开窗口，前进、后退浏览器地址栏的地址等

BOM 包括 DOM

获取文本框内容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>获取文本框内容</title>
    </head>
    <body>
        <script>
            window.onload = function(){
                var bt = document.getElementById("bt")
                bt.onclick = function(){
                    var mytext = document.getElementById("text")
                    alert(mytext.value)
                }
            }
        </script>
        
        <input type="text" id="text" />
        <input type="button" value="获取文本框内容" id="bt" />
    </body>
</html>

innerHTML和innerText

innerHTML会把内容当作html代码执行

innerText会当作字符串

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>内容显示到div中</title>
        <style type="text/css">
            div{
                border: 1px red solid;
                background-color: skyblue;
                width: 300px;
                height: 300px;
                position: absolute;
                top: 200px;
                left: 200px;
                color: lawngreen;
                font-size: large;
            }
        </style>
    </head>
    <body>
        <script>
            window.onload = function(){
                document.getElementById("button").onclick = function(){
                    document.getElementById("div1").innerHTML = document.getElementById("usetext").value
                }
            }
        </script>
        <div id="div1">
        </div>
        <input type="button" value="传递" id="button" />
        <input type="text"    id="usetext" />
    </body>
</html>
​

 

正则表达式

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>正则表达式</title>
    </head>
    <body>
        <script>
            var regExp = /正则表达式/flags;
            var regExp1 = new("正则表达式"，"flags")
            test("用户字符串")//true 或 false
        </script>
    </body>
</html>

扩展trim函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>扩展trim</title>
    </head>
    <body>
        <script>
             
            String.prototype.trim = function(){
                return this.replace(/^\s+/,"").replace(/\s+$/,"")
            }
            
            window.onload = function(){
                document.getElementById("bu").onclick = function(){
                    var n = document.getElementById("te").value
                    n = n.trim()
                    alert("--->" + n + "<---")
                }
            }
        </script>
    </body>
    <input type="button" id="bu" value="获取用户名"/>
    <input type="text" id="te"  />
</html>
​

实例

注册界面

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>实战</title>
        <style type="text/css">
            span{
                font-size: 12px;
                color: red;
            }
        </style>
    </head>
    <body>
        <script>
            
            //span验证报错
            function spanemailerror(){
                var regExp = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
                var email = document.getElementById("email").value
                var ok = regExp.test(email)
                if(!ok){
                        document.getElementById("emailerror").innerText = "您输入的邮箱格式有误，请重试"
                }
            }
            
            function spanemailfocus(){
                if(document.getElementById("emailerror").innerText != ""){
                    document.getElementById("email").value = ""
                    document.getElementById("emailerror").innerText = ""
                }
            }
            
            //用户名报错
            function spanusernameerror(){
                var regExp = /^[a-zA-Z0-9]{6,14}$/
                var username = document.getElementById("username").value
                var ok = regExp.test(username)
                if(!ok){
                        document.getElementById("usernameerror").innerText = "您输入的用户名格式有误，请重试"
                }
                if((username === "")){
                    document.getElementById("usernameerror").innerText = "用户名不能为空"
                }
            }
            
            function spanusernamefocus(){
                if(document.getElementById("usernameerror").innerText != ""){
                    document.getElementById("username").value = ""
                    document.getElementById("usernameerror").innerText = ""
                }
            }
            //密码验证
            function spanpassworderror(){
                if(!(document.getElementById("password1").value === document.getElementById("password2").value ) ){
                    document.getElementById("passworderror").innerText = "两次输入的密码不同，请重试"    
                }
            }
            
            function spanpasswordfocus(){
                if(document.getElementById("passworderror").innerText != ""){
                    document.getElementById("password2").value = ""
                    document.getElementById("passworderror").innerText = ""
                }
            }
            
            
            function zhuce(){
                if(document.getElementById("passworderror").innerText == "" && document.getElementById("usernameerror").innerText =="" &&
document.getElementById("emailerror").innerText == ""){
document.getElementById("form").submit()
     }
    }



</script>
<!--表单提交是post-->
<form action="http://www.baidu.com" method="get" id="form">
<table>
<tr>
<td>
    邮箱
</td>
<td>
<input type="text"  id="email" onblur="spanemailerror()"  onfocus="spanemailfocus()"/>
</td>
<td>
<span id="emailerror"></span>
</td>
<tr>
<td>
    用户名
</td>
<td>
<input type="text"  id="username" onblur="spanusernameerror()" onfocus="spanusernamefocus()" />
</td>
<td>
<span id="usernameerror"></span>
</td>
</tr>
<tr>
<td>密码</td>
<td>
<input type="text" id="password1"/>
</td>
<!--    <td>
<span id="passworderror1"></span>
</td> -->
</tr>
<tr>
<td>确认密码</td>
<td>
<input type="text"  id="password2"  onblur="spanpassworderror()"  onfocus="spanpasswordfocus()"/>
</td>
<td>
<span  id="passworderror"></span>
</td>
</tr>
<tr>
<td>
<input type="reset" value="重置" id="reset" />
<input type="button" value="注册" id="regist"  onclick="zhuce()"/>
</td>
</tr>
</table>
</form>
</body>
</html>
​

复选框全选与取消

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>复选框的全选与取消</title>
    </head>
    <body>
<!--        <script>
        window.onload = function(){
                var allchoose = document.getElementById("allchoose")
                allchoose.onclick = function(){
                    var hobby = document.getElementsByName("hobby")
                    if(allchoose.checked){
                        for(var i = 0; i < hobby.length; i++){
                            hobby[i].checked = true
                        }
                    }else{
                        for(var i = 0; i < hobby.length; i++){
                            hobby[i].checked = false
                        }
                    }
                }
            }
        </script> -->
                </script>
        <input type="checkbox" id="allchoose" value="全选"  /><br>
        <input type="checkbox" name="hobby" value="吸烟" />吸烟<br>
        <input type="checkbox" name="hobby" value="喝酒" />喝酒<br>
        <input type="checkbox" name="hobby" value="吃肉" />吃肉<br>
        <input type="checkbox" name="hobby" value="滑雪" />滑雪<br>
        <input type="checkbox" name="hobby" value="打游戏" />打游戏<br>
        <input type="checkbox" name="hobby" value="旅游" />旅游
    </body>
</html>

获取下拉列表选中选项的value

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>获取下拉列表选中项的value</title>
    </head>
    <body>
        <!-- 方式1
        <select onchange="alert(this.value)">
            <option value="001">河北</option>
            <option value="002">河南</option>
            <option value="003">山东</option>
            <option value="004">湖北</option>
        </select> -->
        
        
        <script>
            window.onload = function(){
                var select = document.getElementById("select")
                select.onchange = function(){
                    alert(select.value)
                }
            }
        </script>
        <select id="select">
            <option value="001">河北</option>
            <option value="002">河南</option>
            <option value="003">山东</option>
            <option value="004">湖北</option>
        </select>
    </body>
</html>
​

周期函数setlnterval

    <!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
    <!--    <script>
            var nowTime = new Date()
            document.write(nowTime)  //Tue Nov 10 2020 16:37:38 GMT+0800 (中国标准时间)
        //nowTime = nowTime.toLocaleString() //2020/11/10 下午4:38:45
        document.write("<br />") //换行
        var year = nowTime.getFullYear()
        var month = nowTime.getMonth()+1
        var day = nowTime.getDate()
        var hour = nowTime.getHours()
        var min = nowTime.getMinutes()
        var sec = nowTime.getSeconds()
        
        document.write("今天是"+ year + "年" + month + "月" + day + "日" + hour + ":" + min+":" + sec)
        //今天是2020年11月10日16:44:56
        </script> -->
        
        <script>
            
                function displayTime(){
                    var nowTime = new Date()
                    var srtTime = nowTime.toLocaleString() 
                    document.getElementById("clock").innerText = srtTime
                }
                
                 function start(){
                     v = window.setInterval("displayTime()",1000)
                 }
                
                 function end(){
                    window.clearInterval(v)
                 }
        </script>
        
        <input type="button" value="显示时间" onclick="start()" />
        <input type="button" value="暂停时间"  onclick="end()"/>
        <div id="clock"></div>
    </body>
</html>
​

Array

会自动扩容

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Array</title>
    </head>
    <body>
        <script>
            var arr = [1,2,3,false,'c',"string"]
            alert(arr.length)
            arr[7] = "test"
            for(var i = 0; i< arr.length ; i++){
                document.write("<br>")
                document.write(arr[i])
            }
            //0
            var arr1 = new Array()
            alert(arr1.length)
            //3
            var arr2 = new Array(3)
            alert(arr2.length)
            //这个内容是2和3  长度是2
            var arr3 = new Array(2,3)
            alert(arr3.length)
            
            
            //方法
            
            //-连接
            var str = arr.join("-")
            alert(str)
            
            //入栈
            arr.push(100)
            alert(arr.join("-"))
            
            //弹栈
            var end = arr.pop()
            alert(end)
            
            //反转
            arr.reverse()
            alert(arr.join("="))
        </script>
    </body>
</html>

open 和 close

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>open和close</title>
    </head>
    <body>
        <input type="button" value="开启百度窗口"  onclick="window.open('http://www.baidu.com')" />
        <input type="button" value="开启百度窗口(benshen)"  onclick="window.open('http://www.baidu.com','_self')" />
        <input type="button" value="开启百度窗口"  onclick="window.open('http://www.baidu.com')" />
        <input type="button" value="开启百度窗口"  onclick="window.open('http://www.baidu.com')" />
        <input type="button" value="开启窗口"  onclick="window.open('close.html')" />
    </body>
</html>
​
//close.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>close</title>
    </head>
    <body>
        <input type="button" value="关闭窗口"  onclick="window.close()"/>
    </body>
</html>
​

消息确认框

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>消息确认框</title>
    </head>
    <body>
        <script>
            function del(){
                var ok =  window.confirm("亲，确定要删除数据吗")
                if(ok){
                    alert("数据正在删除")
                }else{
                    alert("已取消")
                }
            }
        </script>
        <input type="button" value="消息弹出框" onclick="alert('消息框')" />
        <input type="button" value="消息弹出框" onclick="del()" />
    </body>
</html>
​

哪些方法可以通过浏览器往服务器发数据

1、表单form提交

2、超链接

3、document.location

4、window.location

5、window.open("url")

6、直接在浏览器地址栏上输入url回车

但是只有表单提交的数据是动态的

历史

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>history</title>
    </head>
    <body>
        <!--这个不能后退
        <input type="button" value="001" onclick="window.open('001.html')" />-->
        <a href="001.html" >001</a>
        <input type="button" value="前进" onclick="window.history.go(1)" />
    </body>
</html>

后退

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        001.page！
        <input type="button" value="后退" onclick="window.history.back()" />
        <input type="button" value="后退" onclick="window.history.go(-1)" />
    </body>
</html>
​

设置地址栏的URL

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置地址栏的URL</title>
    </head>
    <body>
        <script>
            function goBaiDu(){
                //1、
                // var obj = window.location
                // obj.href = "http://baidu.com"
                //2、
                document.location.href = "http://baidu.com"
            }
        </script>
        <input type="button" value="百度" onclick="goBaiDu()" />
    </body>
</html>

将窗口设置成顶级窗口

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>窗口设置成顶级窗口</title>
    </head>
    <body>
        <script>
            //当前窗口是不是顶级窗口，设置成顶级窗口
            
        </script>
        <iframe src="002.html" width="500px" height="500px"></iframe>
    </body>
</html>
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
    </head>
    <body>
        002页面
        <script>
            function setTop(){
                
                console.log(window.top != window.self)
                if(window.top != window.self){
                    window.top.location = window.self.location
                }
                
                
            }
        </script>
        <input type="button" value="点击" onclick="setTop()" />
    </body>
</html>

JSON

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>JSON在开发中的应用</title>
    </head>
    <body>
        <script>
            //java script object notation(数据交换格式) 对象标记
            //体积小，易解析 标准轻量 另一个是XML(体积大，解析麻烦，但是严谨，银行用)
            //c语言和Java进行数据交换用JSON
            //JSON可以称为无类型
            //JSON
            var jn = {"sno":"110","sname":"张三","sage":"23"}
            alert(jn.sname+","+jn.sage+","+jn.sno)
            
            //以前要定义类 麻烦
            function Student(sno,sname,sage){
                this.sno = sno  
                this.sname = sname
                this.sage = sage
                
            }
            var s = new Student("120","李四","25")
            alert(s.sname+","+s.sage+","+s.sno)
            //JSON
            var students = [
                {"sno":"110","sname":"张三","sage":"23"},
                {"sno":"120","sname":"李四","sage":"24"},
                {"sno":"130","sname":"王五","sage":"25"},
                {"sno":"140","sname":"马六","sage":"26"},
                ]
            for(var i = 0; i < students.length; i++){
                var ss = students[i]
                alert(ss.sname+","+ss.sage+","+ss.sno)
            }
        </script>
    </body>
</html>
​

eval函数

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>eval函数</title>
    </head>
    <body>
        <script>
            //将字符串当作一段js代码解释并执行
                window.eval("var i = 100")
                alert(i)
                
                //从Java中传来的是json的字符串，通过eval函数将字符串转成json对象
                var fromJava = "{'city' : '北京','number' : 123456,'区' :'海淀区'}"  //这里会有转义字符所以必须写在一行上面
                
                window.eval("var jsonObject = "+ fromJava)
                alert(jsonObject.city + "--" + jsonObject.区)
                
        </script>
    </body>
</html>
​

将json的内容写进table

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>设置table的tbody</title>
    </head>
    <body>
        <script>
            //有些数据
            var data = {
                "total":4,
                "emps":[
                    {"empno":7000,"ename":"张三","sal":800},
                    {"empno":7001,"ename":"李四","sal":900},
                    {"empno":7002,"ename":"王五","sal":1000},
                    {"empno":7003,"ename":"马六","sal":1100}
                ]
            }
            
            //希望将数据写入table
            window.onload = function(){
                var button = document.getElementById("button")
                button.onclick = function(){
                    var html=""
                    emp = data.emps
                    for(var i = 0; i < emp.length; i++){
                        html += "<tr>"
                        html +="<td>" +emp[i].empno+"</td>"
                        html +="<td>" +emp[i].ename+"</td>"
                        html +="<td>" +emp[i].sal+"</td>"
                        html += "</tr>"
                    }
                    document.getElementById("tbody").innerHTML = html
                    document.getElementById("span").innerHTML = data.total
                }
            }
        </script>
        <input type="button" value="显示员工信息" id="button" />
        <h2>员工信息列表</h2>
        <hr />
        <table border="1px" width="50%" id="table">
            <tr>
                <td>员工编码</td>
                <td>员工姓名</td>
                <td>工资</td>
            </tr>
            <tbody id="tbody"></tbody>
                <!-- <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td></td>
                </tr>
                <tr>
                    <td></td>
                    <td></td>
                    <td>/td>
                </tr>
<tr>
<td>/td>
<td></td>
<td></td>
</tr> -->
</tbody>
</table>
    共<span id="span">0</span>条信息
</body>
</html>
​



posted @ 2020-11-11 21:18  慕阳沐阳  阅读(182)  评论(1)  编辑  收藏  举报