Event 对象与如何在网页中显示当前时间

最新推荐文章于 2024-10-10 16:20:55 发布

Ricardo_Y_Lu

最新推荐文章于 2024-10-10 16:20:55 发布

阅读量223

点赞数

分类专栏：学习成果

本文链接：https://blog.csdn.net/Ricardo_Y_Lu/article/details/81459956

版权

学习成果专栏收录该内容

10 篇文章 0 订阅

订阅专栏

Event对象

Event 对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
onclick 鼠标点击某个对象
onchange 用户改变域的内容
onfocus、onblur 元素获得焦点、失去焦点时触发
onmousemove 鼠标被移动
onmouseover 鼠标被移到某元素之上
onmouseout 鼠标从某元素移开
onmousedown、onmouseup 某个鼠标按键被按下、被松开时触发
onsubmit、onreset 提交按钮、重置按钮被点击
onload 某个页面或图像被完成“加载”
具体示例：

<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
        <script>
            function a(){
                console.log("兴唐");
            }
            function b(){
                console.log("郑州");
            }
            function c(){
                console.log("中国");
            }
            function d(){
                document.getElementById("image").src="img/2.jpg";
            }
            function result(){
                return false;
            }
        </script>
    </head>
    <body onload="d()"><!--onload标签放在body标签内 意味着最后执行这个方法-->
        <!--onclick 点击效果-->
        <img id="image" />
        <div onclick="a()">按钮</div> 
        <!--onchange 切换效果-->
        <select onchange="a()">
            <option>一年级</option>
            <option>二年级</option>
            <option>三年级</option>
            <option>四年级</option>
        </select>
        <!--onfocus 获取焦点-->
        <textarea onfocus="a()"></textarea>
        <!--onblur 失去焦点-->
        <textarea onblur="b()"></textarea>
        <!--onmousemove 跟踪鼠标-->
        <div onmousemove="c()" style="border: 1px solid red; width: 300px; height: 300px;"></div>
        <!--onmouseover 移入区域时-->
        <div onmouseover="b()" style="border: 1px solid blue; width: 200px; height: 200px;"></div>
        <!--onmouseout 移出区域时-->
        <div onmouseout="c()" style="border: 1px solid blue; width: 200px; height: 200px;"></div>-->-->
        <!--onkeydown 按下键盘上的某个键时-->
        <textarea onkeydown="b()"></textarea>
        <!--onkeypress 按住键盘上的某个键时-->
        <textarea onkeypress="a()"></textarea>
        <!--onkeyup 按下键盘上的某个键，抬起时-->
        <textarea onkeyup="c()"></textarea><br />
        <!--onsubmit 用在form表单中，一定有return，根据返回的布尔代数决定是否执行submit命令-->
        <form action="https://www.baidu.com/s" onsubmit="return result()">
            <input name="wd" />
            <input type="submit" />
            <input type="reset" />
        </form>


    </body>
</html>

如何在网页中显示当前时间

script语句：首先定义一个对象Time,其中包含年月日时分秒等信息
使用date对象来进行定义
其中，date.getMonth的取值是0~11，因此为了达到应有的效果，需要让date.getMonth=date.getMonth+1
然后定义一个currentTime = year+”-“+month+”-“+day+”-“+hour+”:”+minute+”:”+second
利用document.getElementId(“”).innerHTML=currentTime将currentTime的值添加入html中相应id的标签中。
示例如下：

<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script>
            function Time(){
                var date = new Date();
                var year = date.getFullYear();
                var month = date.getMonth()+1;
                var day = date.getDate();
                var hour = date.getHours();
                var minute = date.getMinutes();
                var second = date.getSeconds();
                var weekday = date.getDay();
                month<10?month="0"+month:month;
                day<10?day="0"+day:day;
                hour<10?hour="0"+hour:hour;
                minute<10?minute="0"+minute:minute;
                second<10?second="0"+second:second;

                switch(weekday){
                    case 1:weekday="周一";break;
                    case 2:weekday="周二";break;
                    case 3:weekday="周三";break;
                    case 4:weekday="周四";break;
                    case 5:weekday="周五";break;
                    case 6:weekday="周六";break;
                    case 0:weekday="周七";break;
                }
                var currentTime = year+"-"+month+"-"+day+"-"+hour+":"+minute+":"+second+"&&&"+weekday;
//              console.log("currentTime:"+currentTime+"&&&"+weekday);
                document.getElementById("time").innerHTML = currentTime;
            }
            setInterval("Time()",1000);
            var names = "Ricardo";
            console.log(names.length);
            console.log(names.charAt(0));
            console.log(names.charAt(2));
        </script>
    </head>
    <body onload="Time()">
        <span id="time"></span>
    </body>
</html>