JavaScript学习笔记（二）（持续更新中）~

小耿i

已于 2024-03-22 08:55:05 修改

阅读量62

点赞数 1

分类专栏： JavaScript 文章标签： javascript 学习笔记

于 2023-06-03 10:18:15 首次发布

本文链接：https://blog.csdn.net/geng_____/article/details/131018239

版权

JavaScript 专栏收录该内容

7 篇文章 1 订阅

订阅专栏

JavaScript学习笔记（持续更新中）~

2.1、date对象

const date = new Date
console.log(date.getFullYear());		//获取当前日期对象的年份(四位数字年份)
console.log(date.getMonth());			//获取当前日期对象的月份(0 ~ 11)
console.log(date.getDate());			//获取当前日期对象的日数(1 ~ 31)
console.log(new Date().getHours());  	//获取当前日期对象的小时(0 ~ 23)
console.log(new Date().getMinutes());	//获取当前日期对象的分钟(0 ~ 59)
console.log(new Date().getSeconds());	//获取当前日期对象的秒(0 ~ 59)
console.log(date.getMilliseconds());	//获取当前日期对象的毫秒(0 ~ 999)

2.2、函数

//匿名函数
	function init(){
        console.log(111)
    }
    init()

    ;(function (){
        console.log("匿名")
    })()

    !(function (){
        console.log("匿名")
    })()

    ~(function (){
        console.log("匿名")
    })()

2.3、窗口事件

属性	描述
onblur	当窗口失去焦点时运行脚本。
onfocus	当窗口获得焦点时运行脚本。
onload	当文档加载之后运行脚本。
onresize	当调整窗口大小时运行脚本。
onstorage	当 Web Storage 区域更新时（存储空间中的数据发生变化时）运行脚本。

    onresize=function (){    //窗口大小改变的时候将页面宽度输出到控制台
    console.log(innerWidth)
  	}

	onscroll=function (){  //鼠标上下滚动时触发
      console.log(111)
  	}

2.4、表单事件

属性	描述
onblur	当元素失去焦点时运行脚本。
onfocus	当元素获得焦点时运行脚本。
onchange	当元素改变时运行脚本。
oninput	当元素获得用户输入时运行脚本。
oninvalid	当元素无效时运行脚本。
onselect	当选取元素时运行脚本。
onsubmit	当提交表单时运行脚本。

//onsubmit事件
    document.getElementsByTagName('form')[0].onsubmit = function () {
        if (document.getElementById('account').value !== 123) {
            return false
        }
        return true
    }

    oninput事件
    const account = document.getElementById('account') 
    //获取当前用输入时的运行脚本
    account.oninput = function () {
        console.log(account.value)
    }

    //onfocus获取焦点
    const account = document.getElementById('account')
    account.onfocus = function () {
        console.log(account.value)
    }

    //onblur失去焦点
    const account = document.getElementById('account')
    account.onblur = function () {
        console.log(account.value)
    }

    //onchange看内容是否改变，如果改变则触发
    account.onchange = function () {
        console.log(account.value)
    }

2.5、页面加载卸载事件

  onload=function (){  		//页面所有资源全部加载完毕才执行

    console.log("页面加载完毕")
  }

  onunload=function (even){  //一般用于一些清理工作，比如cookies等，但由于关闭页面的特								殊性，可能某部分工作无法完全完成
      even.preventDefault()  //清理默认事件，比如a标签的跳转可以屏蔽掉
  }

2.6、鼠标事件

属性	描述
onclick	当单击鼠标时运行脚本。
ondblclick	当双击鼠标时运行脚本。
onmousedown	当按下鼠标按钮时运行脚本。
onmouseup	当松开鼠标按钮时运行脚本。
onmousemove	当鼠标指针移动时运行脚本。
onmouseover	当鼠标指针移至元素之上时运行脚本，不可以阻止冒泡。
onmouseout	当鼠标指针移出元素时运行脚本，不可以阻止冒泡。
onmouseenter	当鼠标指针移至元素之上时运行脚本，可以阻止冒泡。
onmouseleave	当鼠标指针移出元素时运行脚本，可以阻止冒泡。
onmousewheel	当转动鼠标滚轮时运行脚本。
onscroll	当滚动元素的滚动条时运行脚本。

2.7键盘事件

属性	描述
onkeydown	当按下按键时运行脚本。
onkeyup	当松开按键时运行脚本。
onkeypress	当按下并松开按键时运行脚本。

通过键盘事件控制div移动

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>键盘事件</title>
    <style>
        #div1 {
            width: 100px;
            height: 100px;
            background: red;
            position: absolute;
        }
    </style>
</head>
<body>
<div id="div1"></div>
</body>
</html>
<script>
    //鼠标按下
    const div1 = document.getElementById('div1')

    window.onkeydown = function (event) {
        console.log(event.keyCode)

        if (event.keyCode == 37) {
            console.log('左', div1.offsetLeft)
            div1.style.left = div1.offsetLeft - 10 + 'px'
            return
        }

        if (event.keyCode == 38) {
            console.log('上', div1.offsetTop)
            div1.style.top = div1.offsetTop - 10 + 'px'
            return
        }

        if (event.keyCode == 39) {
            console.log('右', div1.offsetLeft)
            div1.style.left = div1.offsetLeft + 10 + 'px'
            return
        }

        if (event.keyCode == 40) {
            console.log('下', div1.offsetTop)
            div1.style.top = div1.offsetTop + 10 + 'px'
            return
        }
    }

    //鼠标
</script>