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

随机推荐

vim下设置tab
前言:大多数情况下tab键的宽度设置为4个空格,这个可以根据自己的代码风格进行替换,然而当你提交不同的语言的代码的时候python 和c的时候就有区别了.c的话一般tab键做缩进,而python提交 ...
Group DataList
一,效果图. 二,源代码. <!DOCTYPE html><html><head> <meta charset="UTF-8"> & ...
Activity跳转
本例中MainActivity为:FirstActivity.java FirstActivity如下: package com.wyl.intentmultiactivitytest; import ...
版本管理神器git上手
由于以前折腾过svn,虽然最终没有用成功,但是也算有经验,git入门还是比较简单的. 在新目录下建立初始化版本库 : git init git add file git add file2 git ...
在线QQ客服
代码一: <a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=451314789&si ...
不直接访问远程的数据库，而是通过中间件（专业DBA的博客）
建议不直接访问远程的数据库,而是通过中间件. 或者找到好的加密方式.http://blog.csdn.net/sqlserverdiscovery/article/details/8068318 在S ...
Flask web开发请求拦截和预处理
我们在开发WEB应用时,往往会需要对所有的url请求进行拦截,做些预处理,比如权限处理.日志等统一处理. 本文介绍一下Flask中的处理机制.我们通过一个简单的例子来说明. 1.编写一个简单应用 ru ...
docker 学习笔记21：docker连接网络的设置
1.如果docker主机不需要通过代理连接外网则docker的相关命令(如docker search)或docker容器与网络相关的操作都可以正常进行,不需要特殊设置. 2.当docker主机是通 ...
一步一步重写 CodeIgniter 框架 (8) —— 视图的嵌套输出与返回
视图函数在控制器中通过 $this->load-view() 来调用,从而输出 html,有时候为了调试或附加处理的需要,我们需要打印出这些输出,而不是直接通过浏览器输出,这在 php 中是通过 ...
过渡到SSAS之一：简单模型认识
本文主要是转载的,但有些地方,原作者没有说的够详细,我加以补充发到这里. --------------------------------------------------------------- ...

用js制作的几个效果

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

随机推荐

热门专题