JavaScript入门(四)
来源:互联网 发布:上瘾网络剧猛其其花絮 编辑:程序博客网 时间:2024/05/05 22:41
JS入门练习
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" Content="text/html; charset=utf-8" /><title>javascript</title><style type="text/css">body{font-size:12px;}#txt{ height:400px; width:600px; border:#333 solid 1px; padding:5px;}p{ line-height:18px; text-indent:2em;}</style></head><body> <h2 id="con">JavaScript课程</h2> <div id="txt"> <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5> <p>1. JavaScript入门篇,让不懂JS的你,快速了解JS。</p> <p>2. JavaScript进阶篇,让你掌握JS的基础语法、函数、数组、事件、内置对象、BOM浏览器、DOM操作。</p> <p>3. 学完以上两门基础课后,在深入学习JavaScript的变量作用域、事件、对象、运动、cookie、正则表达式、ajax等课程。</p> </div> <form> <!--当点击相应按钮,执行相应操作,为按钮添加相应事件--> <input type="button" value="改变颜色" onClick="ChangeColor()"> <input type="button" value="改变宽高" onClick="ChangeHeightWidth()"> <input type="button" value="隐藏内容" onClick="HideText()"> <input type="button" value="显示内容" onClick="DisplayText()"> <input type="button" value="取消设置" onClick="rec()"> </form> <script type="text/javascript">//定义"改变颜色"的函数 function ChangeColor(){ var H2NewColor= document.getElementById("con"); var PNewColor= document.getElementById("txt"); H2NewColor.style.color= "red"; PNewColor.style.color= "blue"; H2NewColor.style.backgroundColor= "#CCC"; PNewColor.style.backgroundColor= "#CCC"; }//定义"改变宽高"的函数 function ChangeHeightWidth(){ var H2NewHeightWidth= document.getElementById("con"); var PNewHeightWidth= document.getElementById("txt"); H2NewHeightWidth.style.width= "150px"; H2NewHeightWidth.style.height= "50px"; PNewHeightWidth.style.width= "700px"; PNewHeightWidth.style.height= "500px"; }//定义"隐藏内容"的函数 function HideText(){ var H2NewHide= document.getElementById("con"); var PNewHide= document.getElementById("txt"); H2NewHide.style.display= "none"; PNewHide.style.display= "none"; }//定义"显示内容"的函数 function DisplayText(){ var H2NewDisplay= document.getElementById("con"); var PNewDisplay= document.getElementById("txt"); H2NewDisplay.style.display= "block"; PNewDisplay.style.display= "block"; }//定义"取消设置"的函数 function rec(){ var SettingConfirm= confirm("取消设置吗?") ; if(SettingConfirm == true) { var H2Style= document.getElementById("con"); var PStyle= document.getElementById("txt"); H2Style.style= ""; PStyle.style= ""; }} </script></body></html>
阅读全文
0 0
- JavaScript入门(四)
- JavaScript入门基础(四)
- JavaScript快速入门(四)
- JavaScript 简单入门学习笔记(四)
- JavaScript从入门到放弃(四)
- JavaScript入门(四)
- javascript入门四
- javascript入门实例四
- JavaScript快速入门(四)——JavaScript函数
- JavaScript入门(四) - 打开新窗口(window.open)
- JavaScript教程--从入门到精通(四)
- JavaScript教程--从入门到精通(四)
- JavaScript语法入门系列(四) 运算符
- JavaScript入门(四)DOM文档对象模型
- HTML5快速入门(四)—— JavaScript
- JavaScript入门指南---(四)、DOM对象与内置对象
- 入门学习(四)
- Vim入门(四)
- Hibernate中addEntity与Transformers.aliasToBean的区别
- 将一个有序整数数组放在一个二叉树中
- CodeForces
- 比onload更快的DOMContentLoaded,readystatechange,doscroll的DOM加载事件
- Linux ssh自动登录的4种实现方法
- JavaScript入门(四)
- python中sort和sorted总结
- C++7.18
- git出现 *** Please tell me who you are. Run...... 错误
- CRC校验算法
- JVM内存区域划分(JDK6 7 8中的变化)
- css的三大特征
- C#编程入门_常用集合_14
- Error:warning: Ignoring InnerClasses attribute for an anonymous inner class