DOM操作与数学函数示例-优快云博客

本文链接：https://blog.youkuaiyun.com/mahui1989/article/details/10128823

一.第一个实例

Dom 查找的第一种方式：根据 id 查找和改变页面显示内容以及获得用户文本框输入的数据

<html>

   <head>
       <script>
             function f1(){
              var obj=document.getElementById('d1');
              /* innerHTML属性：可以读或者写一个结点的html内容 */
              //alert(obj.innerHTML);
              // <span>hello</span>
              obj.innerHTML='hello kity';
              var obj2=document.getElementById('username');
              alert(obj2.value);


              }
          </script>
   </head>
   <body style="font-size:30px;color:red;">
username:<input type="text" name="usename" id="username"/></br>
       <div id="d1">
           <span>hello</span>
       </div>

<a href="javascript:;" οnclick="f1();">click me !</a>

/* javascript : ;“ 表示一个空白的 JS 语句 */
</body>

</html>

二第二个实例

<html>
<head>
     <script>
       function sum (){
             var txtObj1= document.getElementById('op1');
             var txtObj2= document.getElementById('op2');
             var v1=parseInt(txtObj1.value);
             var v2=parseInt(txtObj2.value);
             var v3=v1+v2;
             var txtObj3=document.getElementById('op3');
             txtObj3.value=v3;
          }
     </script>
</head>
<body style="font-size:30px;color:red;">
    操作数1：<input name="op1" id="op1"/><br/>
    操作数2：<input name="op2" id="op2"/><br/>
          结果：<input name="op3" id="op3"/><br/>
      <input type="button" value="求和" οnclick="sum();"/><br/>
   </body>
</html>

三.第三个实例

<html>
<head>
     <script>
        function f2(){
            var op1=Math.random();
            alert(op1);//随机数
            var op2=Math.ceil(13.98);
            alert(op2);//14
               var op3=Math.floor(13.98);
               alert(op3);//13

               var op4=Math.floor(Math.random()*34);

               alert(op4);

            }

     </script>
</head>
<body style="font-size:50px;color:red;">
<a href="javascript:;" οnclick="f2();">click me !</a>
</body>
</html>

dom的一些实例操作