通过按钮执行对应操作完成javascript检测

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <title>编程挑战</title>
 6         <style type="text/css">
 7         body{
 8             font-size: 12px;
 9         }
10         ul{
11              list-style-type: decimal; 
12         }
13         #text{
14             width: 400px;
15             height: 200px;
16             border: 1px solid #ccc;
17             padding: 5px;
18             line-height: 24px;
19             text-align: justify;
20         }
21         #con{
22             text-indent: 2em;
23         }
24         </style>
25     </head>
26     <body>
27         <h2 id="con">JavaScript课程</h2>
28         <div id="text">
29             <h3>JavaScript为网页添加动态效果并实现与用户交互的功能。</h3>
30             <ul>
31                 <li>JavaScript入门篇，让不懂JS的你，快速了解JS。</li>
32                 <li>JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作</li>
33                 <li>学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程</li>
34             </ul>
35         </div>
36         <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
37         <form action="">
38             <input type="button" name="" value="改变颜色" onclick='myceshi1()'/>
39             <input type="button" name="" value="改变宽高" onclick='myceshi2()'/>
40             <input type="button" name="" value="隐藏内容" onclick='myceshi3()'/>
41             <input type="button" name="" value="显示内容" onclick='myceshi4()'/>
42             <input type="button" name="" value="取消设置" onclick='myceshi5()'/>
43         </form>
44     </body>
45 </html>

通过DOM可以实现JavaScript去操作HTML元素和CSS样式，完成简单的动态操作，当点击相应按钮，执行相应操作，为按钮添加相应事件//定义"改变颜色"的函数//定义"改变宽高"的函数//定义"隐藏内容"的函数 //定义"显示内容"的函数//定义"取消设置"的函数

 1         <script type="text/javascript">
 2             //定义"改变颜色"的函数
 3             function myceshi1(){
 4                 var ceshi1=document.getElementById('text');
 5                 ceshi1.style.color='red';
 6             }
 7             //定义"改变宽高"的函数  
 8             function myceshi2(){
 9                 var ceshi2=document.getElementById('text');
10                 ceshi2.style.width='600px';
11                 ceshi2.style.height='400px';
12             }
13             //定义"隐藏内容"的函数  
14             function myceshi3(){
15                 var ceshi3=document.getElementById('text');
16                 ceshi3.style.display='none';
17             }
18             //定义"显示内容"的函数  
19             function myceshi4(){
20                 var ceshi4=document.getElementById('text');
21                 ceshi4.style.display='block';
22             }
23             //定义"取消设置"的函数 
24             function myceshi5(){
25                 if(confirm('是否取消设置'))
26                 {
27                     var ceshi5=document.getElementById('text');
28                     ceshi5.style.width='400px';
29                     ceshi5.style.height='200px';
30                     ceshi5.style.color='#000';
31                     ceshi5.style.border='1px solid #ccc';
32                     ceshi5.style.padding='5px';
33                     ceshi5.style.lineHeight='24px';
34                     ceshi5.style.textAlign='justify';
35                     ceshi5.style.display='block';
36                 }
37                 else{
38                     console.log('恭喜你已经成功取消操作');
39                 }
40             }
41         </script>

通过按钮执行对应操作完成javascript检测

猜你喜欢