JavaScript小例子1
imooc JavaScript初级篇
<!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" onclick= "changeColor()" value="改变颜色" > <input type="button" onclick= "changeWH()" value="改变宽高" > <input type="button" onclick= "hide()" value="隐藏内容" > <input type="button" onclick= "display()" value="显示内容" > <input type="button" onclick= "unset()" value="取消设置" > </form> <script type="text/javascript"> //定义"改变颜色"的函数 function changeColor(){ document.getElementById("txt").style.color = "red"; } //定义"改变宽高"的函数 function changeWH(){ document.getElementById("txt").style.width = "300px"; document.getElementById("txt").style.height = "300px"; } //定义"隐藏内容"的函数 function hide(){ document.getElementById("txt").style.display = "none"; } //定义"显示内容"的函数 function display(){ document.getElementById("txt").style.display = "block"; } //定义"取消设置"的函数 function unset(){ var myChoose = confirm("是否确定取消设置?"); var execute = prompt("请输入:立即执行"); if( execute == "立即执行" && myChoose == true){ document.getElementById("txt").removeAttribute("style"); } if(execute = null) { alert("请输入执行语句再点确定!"); } else { alert("已取消本次操作!"); } } </script> </body> </html>
作 者:marvelousone
首发日期:2017-12-12 14:49
文章出处:https://www.cnblogs.com/marvelousone/p/8027747.html
关于博主:前端萌新
支持博主:留步扫个码,右侧领红包打赏~~
转载博客:如果您觉得本文有帮助,请带上署名和本文地址随意转载 | 仅供学习交流,严禁商业用途!
版权声明:自由转载-非商用-非衍生-保持署名(
创意共享3.0许可证
)
公众号:关注一下也是支持~不会打扰您
恰饭小广告区
阿里云优惠链接
阿里云国内短信套餐包活动
阿里云新人活动
ECS老用户福利
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· 用 C# 插值字符串处理器写一个 sscanf
· Java 中堆内存和栈内存上的数据分布和特点
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· 为什么说在企业级应用开发中,后端往往是效率杀手?
· DeepSeek 解答了困扰我五年的技术问题。时代确实变了!
· 本地部署DeepSeek后,没有好看的交互界面怎么行!
· 趁着过年的时候手搓了一个低代码框架
· 推荐一个DeepSeek 大模型的免费 API 项目!兼容OpenAI接口!