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

来源：互联网发布：高级sql生成选项编辑：程序博客网时间：2024/06/06 01:17

创建自定义对象

直接创建

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>

阅读全文

0 0