JavaScript小例子

<html>
<head>
    <style>
	#vector {position:static;   border:1px solid red;   background-color:gray;}
	span    {display:block;     position:absolute;      font-size:20px;
	         text-align:center; font-weight:bolder;
		     line-height:25px;  border:1px solid blue;  background-color:yellow; z-Index:10;}
	#input  {position:absolute; line-height:25px;       border:1px solid red;
	         font-size:20px;    background-color:#DBDCDB;}
    </style>
</head>
<body onload="init()">
	<div id="vector" style="top:10px;left:10px;width:800px;height:300px;">
		<span>忠诚</span>   <span>博雅</span>   <span>朴实</span>   <span>刚毅</span>
		<span>求实</span>   <span>开拓</span>   <span>严谨</span>   <span>认真</span>
		<span>创新</span>   <span>高效</span>   <span>务实</span>   <span>进取</span>
	</div>
	<p>
		<div id="input" style="top:350px;left:10px;height:25px;width:800px;">华师精神是:</div>
	</p>
</body>
<script>
var keywords  = ["忠诚","博雅","朴实","刚毅"]; //正确答案
var tryTimes  = keywords.length;
var isCorrect = 1;
var inputDom  = document.getElementById("input");
function init()
{
	var dom = document.getElementById("vector");
	var l = dom.children.length;
	for(var i=0;i<l;i++)
	{
		var node = dom.children[i];
		node.style.height = "25px";
		node.style.width  = "50px";
		node.style.top    = parseInt((Math.random()*(parseInt(dom.style.height)  -
										   parseInt(node.style.height)) +
										   parseInt(dom.style.top))) + "px";
		node.style.left   = parseInt((Math.random()*(parseInt(dom.style.width)   -
										   parseInt(node.style.width)) +
										   parseInt(dom.style.left))) + "px";
		node.isAnswer = 0;
		for(var j in keywords)
		{
			if(node.innerHTML == keywords[j])
			{
				node.isAnswer = 1;
				break;
			}
		}
		node.onmousedown = mouseDown;
	}
}

function mouseDown(e)
{
	e = e||event;
	document.movingDom = this;
	if(e.layerX) //IE下
	{
		this.offset = {coffsetX:e.layerX, coffsetY:e.layerY};
	}
	else  //ff下
	{
		this.offset = {coffsetX:e.offsetX, coffsetY:e.offsetY};
	}
	document.onmousemove = mouseMove;
	document.onmouseup   = mouseUp;
}

function mouseMove(e)
{
	e = e||event;
	var dom = this.movingDom;
	if(!(parseInt(dom.style.top)  == parseInt(inputDom.style.top)  &&
		 parseInt(dom.style.left) >= parseInt(inputDom.style.left) &&
		 parseInt(dom.style.left) <= (parseInt(inputDom.style.left) +
		                              parseInt(inputDom.style.width) -
									  parseInt(dom.style.width))))
	{
		dom.style.top  = e.clientY - dom.offset.coffsetY + "px";
		dom.style.left = e.clientX - dom.offset.coffsetX + "px";
	}
}

function mouseUp(e)
{
	var dom = this.movingDom;
	document.onmousemove = null;
	document.onmouseup   = null;
	if(  parseInt(dom.style.top ) == parseInt(inputDom.style.top)    &&
		 parseInt(dom.style.left) >= parseInt(inputDom.style.left)   &&
		 parseInt(dom.style.left) <= (parseInt(inputDom.style.left)  +
		                              parseInt(inputDom.style.width) -
									  parseInt(dom.style.width)))
	{
		dom.style.backgroundColor = "red";
		tryTimes--;
		isCorrect *= dom.isAnswer;
		if(tryTimes==0)
		{
			isCorrect?alert("回答正确!"):alert("回答错误,回家去面壁");
			location.reload();
		}
	}
}

</script>

</html>
时间: 2024-09-20 17:39:18

JavaScript小例子的相关文章

javascript自动改变文字大小和颜色的效果的小例子

这篇文章介绍了javascript自动改变文字大小和颜色的效果的小例子,有需要的朋友可以参考一下   复制代码 代码如下: <body  bgcolor="#000000">  <div id="text"  style="font-size:20px;">你好,这是一段改变文字大小和颜色的javascript代码</div>  <script type="text/javascript&quo

五个小例子教你搞懂 JavaScript 作用域问题

原文:五个小例子教你搞懂 JavaScript 作用域问题 众所周知,JavaScript 的作用域和其他传统语言(类C)差别比较大,掌握并熟练运用JavaScript 的作用域知识,不仅有利于我们阅读理解别人的代码,也有助于我们编写自己的可靠代码. 下面笔者将使用五个小例子来给大家分析下 JavaScript 的作用域要注意的问题. 感谢 例子的来源 (这5个例子我做错了2个 [嘿嘿,尽情鄙视吧],笔者就是要 死磕自己,奉献大家!) 先给出五个例子: 每个例子旁边都会给出答案的链接,如果你全部

jQuery点击弹出下拉菜单的小例子

这篇文章介绍了jQuery点击弹出下拉菜单的小例子,有需要的朋友可以参考一下   复制代码 代码如下: <title>导航--点击弹出内容</title>     <style type="text/css"> .navgation{margin:0;padding:0;list-style-type:none;position:relative;} .navgation li {float:left;} .navgation a{padding:3

JS实现QQ图片一闪一闪的效果小例子

这篇文章介绍了JS实现QQ图片一闪一闪的效果小例子,有需要的朋友可以参考一下   复制代码 代码如下: <HTML> <HEAD> <META http-equiv="Content-Type" content="text/html; charset=gb2312"> <TITLE>无标题文档</title> </HEAD> <BODY> <IMG id="imgId

jQuery提交多个表单的小例子

这篇文章介绍了jQuery提交多个表单的小例子,有需要的朋友可以参考一下   复制代码 代码如下: <script type="text/javascript"> $(function(){ $("#btnSubmit").click(function(){ $("form[name='form1']").submit(); $("form[name='form2']").submit(); }) }) </

ajax-jQ插件:pjax的使用方法能帮忙写个简单的小例子吗?C币全都给你啦!谢谢

问题描述 jQ插件:pjax的使用方法能帮忙写个简单的小例子吗?C币全都给你啦!谢谢 将jquery.pjax.js部署到你的页面中,将需要使用pjax的a链接进行绑定(不能绑定外域的url),如: $.pjax({ selector: 'a', container: '#container', //内容替换的容器 show: 'fade', //展现的动画,支持默认和fade, 可以自定义动画方式,这里为自定义的function即可. cache: true, //是否使用缓存 storage

谁那有ajax的小例子(页面上就有一两个TextBox,DropdownList,不能为空,然后把他们的值封装到一个类里面,在传到另一个页面)

问题描述 如题 解决方案 解决方案二:放一个runat=server的form表单就可以了.解决方案三:去jquery看看ajax的列子就有了解决方案四:你封装在一个类里面再传到另外一个页面的意思是将这三个控件的值传到另外一个页面?第一种方式,直接作为参数传给另外一个页面,这是常规的get方式第二种方式,封装为json,使用javascript或jQuery中的post方法给另外一个页面,那个页面接收到json数据后,再解析为类的实例解决方案五:想用ajax的话直接直接用query+ajax,这

一个小例子解释如何来阻止Jquery事件冒泡_jquery

什么是JS事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 如何来阻止Jquery事件冒泡? 通过一个小例子来解释 <!DOCTYPE html PUBLIC "-//W3C//D

【zTree】 zTree使用的 小例子

使用zTree树不是第一次了  但是 还是翻阅着之前做的 对照着 使用起来比较方便  这里就把小例子列出来   总结一下使用步骤 这样方便下次使用起来方便一点   使用zTree树的步骤: 1.首先  在jsp中引用zTree相关的 CSS文件和JS文件 2.其次  在jsp中设置zTree的容器,一般一个<ul id="treeDemo" class="ztree" style="display:none;"></ul>