JS
编程挑战
小伙伴们，请编写"改变颜色"、"改变宽高"、"隐藏内容"、"显示内容"、"取消设置"的函数，点击相应按钮执行相应操作，点击"取消设置"按钮后，提示是否取消设置，如是执行操作，否则不做操作。
1 <!DOCTYPE HTML> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /> 5 <title>javascript</title> 6 <style type="text/css"> 7 body{font-size:12px;} 8 #txt{ 9 height:400px; 10 width:600px; 11 border:#333 solid 1px; 12 padding:5px;} 13 p{ 14 line-height:18px; 15 text-indent:2em;} 16 </style> 17 </head> 18 <body> 19 <h2 id="con">JavaScript课程</H2> 20 <div id="txt"> 21 <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> 22 <p>1. JavaScript入门篇，让不懂JS的你，快速了解JS。</p> 23 <p>2. JavaScript进阶篇，让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> 24 <p>3. 学完以上两门基础课后，在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> 25 </div> 26 <form> <!--当点击相应按钮，执行相应操作，为按钮添加相应事件--> 27 <input type="button" value="改变颜色" onclick="ChangeColor()"> 28 <input type="button" value="改变宽高" onclick="Changewidth()"> 29 <input type="button" value="隐藏内容" onclick="Change1()"> 30 <input type="button" value="显示内容" onclick="Change2()"> 31 <input type="button" value="取消设置" onclick="ChangeClear()"> 32 </form> 33 <script type="text/javascript"> 34 //定义"改变颜色"的函数 35 function ChangeColor() { 36 var ch=document.getElementById('txt'); 37 ch.style.color="red"; 38 ch.style.backgrouldColor="#ccc"; 39 } 40 41 //定义"改变宽高"的函数 42 function Changewidth(){ 43 var ch=document.getElementById('txt'); 44 ch.style.width="300px"; 45 ch.style.height="300px"; 46 } 47 48 //定义"隐藏内容"的函数 49 function Change1(){ 50 var ch=document.getElementById('txt'); 51 ch.style.display="none"; 52 } 53 54 //定义"显示内容"的函数 55 function Change2(){ 56 var ch=document.getElementById('txt'); 57 ch.style.display="block"; 58 } 59 60 //定义"取消设置"的函数 61 function ChangeClear(){ 62 var str=confirm("确认取消所有设置，回到默认设置？"); 63 if (str==true) { 64 var ch=document.getElementById('txt'); 65 ch.style.color=""; 66 ch.style.backgrouldColor=""; 67 ch.style.width="600px"; 68 ch.style.height="400px"; 69 ch.style.display="block"; 70 } 71 } 72 73 </script> 74 </body> 75 </html>
