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 ...
随机推荐
- JavaScript类型转换
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 一个基于RBAC0的通用权限设计清单
注:RBAC0与RBAC1不同在于权限继承.关于RBAC1的权限设计,敬请关注作者后续CSDN博客.1,用户表 保存系统用户信息,如张三.李四,字段可以有id.name.fullname.email. ...
- BZOJ4157 : 星际瘟疫
首先剔除所有从$R$不可到达的点,然后用Lengauer-Tarjan算法建立出以$R$为起点的Dominator Tree. 那么对于每个询问,求出那些点的父亲的LCA,那么答案就是LCA到根路径上 ...
- BZOJ4231 : 回忆树
一个长度为$|S|$的串在树上匹配有两种情况: 1.在LCA处转弯,那么这种情况只有$O(|S|)$次,暴力提取出长度为$2|S|$的链进行KMP即可. 2.不转弯,那么可以拆成两个到根路径的询问. ...
- 在Web应用中接入微信支付的流程之极简清晰版 (转)
在Web应用中接入微信支付的流程之极简清晰版 背景: 在Web应用中接入微信支付,我以为只是调用几个API稍作调试即可. 没想到微信的API和官方文档里隐坑无数,致我抱着怀疑人生的心情悲愤踩遍了丫们布 ...
- CentOS6.4 安装nmon
安装 mkdir /usr/local/nmon cd /usr/local/nmon wget http://sourceforge.net/projects/nmon/files/nmon_lin ...
- 开篇&TexturePacker打出图集给UGUI使用
开篇: 前段时间,网上流出了一套手游源码,本想着把服务器端搭一下,给自己认识小伙伴们调试着把这套源码学习一下.于是就买一个阿里云服务器,可是花了几天时间,就是run不起来了啊.还好网上已经有人搭出来了 ...
- BZOJ4551: [Tjoi2016&Heoi2016]树
Description 在2016年,佳媛姐姐刚刚学习了树,非常开心.现在他想解决这样一个问题:给定一颗有根树(根为1),有以下 两种操作:1. 标记操作:对某个结点打上标记(在最开始,只有结点1有标 ...
- Idea_Intellij Idea 12 生成serialVersionUID的方法
默认情况下Intellij IDEA是关闭了继承了java.io.Serializable的类生成serialVersionUID的警告.如果需要ide提示生成serialVersionUID,那么需 ...
- SQL 联合索引 与 单一列的索引 比较
背景: 公司业务迅速扩展,很多网站.接口都因为大流量的数据,发生服务器习惯性死机:一条sql查询语句只能适用于一定的网络环境,没有优化的查询当遇上大数据时就不适用了. 本文主旨: 讨论什么情况下能利用 ...