JavaScript05—自定义对象、事件、计算器

最新推荐文章于 2024-08-12 22:28:07 发布

阿鑫君_ty

最新推荐文章于 2024-08-12 22:28:07 发布

阅读量425

点赞数

分类专栏： html javaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_34807258/article/details/74494209

版权

javaScript 同时被 2 个专栏收录

6 篇文章 0 订阅

订阅专栏

html

4 篇文章 0 订阅

订阅专栏

创建自定义对象

直接创建

var per = new Object();
per.name = "john";
per.age=50;
per.say=new Function("alert('hello');");

使用构造器创建

function Person(n,a){
    this.name=n;
    this.age = a;
    this.showPerson=function(){
        console.log(this.name+"+"+this.age)
    }
}

使用JSON创建
var obj={"name":"ton","age":33};
- 事件定义
- 直接处理事件
- 取消事件 onXXX=”return false;”
- event对象
IE可以直接使用event，火狐不可以

js实现简单计算器（event）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单计算器-事件版本</title>
<script type="text/javascript">

// 用于判断，是否是一个全新的计算过程
var isNewCalc = true;

function clk( e ){
    //传入的参数是点击事件，获得事件源
    var btn = e.srcElement || e.target;

    //获得被点击的按钮 上面的数字
    console.log( btn.value );
    //获得文本输入框
    var inputText = document.getElementById("txtExp");

    if( btn.value == "=" ){
        var result = eval( inputText.value );
        inputText.value = result;
        isNewCalc = true;
    } else if( btn.value=="C" ){
        inputText.value= "0";
        isNewCalc = true;
    } else if( btn.value=="DEL" ){
        var txt = inputText.value;
        inputText.value = txt.substring(0, txt.length-1);
    } else {
        if( isNewCalc ){
            inputText.value = "";
            isNewCalc = false;
        }
        inputText.value += btn.value;
    }
}
</script>
</head>
<body>
    <h1>简单计算器-事件版本</h1>
    <div style="border: 1px solid black; width: 270px; padding: 5px;">
        <p>
            <input type="button" value="1" onclick="clk(event);" />
            <input type="button" value="2" onclick="clk(event);" />
            <input type="button" value="3" onclick="clk(event);" />
            <input type="button" value="4" onclick="clk(event);" />
            <input type="button" value="5" onclick="clk(event);" />
            <input type="button" value="+" onclick="clk(event);" />
            <input type="button" value="-" onclick="clk(event);" />
            <input type="button" value="=" onclick="clk(event);" />
        </p>
        <p>
            <input type="text" id="txtExp" size="30" value="0"/>
            <input type="button" value="DEL" onclick="clk(event);" />
            <input type="button" value="C" onclick="clk(event);" />
        </p>
    </div>
</body>
</html>

事件处理机制

当DOM底层对象事件发生时，会依次向上触发同种类型事件的处理

<div onclick="alert(3);">
        区块中的文本内容
        <p onclick="alert(2);">
            段落中的文本内容
            <input type="button" value="test" onclick="alert(1);"/>
        </p>
    </div>

取消事件的冒泡机制

<div onclick="alert(3);">
        区块中的文本内容
        <p onclick="alert(2);">
            段落中的文本内容
            <input type="button" value="test" 
                    onclick="event.cancelBubble=true;alert(1);"/>
        </p>
    </div>

js实现简单计算器（冒泡）

使用事件冒泡机制，将底层多个类似对象的事件处理工作，统一放在上层元素中，进行事件处理

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>简单计算器-事件冒泡版本</title>
<style type="text/css">
#d0 {
    border: 1px solid black; 
    width: 220px; 
    padding: 5px;
    background-color: #8E8E8E;
}
#txtExp{
    color: white;
    font-size: 25pt;
    width: 100%;
    height: 50px;
    background-color: #999999;
    padding-left: 5px;
}
#d2{
    width: 162px;
    float:left;
    //border: 1px solid black;
}
#d3{
    width:50px;
    float:right;
    //border: 1px solid black;
}
#d2 input, #d3 input{
    font-size: 14pt;
    padding: 4px;
    width: 50px;
    height: 40px;
}
#d2 input{
    background-color: #E0E0E0;
}
#d3 input{
    color: white;
    background-color: #F79231;
}
</style>
<script type="text/javascript">

// 用于判断，是否是一个全新的计算过程
var isNewCalc = true;

function clk( e ){
    //传入的参数是点击事件，获得事件源
    var btn = e.srcElement || e.target;
    console.log( btn );
    if( btn.nodeName=="INPUT" && btn.type=="button" ){
        ;       //如果是一个按钮，正常向下继续执行代码
    } else {
        return; //不是一个按钮，立即结束clk方法的调用
    }

    //获得被点击的按钮 上面的数字
    console.log( btn.value );
    //获得文本输入框
    var inputText = document.getElementById("txtExp");

    var length = inputText.value.length;
    if( length>10 ){
        inputText.style.fontSize = "10pt";
    }

    if( btn.value == "=" ){
        var result = eval( inputText.value );
        inputText.value = result;
        isNewCalc = true;
    } else if( btn.value=="C" ){
        inputText.style.fontSize = "25pt";
        inputText.value= "0";
        isNewCalc = true;
    } else if( btn.value=="DEL" ){
        var txt = inputText.value;
        inputText.value = txt.substring(0, txt.length-1);
    } else if( btn.value=="+/-"){
        inputText.value *= -1;
    } else if( btn.value=="%"){
        inputText.value *= 0.01;
    } else {
        if( isNewCalc ){
            inputText.value = "";
            isNewCalc = false;
        }
        inputText.value += btn.value;
    }
}
</script>
</head>
<body>
    <h1>简单计算器-事件冒泡版本</h1>
    <p>使用事件冒泡机制，将底层多个类似对象的事件处理工作，
        统一放在上层元素中，进行事件处理</p>
    <div id="d0" onclick="clk(event);" >
        <div id="d1">
            <input type="text" id="txtExp" value="0"/>
        </div>
        <div>
            <div id="d2">
                <input type="button" value="C" />
                <input type="button" value="+/-" />
                <input type="button" value="%" />
                <input type="button" value="7" />
                <input type="button" value="8" />
                <input type="button" value="9" />
                <input type="button" value="4" />
                <input type="button" value="5" />
                <input type="button" value="6" />
                <input type="button" value="1" />
                <input type="button" value="2" />
                <input type="button" value="3" />
                <input id="btn0" type="button" value="0" />
                <input type="button" value="." />
                <input id="btnDel" type="button" value="DEL" />
            </div>
            <div id="d3">
                <input type="button" value="/" />
                <input type="button" value="*" />
                <input type="button" value="-" />
                <input type="button" value="+" />
                <input type="button" value="=" />
            </div>
            <div style="clear: both;"></div>
        </div>
    </div>
</body>
</html>