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 ...
随机推荐
- ArrayList和Vector以及synchronizedList
ArrayList和Vector都是使用数组方式存储数据 区别大概就是Vector本身所有方法都是用synchronized修饰的,所以线程安全,而ArrayList没有 还有一个区别就是新增元素的时 ...
- ACM ICPC 2015 Moscow Subregional Russia, Moscow, Dolgoprudny, October, 18, 2015 K. King’s Rout
K. King's Rout time limit per test 4 seconds memory limit per test 512 megabytes input standard inpu ...
- div+css定位position详解
div+css定位position详解 1.div+css中的定位position 最主要的两个属性:属性 absolute(绝对定位) relative(相对定位),有他们才造就了div+css布局 ...
- UVa 10806 & 费用流+意识流...
题意: 一张无向图,求两条没有重复的从S到T的路径. SOL: 网络流为什么屌呢..因为网络流的容量,流量,费用能对许许多多的问题进行相应的转化,然后它就非常的屌. 对于这道题呢,不是要没有重复吗?不 ...
- git两种合并方法 比较merge和rebase
18:01 2015/11/18git两种合并方法 比较merge和rebase其实很简单,就是合并后每个commit提交的id记录的顺序而已注意:重要的是如果公司用了grrit,grrit不允许用m ...
- Codeforces Round #200 (Div. 2) E. Read Time(二分)
题目链接 这题,关键不是二分,而是如果在t的时间内,将n个头,刷完这m个磁盘. 看了一下题解,完全不知怎么弄.用一个指针从pre,枚举m,讨论一下.只需考虑,每一个磁盘是从右边的头,刷过来的(左边来的 ...
- 如何处理json字符转换为字典
NSURL *URL = [NSURL URLWithString:[NSString stringWithFormat:@"%@%@?userName=%@&userPwd=%@& ...
- flex关于字符串转Boolean .
最近做一项目,输入一个boolean类型的参数,结果一致无法获取正确值,后在网上查找才发现原因如下,转帖保存一个: . "false" as Boolean //flase .&q ...
- c++资源之不完全导引 (转)
c++资源之不完全导引 (转) 转:http://www.cnblogs.com/suiyingjie/archive/2008/02/24/1079411.html 本文2004年5月首发于< ...
- 转：DataGridView列的宽度、行的高度自动调整
注意:DataGridView控件是从.NET Framework 2.0版本开始追加的. 介绍一下DataGridView列的宽度和行的高度,根据单元格或Header的内容(一般是内容全部被表示)自 ...