Js_10_2_事件2

最新推荐文章于 2021-10-30 22:44:20 发布

小风儿

最新推荐文章于 2021-10-30 22:44:20 发布

阅读量464

点赞数

分类专栏： JavaScript

本文链接：https://blog.csdn.net/littlewindy520/article/details/68100544

版权

JavaScript 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

1.onChange事件

<input type="text" onChange = "theChange()" id="myInput" />
<input type="text" onpropertychange = "theChange1()" id="myInput1" />
<input type="text" oninput = "theChange2()" id="myInput2" />
<script type="text/javascript">
    //onchange
    //当输入框内的值发生改变，并在输入框内的值失去焦点 触发
    //onpropertychange
    //只能在IE下， 监测输入框里值的动态改变
    //oninput 
    //在普通浏览器下，实时监测输入框里值的改变
    function theChange() {
        var x = document.getElementById("myInput");
        x.value = x.value.toUpperCase();
        x.style.fontSize = 50 + "px";
    }
    function theChange1(){
        var y = document.getElementById("myInput1");
        y.value = y.value.toUpperCase();
    }
    function theChange2() {
        var x = document.getElementById("myInput2");
        x.value = x.value.toUpperCase();
        x.style.fontSize = 50 + "px";
    }
</script>

2.onsubmit事件

    总结：如果不阻止事件，可以在标签内直接绑定submit，或者在JS绑定onsubmit
    如果要阻止默认事件，需要在JS绑定onsubmit
    默认事件： 表单提交

<!--<form id="myForm" action="http://tieba.baidu.com/f" >  
    请输入搜索内容：<input type="text" name="kw" />
    <input type="submit" value="百度一下" id="mySubmit"/>
</form>
<script type="text/javascript">
    var myS = document.getElementById("myForm");
    myS.onsubmit = function(){
        return a();
        return false;//阻止submit 提交 
    }

    function a(){
        if(confirm("是否确认提交？")){
            alert("提交成功");
        }else{
            alert("提交失败");
        }
    }
</script>-->

<form onsubmit="mySubmit()" action="http://www.littlewindy.com/see_shi.php" >  
    请输入搜索内容：<input type="text" name="key" />
    <input type="submit" value="百度一下" />
</form>
<script type="text/javascript">

    function mySubmit(){
        if(confirm("是否确认提交？")){
            alert("提交成功");
        }else{
            alert("提交失败");
        }
    }
</script>

3.矩形碰撞检测

<style type="text/css">
    * {
        margin: 0;
        padding: 0;
    }

    #big {
        position: fixed;
        left: 100px;
        top: 100px;
        width: 500px;
        height: 500px;
        background: green;
        border: 1px solid black;
    }

    #small {
        width: 100px;
        height: 100px;
        background: black;
        position: absolute;
    }
</style>
</head>

<body>
<div id="big"></div>
<div id="small"></div>
<script type="text/javascript">
    var bigDiv = document.getElementById("big");
    var smallDiv = document.getElementById("small");
    smallDiv.onmousedown = function(ev) {
        document.onmousemove = function(ev) {
            evObj = ev || window.event;
            smallDiv.style.left = ev.clientX - smallDiv.offsetWidth / 2 + "px";
            smallDiv.style.top = ev.clientY - smallDiv.offsetHeight / 2 + "px";
            if(checkReckPeng(smallDiv, bigDiv)){
                alert("boom!");
            };
        }
    }

    function checkReckPeng(myobj, targetObj) {
        if(
              myobj.offsetLeft + myobj.offsetWidth >= targetObj.offsetLeft //左
            &&myobj.offsetTop + myobj.offsetHeight >= targetObj.offsetTop //上
            &&targetObj.offsetLeft + targetObj.offsetWidth >= myobj.offsetLeft //右
            &&targetObj.offsetTop + targetObj.offsetHeight >= myobj.offsetTop //下
        ) {
            return true;
        } else {
            return false;
        }
    }
</script>

圆形碰撞

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            #big {
                position: fixed;
                left: 100px;
                top: 100px;
                width: 500px;
                height: 500px;
                border-radius: 500px;
                background: green;
                border: 1px solid black;
            }

            #small {
                width: 100px;
                height: 100px;
                background: black;
                position: absolute;
                border-radius: 50px;
            }
        </style>
    </head>

    <body>
        <div id="big"></div>
        <div id="small"></div>
        <script type="text/javascript">
            var x1, x2, y1, y2;
            var bigDiv = document.getElementById("big");
            x1 = bigDiv.offsetLeft + bigDiv.offsetWidth / 2;
            y1 = bigDiv.offsetTop + bigDiv.offsetHeight / 2;

            var smallDiv = document.getElementById("small");
            smallDiv.onmousedown = function(ev) {
                document.onmousemove = function(ev) {
                    evObj = ev || window.event;
                    smallDiv.style.left = ev.clientX - smallDiv.offsetWidth / 2 + "px";
                    smallDiv.style.top = ev.clientY - smallDiv.offsetHeight / 2 + "px";
                    smallDiv.style.background = randColor();
                    x2 = smallDiv.offsetLeft + smallDiv.offsetWidth / 2;
                    y2 = smallDiv.offsetTop + smallDiv.offsetHeight / 2;

                    if(checkReckPeng(x1, y1, x2, y2)){
                        console.log("boom!");
                    };
                }
            }

            function checkReckPeng(x1, y1, x2, y2) {
                if(
                    Math.pow(x1 - x2, 2) + Math.pow(y1 - y2, 2) <= Math.pow((bigDiv.offsetWidth / 2 + (smallDiv.offsetWidth / 2)), 2)
                ) {
                    return true;
                } else {
                    return false;
                }
            }

            function randColor(){
                var r = Math.floor(Math.random() * 256);
                var g = Math.floor(Math.random() * 256);
                var b = Math.floor(Math.random() * 256);
                return "rgb(" + r + "," + g + "," + b + ")";
//              return "rgb(" + r + "," + g + "," + b + ")";  
            }

            //扩展：封装几次方函数
            function myPow(num, fNum){
                var sum = 1;
                for(var i = 0; i < fNum; i++){

                    sum *= num;
                }
                return sum;
            }
        </script>
    </body>

</html>

4.ondblclick 事件

<style type="text/css">
html,body{
        width: 100%;
        height: 100%;
    }
    #myDiv{
        width: 100%;
        height: 100%;
        background: green;
        cursor: pointer;
    }
</style>
</head>
<body>
<!--            红色div双击变色   -->
<div id="myDiv"></div>
<script type="text/javascript">
    var myDiv = document.getElementById("myDiv");
    myDiv.ondblclick = function(){
        myDiv.style.background = randColor();
    }
    function randColor(){
        var r = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        var g = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        var b = Math.floor(Math.random() * (255 - 0 + 1) + 0);
        return "rgb(" + r +"," + g +"," + b +")";               
    }
</script>
</body>

5.Json 数据类型

<script type="text/javascript">
    //JSON 数据类型
    /*格式{
        key: value,
        key: value
        value 可以是JSON 数组 字符串 数值 布尔
    }*/
    var myObj = {
        name : "王",
        sex : "boy",
        age : 21,
        address : "地球"

    }
//          console.log(myObj.name);

    var yourObj = {
    ar : [
            {
                name : "王",
                sex : "boy"
            },
            {
                name : "李",
                sex : "女"
            }
    ]
    }

    var arr = yourObj.ar;
    for(var i = 0; i < arr.length; i++){
        var obj = arr[i];
        console.log(obj.name);
        console.log(obj.sex);
    }
</script>

60秒
<style>
    html, body{
        height: 100%;
    }
    .brick{
        position: absolute;
        width: 50px;
        height: 50px;
        top: -20px;
        background-color: black;
    }
    #personDiv{
        width: 100px;
        height: 100px;
        background-image: url(person.png);
        background-size: 100% 100%;
        position: absolute;
        bottom: 0;
    }
</style>
</head>
<body>
<div id="personDiv"></div>
<script>
var personDiv = document.getElementById("personDiv");
var timeArr = []; // 保存每个div动画计时器
var gameTimer; // 创建砖头计时器

    // 1. 绑定人的事件
    function person(){
        document.onmousemove = function(ev){
            var evObj = ev || window.event;
            personDiv.style.left = evObj.clientX - personDiv.offsetWidth / 2 + "px";
        }
    }
    // 2. 每秒创建砖头, 并调用砖头动画
    function createBrick(){
        gameTimer = setInterval(function(){
            var theBrick = document.createElement("div");
            theBrick.className = "brick";
            var cha = document.body.clientWidth - theBrick.offsetWidth;
            theBrick.style.left = Math.floor(Math.random() * cha) + "px";
            document.body.appendChild(theBrick);
            animateBrick(theBrick);
        }, 1000);
    }

    // 3. 砖头动画
    function animateBrick(theDiv){
        var speed = 2;
        var t = setInterval(function(){
            theDiv.style.top = theDiv.offsetTop + speed + "px";
            // 4. 把当前砖头传入碰撞检测
            if(checkRectPeng(personDiv, theDiv)){
                clearInterval(gameTimer); // 关闭创建砖头的计时器
                // 循环每个砖头动画计时器并停掉
                for (var i = 0; i < timeArr.length; i++){
                    clearInterval(timeArr[i]);
                }
                alert("game over");
            }
            if (theDiv.offsetTop > document.body.clientHeight){
                document.body.removeChild(theDiv);
                clearInterval(t);
                timeArr.splice(timeArr.indexOf(t), 1);
            }
        }, 10);
        timeArr.push(t);
    }


    person();
    createBrick();


    function checkRectPeng(myObj, targetObj){
        if (myObj.offsetLeft + myObj.offsetWidth >= targetObj.offsetLeft && myObj.offsetTop + myObj.offsetHeight >= targetObj.offsetTop && targetObj.offsetLeft + targetObj.offsetWidth >= myObj.offsetLeft && targetObj.offsetTop + targetObj.offsetHeight >= myObj.offsetTop){
            return true;            
        } else {
            return false;
        }
    }
</script>

小风儿

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Js_10_2_事件2

1.onChange事件<input type="text" onChange = "theChange()" id="myInput" /><input type="text" onpropertychange = "theChange1()" id="myInput1" /><input type="text" oninput = "theChange2()" id="myInput2"
复制链接

扫一扫