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
原创粉丝点击