HTML5_DHTML-表单-计算器

来源：互联网发布：鹊桥淘宝客商家入口编辑：程序博客网时间：2024/06/16 02:14

1、 DHTML
DHTML = HTML + CSS + JavaScript

DOM：Document Object Model，文档对象模型，用来操作文档
- 定义了访问和操作HTML文档的标准方法
- 通过对DOM树的操作，实现对HTML文档内容的操作
- W3C组织定义相关的操作标准
BOM：Browser Object Model，浏览器对象模型，用来访问和操纵浏览器窗口，使JavaScript有能力与浏览器“对话”
- 通过使用BOM，可移动窗口，更改状态栏文本，执行其他不与页面内容发生直接联系的操作
- 没有相关标准，但被广泛支持
DOM是W3C(万维网联盟)的标准，是中立与平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式
通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性
- 可以对其中的内容进行修改和删除，同时也可以创建新的元素
- 文档中的所有节点组成一个文档树
- Document 对象是一棵文档树的根
  注：BOM不改变内容，改变窗体等。
  DOM改变内容。
  2、选取元素
  （1）
  
  （2）
  
  （3）
  
  （4）
  
  （5）

3、表单验证

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>Title</title>    <style>        label{            color:red;            font-size:20px;        }    </style></head><body><!--onsubmit="check();在表单提交时 执行的JS代码--><form action="server.html" name="myform" method="get" onsubmit="return check();">    用户名:<input type="text" name="username" id="iduser" value="">    <label id="la">11</label>    <!--<input type="radio" name="hehe">-->    <br/><input type="submit" value="提交">    <!--如果button在表单外  那么就是一个普通按钮 如果放到表单里面 那么默认是带提交功能的按钮  可以通过type修改类型-->    <!--<button type="button">按钮</button>--></form><script>    var la=document.getElementById("la");    function check(){//    alert("呵呵");        var myform=document.myform;////       var myinput= myform.username;//        var myradio=document.myform.hehe;        //获得表单里面input框的内容        var name=document.myform.username;        //判断是否相等 ==        if(name.value=="guangzu"){            la.innerHTML="";            return true;        }else{//            alert("输入有误!");            //a-z  A-Z 0-9        "kk56p*"   'a'  'z'            la.innerHTML="输入有误!!!!";            return false;        }    }</script></body></html>

4、计算器

    <!DOCTYPE html>    <html lang="en">    <head>        <!--  计算机     31日晚自习交   40分钟            功能不能少        -->     <meta charset="UTF-8">        <title>计算器</title>        <style>            table{                width: 400px;                height:500px;                border:1px solid #999;                margin:0 auto;            }           button{          width:100%;               height:80px;               font-size:20px;           }            div{                width:400px;                height: 80px;                border:1px solid #999;             line-height:80px;                text-align:right;        font-size:30px;            }         #bt_plus{             height:164px;            }     </style>    </head>    <body>    <table>        <tr>            <td colspan="4"><div id="dv_num"></div></td>     </tr>     <tr>            <td width="50%" colspan="2">            <button id="bt_ce">CE</button>            </td >            <td width="25%">                <button id="bt_del">←</button>            </td>            <td width="25%">            <button>/</button>         </td>     </tr>        <tr>         <td>           <button>7</button>            </td>            <td>            <button>8</button>         </td>         <td>             <button>9</button>            </td>            <td>                <button>*</button>         </td>        </tr>        <tr>            <td>                <button>4</button>            </td>            <td>                <button>5</button>            </td>            <td>                <button>6</button>            </td>            <td>             <button>-</button>            </td>             </tr>     <tr>            <td>                <button>1</button>         </td>            <td>            <button>2</button>            </td>            <td>                <button>3</button>        </td>            <td rowspan="2">             <button id="bt_plus">+</button>            </td>        </tr>        <tr>            <td>                <button>0</button>            </td>            <td>                <button>.</button>            </td>            <td>                <button id="bt_equals">=</button>            </td>        </tr>    </table>    <script>        //获取所有button对象       var btns=document.getElementsByTagName("button");        //获取div对象        var dv_num=document.getElementById("dv_num");        //获取CE按钮        var bt_ce=document.getElementById("bt_ce");        //获取删除按钮        var bt_del=document.getElementById("bt_del");        //获取等号        var bt_equals=document.getElementById("bt_equals");        //判断上一次按的是否是等号        var isEquals=false;        //遍历所有button  加同一个onlick方法        for(var i=0;i<btns.length;i++){            //按钮的onclick属性 =匿名函数         btns[i].onclick=function (){                if(isEquals){                    //上一次按的是等号                 dv_num.innerHTML="";                }                //表示本次按的不是等号   为下一次判断做前提                isEquals=false;    //            alert(this.innerHTML);                dv_num.innerHTML+=this.innerHTML;            };        }        //清空按钮点击事件        bt_ce.onclick=function (){            dv_num.innerHTML="";        }        //删除按钮的点击事件        bt_del.onclick=function(){            if(isEquals){                dv_num.innerHTML="";                //把当前方法结束                return;            }            var oldNum=dv_num.innerHTML;            var newNum=oldNum.substring(0,oldNum.length-1);    //        alert(newNum);            //把删除完的新数字放到div上去            dv_num.innerHTML=newNum;        }        //等号的点击事件        bt_equals.onclick=function(){            //按了等号            isEquals=true;            var result=eval(dv_num.innerHTML);    //        alert(result);            dv_num.innerHTML=result;        }    </script>    </body>    </html>

关于善知教育（官网：善知教育（点击进入）微信公众号：善知技术）
地址：北京东燕郊经济技术开发区文化大厦
咨询老师郑老师电话/微信：13315631002 QQ:1939441377
目前我们开设Java服务器Html5前端网页Android移动端PHP服务器，有全日制班有周末班;
学费优惠至8480!!!!
我们的优势：

基础课程一个月免费学,全程面授;
平均就业薪资10000-15000;
免费重听，跨学科免费学习;
5-5.5个月大容量技术授课;
0学费0基础入学，海量项目实训, 弹性教学制度;
大部分学生找到月薪10k以上薪资工作, 项目实训自然终止;
课程全程视频录制,偶尔耽搁也不担心;
学习途中随时可以无理由退费根据学生情况;
灵活安排授课时间，一个科目学不会可以免费学习另一个科目;
全日制班，周末班，网上授课同时进行;
技术交流QQ群：198983438（加群请备注在哪里看到我们的群）在群里面随时会更新一些我们的课程视频以及开班动态

善知教育学习视频大汇总

善知教育石老师Java视频的网盘地址http://pan.baidu.com/s/1eQ0JHi6
善知教育吕老师Java视频http://pan.baidu.com/s/1i44RTjR
善知教育武老师Html5视频http://pan.baidu.com/s/1hsGGKnE
善知教育石老师Android知识点http://pan.baidu.com/s/1hsBpOQo

阅读全文

0 0