day16-Dom提交表单以及其他

一、前言

　　之前我们学习的是from提交表单，那个是html的提交表单方式，现在我们用dom来提交表单，还有一些其他的方式

二、dom提交表单

2.1、html提交表单

说明：form标签跟submit类型的input标签结合

1
2
3
4
5
6
<body>
    <form id="f1" action="http://www.baidu.com">
        <input type="text"/>
        <input type="submit" value="提交"/> //必须是input标签，type必须是submit类型
    </form>
</body>

2.2、dom提交表单

说明：用dom提交表单，任何标签都可以提交表单，比如说：a标签、div标签都可以。

1
document.getElementById("from_id").submit();

完整代码：

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <form id="f1" action="http://www.baidu.com"> //设置表单id
        <input type="text"/>
        <a onclick="submitForm();" style="cursor: pointer;">提交</a>  //注册事件
    </form>
 
    <script>
        function submitForm(){
            document.getElementById("f1").submit();  //通过dom提交表单
        }
    </script>
</body>

三、其他

3.1、输出框

1
2
3
console.log                 输出框
alert                       弹出框
confirm                     确认框

重点强调confirm，例如：

1
2
3
4
5
6
var v = confirm("删除？");
console.log(v);
 
#输出
确定：true
取消：false

3.2、url和刷新

1
2
3
location.href               获取URL
location.href = "url"       重定向
location.reload()           重新加载

① location.href

说明：获取当前url

1
2
>>>location.href
"http://localhost:63342/51homework/day16/m10.html"

② location.href = "url"

1
2
>>>location.href = "http://www.baidu.com"
"http://www.baidu.com"

3.3、定时器

1
2
3
4
setInterval                 多次定时器
clearInterval               清除多次定时器
setTimeout                  单次定时器
clearTimeout                清除单次定时器

① setInterval和clearInterval

说明：setInterval是定时器，一直执行。clearInterval清除setInterval定时器

1
2
3
4
5
6
var obj = setInterval(function(){
                console.log(1);
                clearInterval(obj);//执行一次就清除定时器
            },5000);
 
//clearInterval(obj);//一次都不执行

② setTimeout和clearTimeout

说明：setTimeout也是定时器，但是只执行一次

1
2
3
var obj = setTimeout(function(){
                console.log("timeout");
            },5000);  //表示过5s钟之后，才执行上面的函数

 实际使用场景：当我删除一个内容的时候，删除信息过几秒钟消失，就跟QQ邮箱，删除信息一样，删除信息过几秒钟消失。

1
2
3
4
5
6
7
8
9
10
11
12
13
<body>
    <div id="status"></div>
    <input type="button" value="删除" onclick="deleteEle();">
 
    <script>
        function deleteEle(){
            document.getElementById("status").innerText = "已删除";
            setTimeout(function(){
                document.getElementById("status").innerText = "";
            },5000);  //过5秒钟清空已删除提示
        }
    </script>
</body>
posted @ 2018-05-23 10:08  东郭仔  阅读(89)  评论(0)    收藏  举报