• 练习题

    留言板

    <!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);//append追加内容
		})
});
</script>
</html>

    　　

    好友列表

    <!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">
*{ margin:0px auto; padding:0px}
#list{ 150px; height:100px}
.user{ 150px; height:26px; background-color:#999; margin-top:2px; color:white; text-align:center; line-height:26px; vertical-align:middle}
.user:hover{ cursor:pointer}
</style>
</head>

<body>
<h1>好友</h1>
<?php
$uid="zhangsan";
include("DBDA.class.php");
$db=new DBDA();
$sql="select Friend from friend where Me='{$uid}'";
$attr=$db->Query($sql);
?>
<div id="list">
	<?php
	foreach($attr as $v)
	{
		$fuid=$v[0];//好友用户名
		$sqlname="select name from user 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","#999");
		$(".user").attr("xz","0");
		//让该项选中
		$(this).css("background-color","#6CF");
		//加一个选中属性
		$(this).attr("xz","1");
		alert($(this).attr("bs"));
		})
	//鼠标放上的事件
	$(".user").mouseenter(function(){
		$(this).css("background-color","#6CF");
		})
	//鼠标离开事件
	$(".user").mouseout(function(){
		if($(this).attr("xz")!="1")
		$(this).css("background-color","#999");
		})
});
</script>
</body>
</html>

    　　

    文本框

    <!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) {
    $(".txt").blur(function(){//blur失去焦点是触发
		if($(this).val().trim()!="")
		{
			$(this).css("background-color","white");	
		}
		else
		{
			$(this).css("background-color","#6CF");
		}
		})
});
</script>
</html>

    　　

    球队列表

    <!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">
*{ margin:0px auto; padding:0px}
#wai{ 100%; height:20px; margin-top:50px}
#left{ 45%; height:300px; float:left; background-color:#9CF}
#middle{ 10%; height:300px; float:left; background-color:#F9C}
#right{ 45%; height:300px; float:left;background-color:#9CF}
.llist{ 150px; height:26px; background-color:#999; margin-top:2px; color:white; text-align:center; line-height:26px; vertical-align:middle}
#one{ 105px; height:26px; margin:100px 0px 0px 0px; background-color:#999; text-align:center; line-height:26px; vertical-align:middle; font-weight:bold}
#all{ 105px; height:26px; margin:80px 0px 0px 0px; background-color:#999; text-align:center; line-height:26px; vertical-align:middle; font-weight:bold}
.rlist{ 150px; height:26px; background-color:#999; margin-top:2px; color:white; 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","#999");
		$(".llist").attr("xz",0);
		//设置该项选中
		$(this).css("background-color","#39F");
		$(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");
	var iscunzai=true;
	for(var i=0;i<list.length;i++)
	{
		if(list.eq(i).text()==zhi)
		{
			iscunzai=false;
			break; 
		}
	}
	return iscunzai;
}
</script>
</html>

    　　
  • 相关阅读:
    C#获取上级文件夹路径
    C#string与byte数组转行
    C#BAT与VBS文件的创建和执行调用
    C#生成条形码
    C#根据生日计算所属十二星座
    C#获取某一字符串第N到第N+1空格的字符
    WPF的DataGrid表格动态加载合并列
    WPF递归设置CheckBox与TextBox禁用联动
    WPF基础知识
    WPF Popup绑定目标控件上下左右位置
  • 原文地址：https://www.cnblogs.com/hamilton/p/5616928.html
Copyright © 2020-2023  润新知