JS一部分基础复习

主要事件：用于表单

6个事件（onfocus：聚焦，onblur：失焦，onclick: 点击, onchange：内容改变后触发, onload：加载, onsubmit：提交）

HTML事件处理方式:

JS事件处理方式：

容易出错的地方：

1.表单中一般不建议用button来写

2.一般表单校验的事件，都会用form的onsubmit事件配套提交按钮（type="submit"）

3.type="submit"的时候，不能画蛇添足加onclick事件

bom:浏览器对象模型（browser object model）提供了浏览器窗口进行交互的对象（主要作用在于管理窗口和窗口的通讯）

2.bom由一系列的对象构成，这些对象有属性也有方法

1.window对象:窗口对象

(1). window.alert();

(2).window.prompt();

//提示框

    var like = window.prompt("请输入你的爱好!", "吃瓜");

     if (like != null && like != "") {

       console.log("我的爱好是" + like);

    }

(3).window.confim();

 var flag = window.confirm("请问你喜欢我吗？");
    var msg = document.getElementById("msg");
    if (flag == true) {
        msg.style.color = "red";
        msg.style.fontSize = "22px";
        msg.innerText = "真的吗，你确定";
        //动态的增加按钮
        msg.innerHTML = "<input type='button' value='出现' >";
    } else {
        msg.style.color = "green";
        msg.style.fontSize = "22px";
        msg.innerText = "是不是按错了";
    }

(4).window.setInterval(); 定时器

 <input type="button" value="定时器" οnclick="mytimer()"><br>
    <input type="button" value="停止定时器" οnclick="stoptimer()"><br>

  var time;
    function mytimer() {
        time = window.setInterval("myclock()", 1000);
    }

    function stoptimer() {
        window.clearInterval(time);
    }

    function myclock() {
        var date = new Date();
        var t = date.toLocaleTimeString();
        var msg = document.getElementById("msg");
        msg.innerText = t;
    }

2.window对象的子对象：history对象：(使用的几率小，代表浏览器的浏览历史)，浏览器的前进和后退

 <input type="button" value="gotoback" οnclick="gotoback()"><br>
    <input type="button" value="goforward" οnclick="goforward()"><br>

 function gotoback() {
        window.history.back();
    }

    function goforward() {
        window.history.forward();
    }

3.Navigator对象：访问者的浏览器详情对象，（使用的几率小，用户判断浏览器的信息）

  <input type="button" value="navigator" οnclick="shownavigator()">

 function shownavigator() {
        console.log("浏览器的名字是" + navigator.appName);
        console.log("浏览器的代码名是" + navigator.appCodeName);
        console.log("浏览器的版本是" + navigator.appVersion);
    }

4.window.open:使用的几率小 ( open用得少，用div+css代替 )

（1） innerText:一般用于动态改变文本，例如：表单下方的文字提示

（2）改变元素的样式：元素 .style.具体的样式名字=样式值

（3）innerHTML:一般用于改变span,div等元素的内容

focus事件的用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <form action="http://wwww.baidu.com" οnsubmit="return checkForm()">
        用户名: <input type="text" name="username" id="username"><br> 所在城市:
        <select id="select">
          <option value="0">泉州</option>
          <option value="1">福州</option>
          <option value="2">漳州</option>
          <option value="3">三明</option>
          <option value="4">龙岩</option>
          <option value="5">莆田</option>
        </select>
        <br> 密码: <input type="password" name="password" id="password"><br>
        <input type="submit" value="提交" />
        <input type="reset" value="重置" />
    </form>
</body>

</html>
<script>
    function checkForm() {

        var username = document.getElementById("username");
        var password = document.getElementById("password");
        var select = document.getElementById("select");
        if (username.value == "") {
            window.alert("用户名不得为空");
            //聚焦，当有错的时候，光标会回到当前文本输入框
            username.focus();
            return false;
        }

        if (password.value == "") {
            window.alert("密码不得为空");
            password.focus();
            return false;
        }

        return true;
    }
</script>

来源：CSDN

作者：走到天涯海角

链接：https://blog.csdn.net/weixin_42995083/article/details/104200983

标签

js代码

input

按钮