1.留言板
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div id="nr">
</div>
<div>
内容<textarea id="txt"></textarea><br />
<input type="button" value="提交" id="btn" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
$("#btn").click(function(){
var nr=$("#txt").val();
var str=nr+"<br>";
$("#nr").append(str);
})
});
</script>
</html>
2.好友信息
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
/*auto 随机*/
*{ margin:0px auto; padding:0px}
#list{ width:150px; height:100px;}
.user{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; text-align:center; line-height:26px; vertical-align:middle;}
.user:hover{ cursor:pointer;}
</style>
</head>
<body>
<h1>好友信息</h1>
<?php
$uid="zhaoyi";
include("dbda.class.php");
$db=new dbda();
$sql="select firend from firend where me=‘{$uid}‘";
$attr=$db->Query($sql);
?>
<div id="list">
<?php
foreach($attr as $v)
{
$fuid=$v[0];//好友用户名
$sqlname="select name from users where uid=‘{$v[0]}‘";
$aname=$db->Query($sqlname);
$fname=$aname[0][0];//好友的姓名
echo"<div class=‘user‘ bs=‘{$fuid}‘>{$fname}</div>";
}
?>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
//点击选中的事件
$(".user").click(function(){
//清除选中项
$(".user").css("background-color","#3FC");
$(".user").attr("xz","0");
//让该项选中
$(this).css("background-color","#CF3");
//加一个选中属性
$(this).attr("xz","1");
alert($(this).attr("bs"));
})
//鼠标放上事件
$(".user").mouseenter(function(){
$(this).css("background-color","#CF3");
})
//鼠标离开事件
$(".user").mouseout(function(){
if($(this).attr("xz")!="1")
{
$(this).css("background-color","#3FC");
}
})
});
</script>
</body>
</html>
3.通过输入信息使数据框变色
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
</head>
<body>
<div>
<input type="text" class="txt" />
<input type="text" class="txt" />
<input type="text" class="txt" />
<input type="text" class="txt" />
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
//.blur() 失去焦点时触发 .focus() 获得焦点时触发
$(".txt").blur(function(){
//.trim() 去空格
if($(this).val().trim())
{
$(this).css("background-color","#FFF");
}else
{
$(this).css("background-color","red");
}
})
});
</script>
</html>
4.通过单项添加和全部添加实现信息转移
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="jquery-1.11.2.min.js"></script>
<style type="text/css">
/*auto 随机*/
*{ margin:0px auto; padding:0px}
#wai{ width:100%; height:200px; margin-top:50px}
#left{ width:45%; height:200px; float:left; background-color:#0FF}
#middle{ width:10%; height:200px; float:left; background-color:#0F0}
#right{ width:45%; height:200px; float:left; background-color:#0FF}
.llist{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; text-align:center; line-height:26px; vertical-align:middle;}
#one{ width:80px; height:23px; margin-top:70px; background-color:#9F9; text-align:center; line-height:26px; vertical-align:middle;}
#all{ width:80px; height:23px; margin-top:30px; background-color:#9F9; text-align:center; line-height:26px; vertical-align:middle;}
.rlist{ width:150px; height:26; background-color:#3FC; margin-top:2px; color:#F00; text-align:center; line-height:26px; vertical-align:middle;}
</style>
</head>
<body>
<div id="wai">
<div id="left">
<div class="llist">巴萨</div>
<div class="llist">米兰</div>
<div class="llist">国米</div>
<div class="llist">皇马</div>
<div class="llist">曼联</div>
</div>
<div id="middle">
<div id="one">></div>
<div id="all">>></div>
</div>
<div id="right">
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready(function(e) {
//点击选中
$(".llist").click(function(){
//清除所有选中
$(".llist").css("background-color","#3FC")
$(".llist").attr("xz",0);
//设置该项选中
$(this).css("background-color","#666");
$(this).attr("xz",1);
})
//移动一项
$("#one").click(function(){
var list=$(".llist");
for(var i=0;i<list.length;i++)
{
//判断哪项选中
if(list.eq(i).attr("xz")==1)
{
//判断该值是否已经存在
var zhi=list.eq(i).text();
if(has(zhi))
{
var str="<div class=‘rlist‘>"+zhi+"</div>";
$("#right").append(str);
}
}
}
})
//移动所有
$("#all").click(function(){
var llist=$(".llist");
for(var i=0;i<llist.length;i++)
{
var zhi=llist.eq(i).text();
if(has(zhi))
{
var str="<div class=‘rlist‘>"+zhi+"</div>";
$("#right").append(str);
}
}
})
});
function has(zhi)
{
var list=$(".rlist");
//定义一个bool值 默认为true
var cunzai=true;
for(var i=0;i<list.length;i++)
{
if(list.eq(i).text()==zhi)
{
cunzai=false;
break;
}
}
return cunzai;
}
</script>
</html>
时间： 2024-10-03 22:42:14