js代码实例
来源:互联网 发布:java反射作用 编辑:程序博客网 时间:2024/06/03 18:22
慕课网
JavaScript入门篇
http://www.imooc.com/learn/36
通过js操作DOM
显示和隐藏
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>display</title> <script type="text/javascript"> function hidetext() { var mychar = document.getElementById("con"); mychar.style.display = "none"; } function showtext() { var mychar = document.getElementById("con"); mychar.style.display = "block" } </script> </head> <body> <h1>JavaScript</h1> <p id="con">做为一个Web开发师来说,如果你想提供漂亮的网页、令用户满意的上网体验,JavaScript是必不可少的工具。</p> <form> <input type="button" onclick="hidetext()" value="隐藏内容" /> <input type="button" onclick="showtext()" value="显示内容" /> </form></body> </html>
控制类名(className 属性)
<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>className属性</title><style> body{ font-size:16px;} .one{ border:1px solid #eee; width:230px; height:50px; background:#ccc; color:red; } .two{ border:1px solid #ccc; width:230px; height:50px; background:#9CF; color:blue; } </style></head><body> <p id="p1" > JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="添加样式" onclick="add()"/> <p id="p2" class="one">JavaScript使网页显示动态效果并实现与用户交互功能。</p> <input type="button" value="更改外观" onclick="modify()"/> <script type="text/javascript"> function add(){ var p1 = document.getElementById("p1"); p1.className = "one"; } function modify(){ var p2 = document.getElementById("p2"); p2.className = "two"; } </script></body></html>
综合例子
<!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="dcolor()"> <input type="button" value="改变宽高" onClick="dwh()"> <input type="button" value="隐藏内容" onClick="dh()"> <input type="button" value="显示内容" onClick="ds()"> <input type="button" value="恢复" onClick="dclear()"> </form> <script type="text/javascript"> var js = document.getElementById("con"); js.innerHTML = "js学习";function dcolor(){ var mychar = document.getElementById("txt"); mychar.style.color="red"; mychar.style.backgroundColor="#ccc"; }function dwh(){ var mychar = document.getElementById("txt"); mychar.style.width="400px"; mychar.style.height="200px"; }function dh(){ var mychar = document.getElementById("txt"); mychar.style.display="none"; }function dclear(){ if(confirm("确定要取消设置吗?")){ var mychar = document.getElementById("txt"); mychar.style.color="#000"; mychar.style.backgroundColor="#fff"; mychar.style.width="600px"; mychar.style.height="400px"; mychar.style.display="block"; } }function ds(){ var mychar = document.getElementById("txt"); mychar.style.display="block"; } </script></body></html>
点击回到页面顶部
效果图
<html><style type="text/css"> .num{ background-color: #000; color:#f00; height:200px; margin:10px; } #btnBack { background-color: #00f; color:#f00; position: fixed; /* fixed定位 */ bottom: 30px; right: 20px; } #top { position: fixed; top: 30px; right: 30px; color: #0f0; }</style> <body> <div class="num">顶部</v> <div class="num">2</div> <div class="num">3</div> <div class="num">4</div> <div class="num">5</div> <div class="num">底部</div> <input type="button" id="btnBack" value="固定位置的按钮,点击返回顶部"/> <div id="top">滚轮距离顶部的距离:0</div></ul> <script> // 得到当前窗口的大小 //var screenw = document.documentElement.clientWidth || document.body.clientWidth; //var screenh = document.documentElement.clientHeight || document.body.clientHeight; var topObj = document.getElementById("top"); // 鼠标滚轮改变事件 window.onscroll = function(){ var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop || 0; topObj.innerHTML = "滚轮距离顶部的距离:"+scrollTop; } var btnBack =document.getElementById("btnBack"); btnBack.onclick=function(){ //alert("DOM0级添加事件处理"); // 令滚轮距离为0 使得回到页面顶部,类似ctrl + home键的功能 document.documentElement.scrollTop = document.body.scrollTop = 0; } </script> </body></html>
0 0
- JS定时器实例代码
- js代码实例
- JS 实例代码演示
- JS代码经典实例集合
- [置顶] 常用JS代码实例
- JS异步执行实例代码
- JS优化For循环的实例代码
- web 开发实例 ---js 代码块
- JS弹出框+地区选择代码实例
- Js各种节点操作实例演示代码
- JS返回上一页代码实例
- js左侧三级菜单导航实例代码
- JS操作数据库的实例代码
- JS学习2. 简单的实例代码
- js 文本滚动效果的实例代码
- 常用验证JS代码基础及实例
- JS原生代码照片墙实例
- js分页脚本代码入门实例
- Java多线程之锁
- iOS AppStore审核被拒To provide a link to a demo video
- MQ消息中间件介绍
- Java编码问题汇总
- KMP算法详细
- js代码实例
- MVP架构浅析
- 【C++】构造函数
- 实战 Lucene,第 1 部分: 初识 Lucene
- ODI使用技巧_01利用变量实现增量抽取
- 矩阵求导
- 用户认证(四)【确认账户】
- 微信浏览器缓存问题
- Qt如何解决Retina屏幕密度引起的问题