一些有用的javascript实例分析(一)
本文以http://fgm.cc/learn/链接的实例索引为基础，可参见其实际效果。分析和整理了一些有用的javascript实例，相信对一些初学者有一定的帮助。本人水平有限，有许多不足的地方还望包涵，指正。废话不多说，正文以代码开始，不在代码中死去，就在代码中重生。不经历码农，如何来做攻城狮。
1 控制div属性
//参数为对象，样式属性和值
var changeStyle=function(elem,attr,value){
elem.style[attr]=value
};
window.onload = function ()
{
var oBtn = document.getElementsByTagName("input");
var oDiv = document.getElementById("div1");
var oAtt = ["width","height","background","display","display"];
var oVal = ["200px","200px","red","none","block"];
for(var i=0,l=obtn.length;i<l;i++){
oBtn[i].index=i;
oBtn[i].onclick=function(){
//这里用this来获取i值原理是什么？好像都用闭包传值，
//this.index已经是onclick的局部变量了
//若索引值是4重置，则执行后面括号的内容(初始状态)。若不是则后面括号不执行
this.index==l-1&&(oDiv.style.cssText="");
changeStyle(oDiv,oAtt[this.index],oVal[this.index]);
} }
<body>
<div id="outer">
<input type="button" value="变宽" />
<input type="button" value="变高" />
<input type="button" value="变色" />
<input type="button" value="隐藏" />
<input type="button" value="重置" />
<div id="div1"></div>
</div>
</body> 2 鼠标移入和移除样式改变
window.onload = function ()
{
var oDiv = document.getElementById("div1");
//在css先设置好不同的样式，通过改变样式类名来改变效果。
oDiv.onmouseover = function ()
{
oDiv.className = "hover"
};
oDiv.onmouseout = function ()
{
oDiv.className = ""
}
};
<body>
<div id="div1">鼠标移入改变样式，鼠标移出恢复。</div>
</body> 3 记住密码提示框
window.onload = function ()
{
var oTips = document.getElementById("tips");
var oLabel = document.getElementsByTagName("label")[0];
//这种提示功能通过鼠标的划入和划出，来改变预定好样式的显示和隐藏。以达到视觉效果的改变
oLabel.onmouseover=function(){
oTips.style.display="block";
};
oLabel.onmouseout=function=function(){
oTips.style.display="none";
}
}
<div id="outer">
<label><input type="checkbox" />两周内自动登陆</label>
<div id="tips">为了您的信息安全，请不要在网吧或公用电脑上使用此功能！</div>
</div> 4 百度输入法
window.onload = function ()
{
var oBtn = document.getElementsByTagName("button")[0];
var oIme = document.getElementById("ime");
var oClose = document.getElementById("close");
var style = oIme.style;
oBtn.onclick=function(){
//先执行判断再赋值，点击时若显示则隐藏，若隐藏则显示。这个?判断起到了切换的作用，保证效果不中断
style.display=style.display=="block"?"none":"block";
};
oBtn.onclick=function(){
style.display="none";
}
}
<body>
<div id="outer">
<button>输入法</button>
<ul id="ime">
<li><a href="javascript:;">手写</a></li>
<li><a href="javascript:;">拼音</a></li>
<li id="close"><a href="javascript:;">关闭</a></li>
</ul>
</div>
</body>
一些有用的javascript实例分析(一)的更多相关文章
- 一些有用的javascript实例分析(三)
原文:一些有用的javascript实例分析(三) 10 输入两个数字,比较大小 window.onload = function () { var aInput = document.getElem ...
- 一些有用的javascript实例分析(二)
原文:一些有用的javascript实例分析(二) 5 求出数组中所有数字的和 window.onload = function () { var oBtn = document.getElement ...
- C#保留2位小数几种场景总结 游标遍历所有数据库循环执行修改数据库的sql命令 原生js轮盘抽奖实例分析（幸运大转盘抽奖） javascript中的typeof和类型判断
C#保留2位小数几种场景总结 场景1: C#保留2位小数,.ToString("f2")确实可以,但是如果这个数字本来就小数点后面三位比如1.253,那么转化之后就会变成1.2 ...
- [转载]JavaScript内存分析
https://github.com/CN-Chrome-DevTools/CN-Chrome-DevTools/blob/master/md/Performance-Profiling/javasc ...
- (转)实例分析：MySQL优化经验
[IT专家网独家]同时在线访问量继续增大,对于1G内存的服务器明显感觉到吃力,严重时甚至每天都会死机,或者时不时的服务器卡一下,这个问题曾经困扰了我半个多月.MySQL使用是很具伸缩性的算法,因此你通 ...
- nodejs的模块系统（实例分析exprots和module.exprots）
前言:工欲善其事,必先利其器.模块系统是nodejs组织管理代码的利器也是调用第三方代码的途径,本文将详细讲解nodejs的模块系统.在文章最后实例分析一下exprots和module.exprots ...
- MapReduce多种join实现实例分析（二）
上一篇<MapReduce多种join实现实例分析(一)>,大家可以点击回顾该篇文章.本文是MapReduce系列第二篇. 一.在Map端进行连接使用场景:一张表十分小.一张表很大.用法: ...
- mvc结合web应用实例分析
Mvc的web应用实例分析 Login.jsp——视图部分的输入文件success.jsp——视图部分的输出文件failure.jsp——视图部分的输出文件LoginBean.java——模型部分Lo ...
- Linux Kernel PANIC(三)--Soft Panic/Oops调试及实例分析【转】
转自:https://blog.csdn.net/gatieme/article/details/73715860 版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原 ...
随机推荐
- Android 随着输入框控件的清除功能ClearEditText,抄IOS输入框
今天给大家带来一个非常有用的小控件ClearEditText,就是在Android系统的输入框右边增加一个小图标,点击小图标能够清除输入框里面的内容,IOS上面直接设置某个属性就能够实现这一功能.可是 ...
- cocos2d-x v3.2 FlappyBird 各个类对象详细代码分析(6)
今天我们要讲三个类,这三个类应该算比較简单的 HelpLayer类 NumberLayer类 GetLocalScore类 HelpLayer类,主要放了两个图形精灵上去,一个是游戏的名字,一个是提示 ...
- 【JAVA】【NIO】3、Java NIO Channel
Java NIO和流量相似,但有些差异: ·通道可读写,流仅支持单向.读或写 ·异步通道读取 ·通道读写器,他们是和Buffer交替 道的实现 下面是Java NIO中最重要的通道的实现: ·File ...
- Android - 数据存储 －在SQL数据库中保存数据
对于重复的或结构化的数据,保存到数据库中是很好的选择,比如联系人信息.这里假设你对SQL数据库大体上了解然后帮助你学习Android上的SQLite数据库.在Android数据库上需要用到的API可以 ...
- Android - 用Fragments实现动态UI － 使用Android Support Library
Android Support Library提供了一个带有API库的JAR文件来让你可以在使用最新的Android API的同时也也已在早期版本的Android上运行.例如,Support Libr ...
- UVa 11069 - A Graph Problem
题目:给你一个集合{1,2,..,n},计算子集的个数,子集的元素不能相邻且不能再插入元素. 分析:dp,动态规划.相邻元素间仅仅能相差3或者2. 动态方程:f(k)= f(k-2)+ f(k-3): ...
- 【cocos2d-x】尝鲜 Cocos Code IDE(不断更新)
Cocos Code IDE 是一个基于 Eclipse 的跨平台 IDE ,专门为 cocos2d lua & js 开发者准备,通过此工具.你能够方便的创建游戏project.编写而且调试 ...
- 引用类型之object类型
object类型有两种创建方法,第一种是直接创建法: var person=new Object(); person.name = "Nicholas"; person.age = ...
- OC本学习笔记Foundatio框架集
一.OC数组 OC数组是一个类,它也分不可变数组NSArray和可变数组NSMutableArray. 1➣不可变数组的创建 // 创建一个不可变数组.元素为一个OC字符串对象 ...
- nodejs 模拟form表单上传文件
使用nodejs来模拟form表单进行文件上传,可以同时上传多个文件. 以前项目里有这个方法,最近在客户那里出问题了,同事说,这个方法从来就没管用过,SO,用了一天时间把这个方法给搞出来了(觉得花费的 ...