决战JS
经过这几日的学习，测试和摸索，算是了解了一些关于javascript 的相关知识吧。学习过程中做出了一些小DEMO，现总结一下实现这些DEMO的基本思路，如有不妥或更为简便的方法，还希望大神拍砖，共同进步。代码可直接复制引用。
demo1.选项卡：
在网站中应用选项卡是很多网站必不可少的效果，因为方便，简单，使用。可分块展示不同的内容链接，当鼠标点击不同按钮时，下面的DIV根据不同的点击显示不同的内容。要实现这样的一个选项卡，首先在body--->div中建立几个button按钮，并在下面建立相同个数的div，初始化第一个div（即：使它的display为block）;style初始化div和相应的button;然后写js脚本，根据一般步骤：取元素--->写事件---->测试。在这个案例中，首先得为每个按钮建立索引；将所有的button和div中的样式去除，再用this这个关键字，实现新的样式更换。
<!Doctype html>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content="text/html;charset=utf-8">
<title>choice card</title>
<style>
#div1 .active {background:yellow;}
#div1 div {width:200px;height:200px;background:#CCC;border:1px solid #999;display:none;}
</style> <script language="javascript">
window.onload=function()
{
var oDiv=document.getElementById('div1');
var aBtn=oDiv.getElementsByTagName('input');
var aDiv=oDiv.getElementsByTagName('div'); for(var i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function()
{
for(var i=0;i<aBtn.length;i++){
aBtn[i].className='';
aDiv[i].style.display='none';
}
this.className='active';
aDiv[this.index].style.display='block';
};
}
};
</script>
</head> <body>
<div id="div1">
<input class="active" type="button" value="aaaa">
<input type="button" value="bbbb">
<input type="button" value="cccc">
<input type="button" value="dddd">
<div style="display:block;">1111</div>
<div>2222</div>
<div>3333</div>
<div>4444</div>
</div>
</body>
</html>
demo2.隔行变色：
通过基本的js中模运算，即：i%2==0来实现偶数行变色。本DEMO实现起来比较容易，首先在body中输入一些<ul><li></li><li></li><li></li><li></li></ul>，<li>越多越能看到明显的效果。接着，应用document.getElementsByTagName('li')，来获取标签li元素，判断之后，设置背景颜色，直接通过js实现不同的效果。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content=""> <script>
window.onload=function(){
var aLi=document.getElementsByTagName('li');
for(var i=0;i<aLi.length;i++)
{
if(i%2==0)
{
aLi[i].style.background='#CCC';
}
else
{
aLi[i].style.background='';
}
}
};
</script>
</head> <body>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</body>
</html>
demo3.InnerHTML的使用：
通过点击button将文本框中的内容直接显示到DIV中。首先获取页面中的元素，然后直接用onclick事件（oDiv.innerHTML=oTxt.value;）将文本框中的文字或者HTML标签显示到div中。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> setFont </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
#div1 {width:200px;height:150px;border:1px solid black;}
</style>
<script>
window.onload=function(){
var oTxt=document.getElementById('txt1');
var oBtn=document.getElementById('btn1');
var oDiv=document.getElementById('div1'); oBtn.onclick=function(){
oDiv.innerHTML=oTxt.value;
};
}
</script>
</head> <body>
<input type="text" id="txt1"/>
<input id="btn1" type="button" value="SetFont">
<div id="div1">
</div>
</body>
</html>
demo4.延时提示框：
对于延时提示框的实现，需要知道计时器的作用和用法。本例实现的是利用当鼠标在某个div上时，另外的一个div显示，当鼠标移开的时候，div过一会儿才消失。代码实现过程，首先需要两个div，设置初始化的样式，选择将其中一个div的display设置为none。再用js实现鼠标的移入移除时，计时器控制div的变化。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title> New Document </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<style>
#div {float:left; margin:10px;}
#div1 {width:50px;height:50px;background:red;}
#div2 {width:250px;height:180px;background:#CCC;display:none;}
</style> <script>
window.onload=function(){
var oDiv1=document.getElementById('div1');
var oDiv2=document.getElementById('div2');
var timer=null; oDiv2.onmouseover=oDiv1.onmouseover=function(){
clearTimeout(timer);
oDiv2.style.display='block';
}; oDiv2.onmouseout=oDiv2.onmouseout=function() {
timer=setTimeout(function(){
oDiv2.style.display='none';
},200);
};
};
</script>
</head> <body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>
还有部分DEMO的分析和总结在《决战JS（二）》。
决战JS的更多相关文章
- 决战JS（二）
紧接着上次的<决战JS>,分析总结一些比较实用的DEMO与新手分享,望大神拍砖. demo5.点击隐藏: 要实现这个功能只需要知道在onclick事件中加入对父节点的样式dislay设置为 ...
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- js学习笔记：操作iframe
iframe可以说是比较老得话题了,而且网上也基本上在说少用iframe,其原因大致为:堵塞页面加载.安全问题.兼容性问题.搜索引擎抓取不到等等,不过相对于这些缺点,iframe的优点更牛,跨域请求. ...
- js学习笔记：webpack基础入门（一）
之前听说过webpack,今天想正式的接触一下,先跟着webpack的官方用户指南走: 在这里有: 如何安装webpack 如何使用webpack 如何使用loader 如何使用webpack的开发者 ...
- JS调用Android、Ios原生控件
在上一篇博客中已经和大家聊了,关于JS与Android.Ios原生控件之间相互通信的详细代码实现,今天我们一起聊一下JS调用Android.Ios通信的相同点和不同点,以便帮助我们在进行混合式开发时, ...
- jquery和Js的区别和基础操作
jqery的语法和js的语法一样,算是把js升级了一下,这两种语法可以一起使用,只不过是用jqery更加方便 一个页面想要使用jqery的话,先要引入一下jqery包,jqery包从网上下一个就可以, ...
- 利用snowfall.jquery.js实现爱心满屏飞
小颖在上一篇一步一步教你用CSS画爱心中已经分享一种画爱心的方法,这次再分享一种方法用css画爱心,并利用snowfall.jquery.js实现爱心满屏飞的效果. 第一步: 利用伪元素before和 ...
- node.js学习（三）简单的node程序&&模块简单使用&&commonJS规范&&深入理解模块原理
一.一个简单的node程序 1.新建一个txt文件 2.修改后缀 修改之后会弹出这个,点击"是" 3.运行test.js 源文件 使用node.js运行之后的. 如果该路径下没有该 ...
- JS正则表达式常用总结
正则表达式的创建 JS正则表达式的创建有两种方式: new RegExp() 和 直接字面量. //使用RegExp对象创建 var regObj = new RegExp("(^\\s+) ...
随机推荐
- 让你的Android程序更省电
app主要耗电的原因如下: 1 cpu频繁的运转 -----控制线程 2 大数据量的传输----- 数据压缩传输 3 不停的在网络间切换------------判断网络状体 4 人开发的程序后台都 ...
- 视频教程--ASP.NET MVC 使用 Petapoco 微型ORM框架+NpgSql驱动连接 PostgreSQL数据库
说好的给园子里的朋友们录制与<ASP.NET MVC 使用 Petapoco 微型ORM框架+NpgSql驱动连接 PostgreSQL数据库> 这篇博客相对应的视频,由于一个月一来没有时 ...
- React学习笔记---项目构建
简介 ReactJs由于有FB的支持,得到了社区的极大关注,同时由于ReactJs只希望专一的做好View层次上的工作,所以本身并没有涉及很多周边工具. 今天要介绍一款工具,同时包含一个构建项目模板的 ...
- 获取机器安装.NET版本的几种方式
当调查应用程序问题时,通常需要先确认目标机器所安装的 .NET Framework 的版本.可以通过如下方式来确认版本号: 通过控制面板安装程序查询 通过查询注册表获取版本信息 通过查看安装目录获取版 ...
- Unity3D手游开发实践
<腾讯桌球:客户端总结> 本次分享总结,起源于腾讯桌球项目,但是不仅仅限于项目本身.虽然基于Unity3D,很多东西同样适用于Cocos.本文从以下10大点进行阐述: 架构设计 原生插件/ ...
- 如何在遍历中使用 iterator/reverse_iterator 删除元素
如何在遍历中使用 iterator/reverse_iterator 删除元素 罗朝辉 (http://www.cnblogs.com/kesalin/) 本文遵循“署名-非商业用途-保持一致”创作公 ...
- 浅析SQL Server实现分布式事务的两阶段提交协议2PC
不久之前团队有个新人问我一个很重要的web服务接口如何保证事务的问题.因为涉及到跨库事务,当时我只是回答目前我们的SOA框架都不支持跨库事务.然后就问到了数据库跨库事务是如何实现的,我只能凭印象含糊回 ...
- 缓存篇(Cache)~第一回 使用static静态成员实现服务器端缓存(导航面包屑)
返回目录 今天写缓存篇的第一篇文章,在写完目录后,得到了一些朋友的关注,这给我之后的写作带来了无穷的力量,在这里,感谢那几位伙伴,哈哈! 书归正传,今天我带来一个Static静态成员的缓存,其实它也不 ...
- PHP变量作用域
PHP 的全局变量和 C 语言有一点点不同,在 C 语言中,全局变量在函数中自动生效,除非被局部变量覆盖,这可能引起一些问题,有些人可能不小心就改变了一个全局变量.PHP 中全局变量在函数中使用时必须 ...
- PHP面向对象05_接口与多态
抽象类与接口 2014-9-2 9:14:32 摘要: 1.抽象类(abstract) 2.接口(interface) 3.多态的应用 1.抽象类(abstract) 特点: 1)抽象类使用abstr ...