js串讲回顾
注：1.xx.nextSibling.css.xxx->xx的下一个元素的css样式;2. window.opener.document.getElementById("cms");->找到父级窗口中id为cms的元素
1.QQ面板效果:
<title>无标题文档</title>
<style type="text/css">
.a1{ background:#003; padding:3px; font-size:18px; color:#FFF; text-align:center; margin-top:1px }
.b1{ height:150px; background:#CC9; display:none;}
#wai{ width:200px;border:1px solid #000}
</style>
</head>
<body>
<div id="wai">
<div class="a1">我的好友</div><div class="b1"></div><!--a1和a2必须紧挨,不然方法里面nextSibling没有效果-->
<div class="a1">黑名单</div><div class="b1"></div>
<div class="a1">最近联系</div><div class="b1"></div>
</div>
</body>
<script type="text/javascript">
var a1 = document.getElementsByClassName("a1");
for(var i=0;i<a1.length;i++) //给ClassName为a1的加上点击事件
{
a1[i].setAttribute("onclick","show(this)");
}
function show(xx)
{
var b1 = document.getElementsByClassName("b1");
for(var i=0;i<b1.length;i++) //设置所有ClassName为b1的display为隐藏
{
b1[i].style.display="none";
}
//让xx的下个元素显示
xx.nextSibling.style.display="block";//nextSibling获取xx的下一个元素,两个元素必须紧挨,不能有空格、回车或别的字符串
}
</script>
2.彩票36选7
<style type="text/css">
.bbb{ width:60px; height:60px; font-size:28px; font-weight:bold; font-style:oblique; margin:5px}
#ss{ font-size:20px;}
.ccc{ position:absolute;width:80px; height:40px; font-size:18px; font-weight:bold; font-style:oblique;}
</style>
</head>
<body>
<form>
<div id="di"></div><br />
<font id="ss">您选中的号码有:</font><span id="w"></span><br /><span><input type="reset" value="重置" class="ccc" onclick="cz(this)"/></span>
</form>
</body>
<script type="text/javascript">
for(var i=1;i<=36;i++) //循环出所有按钮
{
var s = "<input type='button' class='bbb' value='"+i+"' onclick='dd(this)' />";//给input加上click事件,用于disabled的取消和设置
var di = document.getElementById("di");
di.innerHTML += s;
}
var count=0;
function dd(bt)
{
count++;
if(count>7) //如果数字多于7个,return
{
return;
}
else
{
var v = bt.value; //循坏遍历出显示数字的span
var span = "<span clsaa='spa' style='font-size:20px;color:red; margin-right:10px' onclick='qux(this)'>"+v+"</span>";
var ww = document.getElementById("w");
ww.innerHTML += span;
bt.setAttribute("disabled","disabled");
}
}
function qux(sp) //点击数字取消后,按钮的disabled也要消除
{
sp.remove();
var s = sp.innerHTML;
var btn1 = document.getElementsByClassName("bbb");
for(var i=0;i<btn1.length;i++)
{
if(s == btn1[i].value)
{
btn1[i].removeAttribute("disabled");
break;
}
}
count--;
}
function cz(rt)
{
var s = document.getElementById("w");
s.innerHTML="";
var bt = document.getElementsByClassName("bbb");
for(var i=0;i<bt.length;i++)
{ if( bt[i].getAttribute("disabled"))
{
bt[i].removeAttribute("disabled");
}
}
window.location.href="g1.html";//bug->设置重置按钮的话，全部清空后, 不刷新页面不能再点击,
}
</script>
</html>
3.在线时钟
<body>
<div id="sj" style=" font-size:30px; color:#006; font-weight:bold"></div>
</body>
<script type="text/javascript">
function show()
{
var d = new Date();
//var h = d.getHours()+":"+d.getMinutes()+":"+d.getSeconds();//方法一
var h = d.getHours()+":"; //方法二
h += d.getMinutes()+":"; //方法二
h += d.getSeconds(); //方法二
document.getElementById("sj").innerHTML = h;
window.setTimeout("show()",1000);//多长时间调一次函数方法,递归
}
window.setTimeout("show()",500);//要多长时间显示在页面
</script>
4.博客输入字符,下边显示剩余字符
<body>
<textarea cols="40" rows="6" onkeyup="up()" id="t"></textarea><br />
<span>您还可以输入<span id="sp">140</span>个字</span>
</body>
<script type="text/javascript">
function up() //onkeyup
{
var t = document.getElementById("t").value.length; //取到textarea里面的value的长度
document.getElementById("sp").innerHTML=140-t; //每敲下键盘就执行一次代码,算出来的数字就往id为sp的span里面扔一次
}
</script>
5.登录框光标移开value值改变
<form>
用户名:<input type="text" id="uid" value="必填" style="color:#999" /><br />
密码:<input type="password" id="pwd" />
</form>
</body>
<script type="text/javascript">
uid.setAttribute("onfocus","bt(this)");
uid.setAttribute("onblur","bl(this)");
function bt(txt)
{
if(txt.value !="必填" && txt.style.color !="#999")
{
}
else
{
txt.value="";
txt.style.color="#000";
}
}
function bl(txt)
{
if(txt.value.length==0)
{
txt.value="必填";
txt.style.color="#999";
}
}
</script>
6.翻牌效果:
<style type="text/css">
.c{ width:100px; height:100px; border:2px solid #666; float:left; margin:3px; background:#CCF;}
.d{ width:100px; height:100px; border:2px solid #666; float:left; margin:3px; background:yellow}
</style>
</head>
<body>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
<div class="c"></div>
</body>
<script type="text/javascript">
function bbb(fs)
{
fs.style.background="red";
}
function eee(move)
{
move.style.background="#CCF";
}
var cc = document.getElementsByClassName("c");
for(var i=0;i<cc.length;i++)
{
cc[i].setAttribute("onmouseover","bbb(this)");
cc[i].setAttribute("onmouseout","eee(this)");
}
</script>
js串讲回顾的更多相关文章
- js串讲整理
js子级窗口向父级窗口传值 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http ...
- 0607pm克隆&引用类&加载类&面向对象串讲&函数重载
克隆class Ren{ public $name; public $sex; function __construct($n,$s) { $this->name=$n; $this->s ...
- 视频+图文串讲：MySQL 行锁、间隙锁、Next-Key-Lock、以及实现记录存在的话就更新，如果记录不存在的话就插入如何保证并发安全
导读 Hi,大家好!我是白日梦!本文是MySQL专题的第 27 篇. 下文还是白日梦以自导自演的方式,围绕"如何实现记录存在的话就更新,如果记录不存在的话就插入."展开本话题.看看 ...
- JS基础知识回顾
回顾 由于 JavaScript 高级还是针对 JavaScript 语言本身的一个进阶学习,所以在开始之前我们先对以前所学过的 JavaScript 相关知识点做一个快速复习总结. 重新介绍 Jav ...
- 全网最清楚的：MySQL的insert buffer和change buffer 串讲
目录 一.前言 二.问题引入 2.1.聚簇索引 2.2.普通索引 三.change buffer存在的意义 四.再看change buffer 五.change buffer 的限制 六.change ...
- getElementById返回的是什么？串讲HTML DOM
1. getElementById()返回的是什么? 这个函数使用的最普遍,但是你有没有深入探究下,这个函数究竟返回的是什么么?我们来一起看看. var mydivEle = document.get ...
- .NET 基础串讲
C#基础 .NET介绍 计算机发展史 第一代语言:机器语言 0101 第二代语言:汇编语言, 用一些简洁的英文字母.符号串来替代一个特定指令的二进制串 第三代语言:接近于数学语言或人的自然语言,同时 ...
- vue.js精讲02
2017-09-17 笔记及源码地址 : https://github.com/wll8/vue_note vue 中的事件深入. 事件: @click/mouseover…事件简写: @ 如 @cl ...
- vue.js精讲01
笔记及源码地址 : https://github.com/wll8/vue_note 01 2017-09-13 view一个 mvvm框架(库),和 ag 类似.比较小巧,容易上手. mvc: mv ...
随机推荐
- BZOJ2434 [Noi2011]阿狸的打字机（AC自动机 + fail树 + DFS序 + 线段树）
题目这么说的: 阿狸喜欢收藏各种稀奇古怪的东西,最近他淘到一台老式的打字机.打字机上只有28个按键,分别印有26个小写英文字母和'B'.'P'两个字母.经阿狸研究发现,这个打字机是这样工作的: 输入小 ...
- MongoDB 入门之安装篇
前言:MongoDB 在各 OS 上的安装比较简单,此文章只用来记录,不考虑技术深度. 一.Ubuntu 导入 MongoDB 公钥,添该软件源文件,更新源列表 sudo apt-key adv -- ...
- ural 1252. Sorting the Tombstones
1252. Sorting the Tombstones Time limit: 1.0 secondMemory limit: 64 MB There is time to throw stones ...
- ural 1250. Sea Burial
1250. Sea Burial Time limit: 1.0 secondMemory limit: 64 MB There is Archipelago in the middle of a s ...
- js定时相关函数：
定时相关函数: mytime= setTimeout(vCode, iMilliSeconds [, sLanguage]) -- 单次定时执行指定函数 clearTimeout(iTimeoutID ...
- 洛谷 P1029 最大公约数和最小公倍数问题 Label：Water&&非学习区警告
题目描述 输入二个正整数x0,y0(2<=x0<100000,2<=y0<=1000000),求出满足下列条件的P,Q的个数 条件: 1.P,Q是正整数 2.要求P,Q以x0为 ...
- js，html，css注释大集合
1.js注释: 单行注释,在注释内容前加符号 “//” <script type="text/javascript"> document.write("单行注 ...
- PHP面向对象学习四 类的关键字
1.关键字:final 用来定义类和方法的一个重要关键字,当定义类的时候该类将不能被继承, 当用来定义方法的时候该方法将不能被重载 2.关键字:static 用来定义类的静态属性或方法,可以在类未被实 ...
- Java_Servlet 中文乱码问题及解决方案剖析
一.常识了解 1.GBK包含GB2312,即如果通过GB2312编码后可以通过GBK解码,反之可能不成立; 2.java.nio.charset.Charset.defaultCharset() 获得 ...
- Java 仿迅雷多线程下载
package net.webjoy.jackluo.android_json; /** * 1.http Range "bytes="+ start+end * 2.Random ...