Java-day21学习笔记

最新推荐文章于 2024-09-21 11:34:18 发布

ChangeNone

最新推荐文章于 2024-09-21 11:34:18 发布

阅读量153

点赞数

分类专栏： Java学习笔记文章标签： javascript 按键事件点击事件

本文链接：https://blog.csdn.net/ChangeNone/article/details/113188600

版权

Java学习笔记专栏收录该内容

21 篇文章 0 订阅

订阅专栏

day20复习

在这里插入图片描述

一、函数

js中的函数就是具有特定功能的代码块，用来简化对代码的操作。

此函数相当于Java的方法

1.1 格式

普通函数

function 函数名(形参列表){
	
	函数的内容;
	return 返回值;
}

注意：如果需要返回值的话再用return返回结果。如果不需要返回值的话，就需要return

匿名函数

function (形参列表){
	
	函数的内容;
	return 返回值;
}

1.2 调用

var 变量名 = 函数名(实际参数);

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-普通函数的格式</title>

    <script>

        function sum(a, b){

            //这种直接打印的就不需要返回值了
            // console.log(a + b);

            //需要返回值的
            return a + b;
        }

        //直接调用
        sum(3, 5);

        //输出调用
        // console.log(sum(3, 5));

        //赋值调用
        var result = sum(3, 5);
        console.log(result);

    </script>

</head>
<body>

</body>
</html>

二、事件

事件就是HTML元素（标签）做的的某些事情，（比如用户点击或者输入这种都被称为是事件）

事件一般都需要和js中的函数进行搭配使用，因为触发事件之后可以通过函数完成相应的功能。

2.1 绑定事件的两种方式

第一种：设置标签的属性

直接在HTML标签上写上相关事件的属性即可

<input type="button" value="普通按钮" onclick="clickme()">

第二种：匿名函数的方式

先获取到要绑定的HTML元素（标签）对象，然后再通过获取到的HTML元素的对象去调用相关的事件即可

<script>

    //1. 先获取要绑定元素的对象
    var ipt = document.getElementById("btn");
    // alert(ipt);   //[object HTMLInputElement]

    //2. 绑定
    ipt.onclick = function (){

        alert("I'm clicked");
    }

</script>

事件绑定

2.2 常常见事件

鼠标单击和双击

onclick
ondbclick

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-鼠标单击和双击</title>
</head>
<body>

<input type="button" id="btn" value="普通按钮">

</body>
</html>

<script>

    var ipt = document.getElementById("btn");

    // ipt.onclick = function (){
    //     alert("被单击了...");
    // }
    ipt.ondblclick = function (){
        alert("被双击了...");
    }
    
</script>

失去焦点和获取焦点

onblur
onfocus

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-失去焦点和获取焦点</title>
</head>
<body>

<input type="text" id="ipt">

</body>
</html>

<script>

    var ipt = document.getElementById("ipt");

    ipt.onblur = function () {

        console.log("失去焦点了...");
    }
    ipt.onfocus = function () {

        console.log("获取焦点了...");
    }
    
</script>

失去焦点和获取焦点

鼠标移入和移出

onmouseover
onmouseout

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>04-鼠标移入和移出</title>
</head>
<body>

<img src="../img/mr.jpg" id="pic">

</body>
</html>

<script>

    var pic = document.getElementById("pic");

    pic.onmouseover = function () {

        console.log("鼠标移入图片了...");
    }
    pic.onmouseout = function () {

        console.log("鼠标移出图片了...");
    }

    // pic.onmousemove = function () {
    //
    //     console.log("鼠标在移动...");
    // }

</script>

键盘的按下和抬起

onkeydown
onkeyup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>05-键盘按下和抬起</title>
</head>
<body>

<input type="text" id="ipt">

</body>
</html>

<script>

    var ipt = document.getElementById("ipt");

    ipt.onkeydown = function () {

        console.log("按键按下了...");
    }
    ipt.onkeyup = function () {

        console.log("按键抬起了...");
    }
    // ipt.onkeypress = function () {
    //
    //     console.log("按键按死了...");
    // }


</script>

改变事件

onchange

页面加载事件

onload

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>06-改变事件</title>

    <script>

        //方式一：结合body标签的onload事件
        // function load(){
        //     var slt = document.getElementById("slt");
        //     slt.onchange = function () {
        //
        //         console.log("内容改变了...");
        //     }
        // }

        //方式二：结合页面加载事件
        window.onload = function () {

            var slt = document.getElementById("slt");
            slt.onchange = function () {

                console.log("内容改变了...");
            }
        }

    </script>

</head>
<!--<body onload="load()">-->
<body >

<select id="slt">
    <option value="bj">北京</option>
    <option value="lz">兰州</option>
    <option value="sh">上海</option>

</select>

</body>
</html>

表单提交事件

onsubmit

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>07-表单提交事件</title>

</head>
<body>

<form action="http://www.baidu.com" onsubmit="return check()">

    <input type="text" id="username" name="username"> <br>
    <input type="password" id="password" name="password"> <br>

    <input type="submit" value="提交">

</form>

</body>
</html>

<script>

function check(){

    // return true;
    return false;
}

</script>

练习：表单校验

1. 一个表单中有用户名、密码、确认密码三个内容
2. 用户名、密码、确认密码不为空且两个密码保持一致的时候注册成功

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>08-表单校验</title>
</head>
<body>

<form action="https://www.baidu.com" onsubmit="return check()">

    账号：<input type="text" id="user" name="username"> <br>
    密码：<input type="password" id="pwd" name="password"> <br>
    确认密码：<input type="password" id="repwd" name="repassword"> <br>

    <input type="submit" value="提交">

</form>

</body>
</html>

<script>

    function check(){

        // var user = document.getElementById("user");
        // var username = user.value;
        var user = document.getElementById("user").value;
        var pwd = document.getElementById("pwd").value;
        var repwd = document.getElementById("repwd").value;

        if(user != ""){
            if(pwd != "" && repwd != "" && pwd == repwd){
                alert("注册成功");
                return true;
            }else{
                alert("请确保密码一致，并且都不为空");
                return false;
            }
        }else{
            alert("用户名不能为空！");
            return false;
        }

    }

</script>

三、Date对象

3.1 创建方式

var date = new Date();
var date = new Date(年, 月, 日);
var date = new Date(年, 月, 日, 十, 分, 秒);

注意：此处的月份是从0开始的，也就是说想要显示11月份儿的话，只需要写上10创建就可以了。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>01-创建日期对象</title>
</head>
<body>

</body>
</html>

<script>

    var date = new Date();
    // console.log(date);

    var date2 = new Date(2020, 1, 3);
    // console.log(date2);

    var date3 = new Date(1949, 9, 1, 13, 11, 55);
    // console.log(date3);

</script>

3.2 常见函数

Date()				返回当日的日期和时间   【此方法直接输出即可，不需要通过对象调用】
getDate()			从 Date 对象返回一个月中的某一天 (1 ~ 31)。
getDay()			从 Date 对象返回一周中的某一天 (0 ~ 6)。
getMonth()			从 Date 对象返回月份 (0 ~ 11)。
getFullYear()		从 Date 对象以四位数字返回年份。
getYear()			请使用 getFullYear() 方法代替。
getHours()			返回 Date 对象的小时 (0 ~ 23)。
getMinutes()		返回 Date 对象的分钟 (0 ~ 59)。
getSeconds()		返回 Date 对象的秒数 (0 ~ 59)。

setDate()			设置 Date 对象中月的某一天 (1 ~ 31)。
setMonth()			设置 Date 对象中月份 (0 ~ 11)。
setFullYear()		设置 Date 对象中的年份（四位数字）。
setYear()			请使用 setFullYear() 方法代替。
setHours()			设置 Date 对象中的小时 (0 ~ 23)。
setMinutes()		设置 Date 对象中的分钟 (0 ~ 59)。
setSeconds()		设置 Date 对象中的秒钟 (0 ~ 59)。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>02-获取方法</title>

    <script>

        var date = new Date();

        date.setFullYear(1919);
        date.setMonth(5);
        date.setDate(30);

        console.log(Date());
        console.log(date.getDate())
        console.log(date.getMonth() + 1);
        console.log(date.getFullYear());
        console.log(date.getHours());
        console.log(date.getMinutes());
        console.log(date.getSeconds());
        console.log(date.getMilliseconds());


    </script>

</head>
<body>

</body>
</html>

四、BOM

Browser Object Model 浏览器对象模型。为了便于对浏览器的操作，JavaScript封装了对浏览器中各个对象，使得开发者可以方便的操作浏览器中的各个对象。

4.1 Window对象方法

方法	作用
alert()	显示带有一段消息和一个确认按钮的警告框
confirm()	显示带有一段消息以及确认按钮和取消按钮的对话框
prompt	弹出输入框
setInterval(‘函数名()’,time)	按照指定的周期（以毫秒计）来调用函数或计算表达式
setTimeout(‘函数名()’,time)	在指定的毫秒数后调用函数或计算表达式
clearInterval()	取消由 setInterval() 设置的 Interval()
clearTimeout()	取消由 setTimeout() 方法设置的 timeout

练习：用定时器输出5次"hello js"后停止

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>03-练习</title>

    <script>

        //先声明一个变量，用来统计次数
        var count = 0;

        var close = setInterval(function (){


            count++;
            document.write("hello js!");

            if(count == 5){

                clearTimeout(close);
            }

        }, 2000)

    </script>

</head>
<body>

</body>
</html>