用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 ...

随机推荐

Linux/Mac OS 下批量提交新增文件到SVN 服务器
命令行下操作svn没有使用界面形式的TortoiseSVN直观,但是不管怎样,命令行下操作svn还是有它的有点,如果你碰到一次需要svn add许多个文件怎么办?下面的命令可以帮助你解决这个问题一次 ...
Ubuntu上搭建DokuWiki
1.准备工作 1) 安装Apache sudo apt-get install apache2 2)在浏览器中输入http://localhost 如果现实It works则说明Apache安装成功, ...
Week12（11月28日）
Part I:提问 =========================== 1.解读以下代码 $(document).ready(function(){ $('#btn1').click(fun ...
Python 2.7 学习笔记面向对象的编程
python是一种面向对象的语言.本文介绍如何用python进行面向对象的编程. 首先我们说下对象和类,类是一种类型的定义,对象是类的实例. 一.内置对象类型(内置类) 其实我们前面已经大量用到了对象 ...
使用zxing生成二维码 - servlet形式
因为项目有个功能需要打印二维码,因为我比较喜欢使用html+css+js实现,所以首先想到的是jquery.qrcode.js插件,这个插件可以用canvas和table生成二维码,效果也不错,不过对 ...
poj2676解题报告
题意:有一个9*9的格子分成了9个3*3的小子格,一些位置上的已有一些数字..现在要求你把没有数字的位置填上数,要求这个数没有出现在这个位置所在的行.列以及所在的子格分析: 那么我们对于所有的未填 ...
建立Go工作环境
最近在折腾Go语言,找了个开源项目nsq研究源代码.不过前两天不小心把系统搞挂了,这次又要重做一遍,记录一下,备忘. 准备: 1. vim+golang插件+ctags(新版本支持Go) 2. Go1 ...
Log4Net五步走
本文不是教你全面了解log4net,本文只是希望教会你按步就班,照糊芦画瓢般就会用log4net1,引入log4net.dll组件2,建立一个配置文件两种方法,一种是在Web.Config或App.C ...
在android解析json
1.采用一般方式解释json为对象 package com.heimazyh.testjson; import org.json.JSONException; import org.json.JSON ...
极光IM使用教程-极光推送
链接地址:http://jingyan.baidu.com/article/a948d65178a6ea0a2ccd2e7e.html 极光IM使用教程,如果您的 App 需要同时集成 Push 功能 ...

用js制作的几个效果

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

随机推荐

热门专题