用js制作的几个效果

一，表格光柱效果（奇偶行不同颜色，鼠标移上变色）

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">

#tb tr
{
background-color:white;
}

</style>
<script language="javascript">
var bg;
function doover(tr)
{
bg=tr.style.backgroundColor; //记住这一行本来的背景色。
tr.style.backgroundColor="yellow"; //鼠标移上此行的颜色变成黄色
}
function doout(tr)
{
tr.style.backgroundColor=bg; //鼠标移开此行的颜色变为原来的颜色
}
</script>
</head>

</body>
</html>
<script language="javascript">
//为每个tr元素加上两个事件。
var trs = document.getElementsByTagName("tr");
for(var i=0;i<trs.length;i++)
{
//偶数行设成灰色背景
if(i%2==0)
{
trs[i].style.backgroundColor="#e0e0e0";
}
//加事件
trs[i].setAttribute("onmouseover","doover(this)");
trs[i].setAttribute("onmouseout","doout(this)");
}
</script>

二，简单的添加购物车效果（点击商店里的商品即可添加到你所买的商品里面）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function buy(li)
{

var s = document.getElementById("ss");
s.appendChild(li);
}
</script>
</head>

<body>
商店里的商品：
<ul id="dd">
<li onclick="buy(this)">苹果</li>
<li onclick="buy(this)">桔子</li>
<li onclick="buy(this)">香蕉</li>
<li onclick="buy(this)">菠萝</li>
</ul>
你所买的商品：
<ul id="ss">
</ul>

</body>
</html>

三，下拉菜单效果

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#menu ul
{
display:none;
}
#menu li
{
list-style-type:none;
}
</style>
</head>

<body>
<ul id="menu">
<li>
<img src="data:images/jia.png" height="14" class="pre">
<span>关于我们</span>
<ul>
<li>公司介绍</li>
<li>公司新闻</li>
<li>公司地址</li>
</ul>
</li>
<li>
<img src="data:images/jia.png" height="14" class="pre">
<span>产品服务</span>
<ul>
<li>数码产品</li>
<li>家电产品</li>
<li>售后服务</li>
</ul>
</li>
<li>
<img src="data:images/jia.png" height="14" class="pre">
<span>成功案例</span>
<ul>
<li>家电系列</li>
<li>数码系列</li>
<li>家居系列</li>
</ul>
</li>
<li>
<img src="data:images/jia.png" height="14" class="pre">
<span>会员管理</span>
<ul>
<li>加入会员</li>
<li>注册会员</li>
</ul>
</li>
</ul>
</body>
</html>
<script language="javascript">
var ul = document.getElementById("menu");
for(var i=0;i<ul.childNodes.length;i++) //遍历#menu下的所有子级li
{
if(ul.childNodes[i].tagName=="LI") //如果找到子级中的li（子级中包含li、空格和回车）
{
ul.childNodes[i].setAttribute("onclick","showSubMenu(this)"); //就给li加上单击的事件
}
}

四，微博记字数的效果（onkeyup）

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#zishu
{
color:red;
font-weight:bold;
}
</style>
<script language="javascript">
function showCount(tt)
{
var len = tt.value.length; //获取输入字符的长度
var c = 140-len;
document.getElementById("zishu").innerHTML = c; //用140减去输入字符的长度就是剩余可输入字数
}
</script>
</head>

<body>
<form id="form1" name="form1" method="post" action="">
<p>请输入内容：<br />
<label for="txt"></label>
<textarea name="txt" onkeyup="showCount(this)" id="txt" cols="80" rows="10"></textarea>
<br />
最多输入140字，你还可以再输入<span id="zishu">140</span>字<br />
<input type="button" name="btn" id="btn" value="发送" />
<br />
</p>
</form>
</body>
</html>

五，同意才可点击下一步的效果

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script language="javascript">
function doYesClick()
{
//找按钮
var b = document.getElementById("button");
//设为可用
b.removeAttribute("disabled");
}
function doNoClick()
{
//找按钮
var b = document.getElementById("button");
//设为不可用
b.setAttribute("disabled","disabled");
}
</script>
</head>

六，登录页面效果

1，开始框内显示必填，输入字符后消失

　　<head>

</p>
<p>密码：
<label for="mm"></label>
<input type="text" name="mm" id="mm" onfocus="dofocus(this)" onblur="doblur(this)" value="(必填)" style="color:#CCC" />
</p>
<p>
<input type="submit" name="an" id="an" value="登录" />
</p>
</form>
</body>
</html>
<script language="javascript">
function dofocus(tst)
{
if(tst.value=="(必填)")
{
tst.value=""; //当点进去之后“必填”俩字去掉，然后字体颜色变为黑色
tst.style.color="black";
}
}
function doblur(tst)
{
if(tst.value.length==0)
{
tst.value="(必填)";
tst.style.color="#CCC"; //当失去焦点并且文本框中值的长度为0时，恢复“必填”且其颜色为灰色
}

}

</script>

2,账号密码不能为空

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
.errorshow
{
color:red;
}
</style>
<script language="javascript">
function yanZheng()
{
var allOK = true;
//把值取出来。
var uid = document.getElementById("txtUID").value;
var pwd = document.getElementById("txtPWD").value;

//判断设置错误信息
if(uid.length==0)
{
document.getElementById("spanUID").innerHTML="用户名不能为空";
allOK = false;
}
if(pwd.length==0)
{
document.getElementById("spanPWD").innerHTML="密码不能为空";
allOK = false;
}
if(allOK == true)
{
document.getElementById("form1").submit();
}
}
</script>
</head>

</form>
</body>
</html>

七，qq面板的效果

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#qqPane
{
width:250px;
border:1px solid navy;
}
.divTitle
{
background-color:navy;
color:white;
text-align:center;
font-weight:bold;
padding-top:5px;
padding-bottom:5px;
margin-top:1px;
}
.divContent
{
height:300px;
background-color:#FF9;
display:none;
}
</style>
<script language="javascript">
function doShow(sid)
{
//找要显示的div
var dd = document.getElementById(sid);
//把所有divContent都给隐藏
var divs = document.getElementsByTagName("div"); //获取所有的div
for(var i=0;i<divs.length;i++)//遍历所有的div
{
if(divs[i].className=="divContent") //筛选出divContent
{
divs[i].style.display="none"; //把divContent统统隐藏
}
}
//切换显示状态
if(dd.style.display != "block")
{
dd.style.display="block";
}
else
{
dd.style.display = "none";
}
}

</script>
</head>

用js制作的几个效果的更多相关文章

Simptip – 使用 Sass 制作的 CSS Tooltip 效果
Simptip 是一个简单基于 Sass 的 CSS 工具提示效果.帮助你在网站中加入在不同的方向(上.左.右.下)的工具提示,也可以设置不同的颜色如成功.信息.警告和危险.最后还有其他特性如软边.半 ...
js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下点击“登录”按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击“登录”按钮之前登录小窗口不显示,点击“登录”按钮后小窗口显示,并 ...
jQuery制作Web全屏效果
需要的资源 1.jQuery版本库是必不可少的2.jQuery FullScreen plugin如果你下载不方便的话,你可以直接把下面的代码copy到你本地JQuery FullScreen plu ...
利用css+原生js制作简易钟表
利用css+原生js制作简单的钟表.效果如下所示实现该效果,分三大块:html.javascript.css html部分html部分比较简单,定义一个clock的div,内部有原点.时分秒针.日期 ...
使用bootstrap的JS插件实现模态框效果
在上一篇文章中,我们使用 js+css 实现了模态框效果,在理解了模态框的基本实现方法和实现效果后,我们就要寻找更快捷的方法,又快又好的来完成模态框开发需求,从而节约时间,提高效率.一个好的轮子,不仅 ...
使用Vue.js制作仿Metronic高级表格（一）静态设计
Metronic高级表格是Metonic框架中自行实现的表格,其底层是Datatables.本教程将主要使用Vue实现交互部分,使用Bootstrap做样式库.jQuery做部分用户交互(弹窗). 使 ...
使用WebGL + Three.js制作动画场景
使用WebGL + Three.js制作动画场景 3D图像,技术,打造产品,还有互联网:这些只是我爱好的一小部分. 现在,感谢WebGL的出现-一个新的JavaScriptAPI,它可以在不依赖任何插 ...
php+lottery.js制作九宫格抽奖实例
php+lottery.js制作九宫格抽奖实例,本抽奖功能效果表现好,定制方便简单,新手学习跟直接拿来用都非常不错,兼容IE.火狐.谷歌等浏览器. 引入抽奖插件lottery.js <scrip ...
#3使用html+css+js制作网页番外篇使用python flask 框架 (I)
#3使用html+css+js制作网页番外篇使用python flask 框架(I 第一部) 0. 本系列教程 1. 准备 a.python b. flask c. flask 环境安装 d. f ...

随机推荐

BZOJ 1800 fly-飞行棋
这道题其实考察的就是从其中能找到几条直径,因为这次数据范围比较小,所以只需设一个二维数组,记录一下每个点及每个点从零开始的位置,最后定一个变量记录周长,最后用个循环搜一下位置小于周长一半 ...
BZOJ 1597: [Usaco2008 Mar]土地购买( dp + 斜率优化 )
既然每块都要买, 那么一块土地被另一块包含就可以不考虑. 先按长排序, 去掉不考虑的土地, 剩下的土地长x递增, 宽y递减 dp(v) = min{ dp(p)+xv*yp+1 } 假设dp(v)由i ...
web Listener
在web应用内部会不断地发生各种事件例如,web应用被启动,web应用停止,用户session开始,用户session 结束,用户请求到达,通常这些事件对开发者而言是透明的.实际上ServletAPI ...
Chapter 14 观察者模式
观察者模式又叫做发布-订阅模式:定义了一种一对多的依赖关系,让多个观察者对象同时监听某一个主题对象.这个主题对象在状态发生变化时,会通知所有观察者对象,使它们能够自动更新自己. 观察者模式所做的工作其 ...
Qt 5.x 全局热键 for windows
Qt 升级到5.x版本后,QAbstractEventDispatcher中函数发生变动,导致libqxt库中的qxtGlobalShortcut挂掉.参考qxtGlobalShortcut写了一个全 ...
位操作写读同步(无线) (语音1760 1700) （无线24l01）
************************************************************************** * 函数原型: unsigned char ISD ...
poj-3899-The Lucky Numbers 模拟+数学
题目链接: http://poj.org/problem?id=3899 题目意思: 求给定区间内,只含4.7的数的个数以及通过反转后在该区间内的个数和. 解题思路: 模拟+数学. 代码解释的很详细, ...
ReviewBoard安装和配置札记
眼下部门还没有採用Pair Programming那种时时刻刻都在review代码的工作方式,代码Review多採用走查方式,即代码写完后召开一个Code Review的Meeting,集中时间和经验 ...
以xml的方式实现动画
1.java代码 package com.example.tweenanim; import android.os.Bundle; import android.app.Activity; impor ...
BZOJ 2427: [HAOI2010]软件安装( dp )
软件构成了一些树和一些环, 对于环我们要不不选, 要么选整个环. 跑tarjan缩点后, 新建个root, 往每个入度为0的点(强连通分量) 连边, 然后跑树dp( 01背包 ) ---------- ...

用js制作的几个效果

用js制作的几个效果的更多相关文章

随机推荐

热门专题