`
周禄康
  • 浏览: 161608 次
  • 性别: Icon_minigender_1
  • 来自: 石家庄
社区版块
存档分类
最新评论

jQuery加分动画效果示例

jQuery 
阅读更多 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
 <HEAD>
  <TITLE> jQuery加分动画效果示例 </TITLE>
  <script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
  <script src="Scripts/jquery.message.js" type="text/javascript"></script>
  <link href="Css/jquery.message.css" rel="stylesheet" type="text/css" />
<script>
$(function(){
	$("#add").click(function(){

		 //取得要加的分数
	     var fen = $("#fen").val();
		 //取得现在的分数
		 var result = $("#result").text()*1;
		 //分数验证
		 if(!(/^(([0-9])|([1-9]+[0-9]*))$/.test(fen)) ){
			  alert('不是有效数字');
			  return false;
		 }
	     //文本框和按钮设置成不可用
		 $("#add").attr("disabled",true);
		 $("#fen").attr("disabled",true);

		 //显示加分提示框
		 $.MessageShow("+"+fen+"分");

		 //开始进行分数变化过程
		 var a_num = fen;
		 var a=result; 	  
		 var clear = setInterval(function(){
		 	 $("#result").text(a);
			 if(a<(result*1+fen*1)){
				a++;
			 }else{
				 //停止运行
				 clearInterval(clear);
				 //文本框和按钮设置成可用
				 $("#add").attr("disabled",false);
				 $("#fen").attr("disabled",false);
			 }
			 
		 },(1));// 3000/a_num+1
	});
});
</script>
 </HEAD>

 <BODY>
    分数<b id='result'>100</b>
	<br/>
  	<input type='text' name='fen' id='fen' value=''/>
	<input type='button' name='add' id='add' value='加分'/>
 </BODY>
</HTML>





  • 大小: 5.4 KB
分享到：
| web上的分页分析
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jquery加分动画效果.zip

    本资源"jquery加分动画效果.zip"显然是关于如何使用jQuery来创建动态的分数增加效果，这在游戏或者评分系统中常见。下面我们将详细探讨jQuery动画效果的实现方式以及与CSS的配合。 一、jQuery动画基础 1. `animate...

    jquery加分特效

    本文将详细探讨"jQuery加分特效"这一主题，包括如何使用jQuery实现加分提示和消息通知，以及与之相关的技术点。 首先，jQuery的加分特效通常指的是在用户完成特定操作（如正确回答问题或完成任务）后，页面上出现的...

    jQuery带动画效果图片轮播切换焦点图代码

    【jQuery带动画效果图片轮播切换焦点图代码】是一种常见的网页设计技术，它利用JavaScript库jQuery来实现动态的、有视觉吸引力的图片展示效果。在网页设计中，焦点图组件通常用于展示产品、新闻或者任何需要突出显示...

    jquery动画制作示例图片滚动和飞行乌鸦,车窗效果,非常强大

    `.animate()`方法允许开发者创建平滑的动画效果，例如改变图片的位置、大小或透明度，以达到平滑滚动的效果。 接着是“飞行乌鸦”的动画。这可能是指将一个乌鸦的图片或者SVG元素通过jQuery移动，模拟飞行的轨迹。...

    jQuery分页动画效果.zip

    在这个名为"jQuery分页动画效果.zip"的压缩包中，包含了一个实现这种效果的jQuery代码示例。 jQuery库是一个轻量级、功能丰富的JavaScript库，它简化了HTML文档遍历、事件处理、动画设计和Ajax交互等任务。在分页...

    jQuery表单动画切换效果.zip_jQuery表单动画切换效果

    开发者可以在这个文件中查看和测试动画效果，也可以根据自己的需求进行定制。 为了实现表单动画切换，jQuery通常与CSS一起工作。CSS用于定义元素的基本样式和初始状态，而jQuery则处理动态改变这些样式以实现动画。...

    jQuery动画效果鼠标响应菜单.zip

    总的来说，"jQuery动画效果多功能菜单"是将jQuery的强大功能与CSS3的视觉魅力相结合的一个优秀示例，它展示了如何通过现代Web技术来提升网页的互动性和美学价值。对于开发者来说，这是一个值得学习和借鉴的实践案例...

    jQuery各类炫酷效果demo

    本压缩包“jQuery各类炫酷效果demo”包含了一系列使用jQuery实现的精彩示例，旨在帮助开发者更好地理解和应用jQuery。 首先，让我们详细探讨一些在描述中提到的效果： 1. **表单验证**：jQuery提供了方便的API来...

    非常酷的jquery背景动画效果.rar

    在文件列表中提到的"非常酷的jquery背景动画效果"可能是几个示例文件，包括HTML、CSS和JavaScript代码，用于演示如何在实际项目中应用这些动画。这些文件可以帮助初学者理解jQuery动画的工作原理，也可以为经验丰富...

    jquery js tab效果示例下载(强烈推荐)

    此外，为了提供更丰富的用户体验，还可以添加一些动画效果，比如淡入淡出或者滑动效果，通过使用`.fadeIn()`、`.fadeOut()`或`.slideToggle()`等方法。 标签“jquery js tab”表明这个示例不仅包含了jQuery的使用，...

    jquery打字动画效果.zip

    在前端开发中，jQuery是一个非常流行的JavaScript库，它简化了DOM操作、事件处理以及动画制作等任务。...在“jquery打字动画效果.zip”中，很可能包含了完成这些功能的示例代码，供开发者学习和参考。

    jQuery实现切换页面过渡动画效果

    是一款效果非常酷的jQuery和CSS3...该页面切换特效使用AJAX来动态加载链接内容，在页面加载的时候，使用CSS3来制作非常酷的页面过渡动画效果。插件中使用pushState方法来管理浏览器的浏览历史，需要的朋友可以参考下

    jQuery插件(演示示例)

    总结一下，这个压缩包提供的是jQuery在实际应用中的几个典型示例，包括放大镜效果、图片轮换和遮罩效果。通过分析和模仿这些源码，你可以快速提升jQuery编程技能，并学会如何将这些功能集成到自己的项目中。无论是...

    jQuery+EasyUI开发示例（附源码）

    jQuery 是一个轻量级的 JavaScript 库，它简化了 DOM 操作、事件处理、动画效果以及 AJAX 交互。而 EasyUI 是基于 jQuery 的一个组件库，它提供了一系列丰富的 UI 控件，如表格、下拉菜单、对话框等，帮助开发者快速...

    jQuery带动画效果投票特效.zip

    首先，让我们深入了解一下jQuery中的动画效果。jQuery的动画功能是通过`.animate()`方法实现的，这个方法可以改变元素的各种CSS属性，如宽度、高度、透明度等，并且可以在变化过程中添加平滑的过渡效果。在投票特效...

    jQuery带动画效果文件上传插件.zip

    《jQuery带动画效果的文件上传插件解析》 在当今的网页开发中，用户体验成为了设计的核心要素之一。其中，文件上传功能作为用户交互的重要环节，其便捷性和视觉体验显得尤为重要。"jQuery带动画效果文件上传插件...

    jQuery文字动画特效插件

    "jQuery文字动画特效插件"就是这样一款工具，它利用jQuery库的强大功能，结合animate.css，为网页中的文字元素添加丰富的动画效果，使得文字不再是静态的，而是充满活力与动感。 ### jQuery库 jQuery是一款广泛...

    jQuery添加背景动画效果插件.zip

    在本案例中，"jQuery添加背景动画效果插件.zip" 提供了一种方法，通过使用jQuery来实现网页背景的动态效果。这些效果可能是渐变、滑动、旋转等多种视觉变换，以增强用户体验和网站的视觉吸引力。 首先，我们要理解...

Magicbox
Global site tag (gtag.js) - Google Analytics