实训day01作业

最新推荐文章于 2024-04-12 21:08:51 发布

qq_41942284

最新推荐文章于 2024-04-12 21:08:51 发布

阅读量178

点赞数

本文链接：https://blog.csdn.net/qq_41942284/article/details/92757373

版权

1.通过js获取输入框中的value值

<!DOCTYPE html>
<html>

<head>
   <meta charset="utf-8">
   <title></title>
   
   <style type="text/css"></style>
</head>

<body>
       <iframe src="https://www.baidu.com"></iframe>

       <h1>这是h1标签</h1>
       <h6>这是h6标签</h6>
       <p>这是一个<span>这是一个span标签</span>段落标签</p ><p>这是一个段落标签</p >

<span>这是一个span标签</span><span>这是一个span标签</span>

       <p>这是一个p标签
           &lt!DOCTYPE html&gt
           &lthtml&gt
           &lthead&gt
               &lttitle&gt这是我的html&lt/title&gt
           &lt/head&gt
           &ltbody&gt
               今天星期一
           &lt/body&gt
           &lt/html&gt
       </p >

       <pre>这是一个pre标签
           &lt!DOCTYPE html&gt
           &lthtml&gt
           &lthead&gt
               &lttitle&gt这是我的html&lt/title&gt
           &lt/head&gt
           &ltbody&gt
               今天星期一
           &lt/body&gt
       </pre>

<div style="width: 200px;height: 200px;">这是一个div</div>
       <div style="width: 200px;height: 200px;">这是一个div</div>

< img style="width: 200px;height: 200px;" src="https://www.baidu.com/img/baidu_jgylogo3.gif">

< img style="width: 200px;height: 200px;" src="https://www.baidu.com/img/baidu_jgylogo3.gif">

<span style="width: 200px;height: 200px;">这是行内元素</span>
       <span style="width: 200px;height: 200px;">无法直接设置宽高</span>
       <input type="text" id="d1" name="t1" value"" ">
       <input type="button" name="b1" οnclick="get();" value="submit" ">
       
       <script type="text/javascript">
           function get(){
           var a =document.getElementById("d1");
           alert(a.value);
           }
       </script>
   </body>
</html>

2.点击某个元素，更改该元素的样式
<!DOCTYPE html>
<html>
<head>
   <meta charset="utf-8">
   <title>
       获取节点
   </title>

</head>
<body>
   <div class="box">
       <h1 class="text">这是一个标题</h1>
       <h2 class="text">这是一个标题</h2>
       <h3 class="text">这是一个标题</h3>

<p id="p1">这是一个段落标签</p>
</div>

           // 通过类名获取元素
           var h = document.getElementsByClassName('text');
           console.log('h =>',h[2]);

var div = document.getElementsByTagName('div');
console.log(div);

var ele = document.querySelectorAll('*') //通过css选择器返回所有匹配元素

           for (var i=0 ; i <h.length ;i++) {
               h[i].onclick = function(){
                   this.style.backgroundColor = "pink";
               }
           }

}
</script>
</body>
</html>

3.互换变量值
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个javascript</title>
</head>
<body>

           // 变量名提升
           //不声明新的变量最后 a = 2; b = 8
           var a = 8;
           var b = 2;
           a=a-b*3;
           b=b*4;
           console.log(a);
           console.log(b);

// 用console.log打印99乘法表

       }
   </script>
</body>
</html>

4.乘法口诀
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>我的第一个javascript</title>
</head>
<body>

           // 变量名提升
           //不声明新的变量最后 a = 2; b = 8
           var a = 8;
           var b = 2;

           // 用console.log打印99乘法表
           var str="";
           for(var i=1;i<=9;i++){
               var q=i;
               for(var j=1;j<=q;j++){
                   str+=i+"*"+j+"="+i*j+" ";
               }
               str+="\n";
           }
           console.log(str);

       }
   </script>
</body>
</html>