jQuery框架的简单使用（H5）

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title>作业</title><!--导入jQuery框架--><script src="jQuery/jquery-3.1.0.min.js"></script><script src="javascript/index.js" type="text/javascript"></script><link href="css/index.css" type="text/css" rel="stylesheet"/></head><body><div id="bground"><div class="time"><button class="start">开始</button><button class="stop">停止</button><div class="count">0</div></div><div class="content"><div class="left"><button class="btn">x</button></div><div class="center"><h3>静夜思</h3><p>床前明月光，</p><p>疑是地上霜。</p><p>举头望明月，</p><p>低头思故乡。</p></div><div class="right"><img src="data:images/内网通截图20161110180030.png"/><button class="button">x</button></div></div><div id="bm">&copy; by&nbsp;&nbsp;&nbsp;LF</div></div></body>
</html>

body{background-color: deepskyblue;
}#bground{/*background: yellow;*/position: relative;height: 1000px;width: 100%;
}#bground .content{/*background: red;*/position: relative;height: auto;}#bground .count{/*background: white;*/margin-left: 10px;margin-top: 15px;text-align: center;font-size: 65px;color: red;width: 100px;height: 60px;line-height: 50px;}#bground .content .left{background-color: deeppink;position: relative;/*opacity: 0.5;*/display: inline-block;width: 150px;height: 300px;left: 30px;top: 200px;
}#bground .content .left button{position: absolute;right: 2px;top: 2px;
}#bground .content .center{background: greenyellow;position: absolute;display: inline-block;width: 300px;height: 600px;/*margin-top: 50px;margin-left: 22%;*/left: 35%;top: 50px;text-align: center;}#bground .content .center h3{/*background: red;*/padding-top: 60px;
}#bground .content .right{display: inline-block;position: fixed;right: 10px;top: 120px;width: 120px;height: 200px;
}#bground .content .right img{width: 100%;height: 100%;
}#bground .content .right button{position: absolute;left: 2px;top: 2px;
}#bground #bm{background-color: chocolate;position: absolute;opacity: 0.8;left: 25%;bottom: 50px;width: 50%;height: auto;text-align: center;}

/** jQuery的简单使用*/
$(document).ready(function(){/** $('.btn')获取类名为btn的标签* click()为点击事件*/ $('.btn').click(function(){//隐藏标签$('.btn').hide('slow');// 慢慢淡出直达消失$('.left').fadeOut('slow');})$('.button').click(function(){$('.button').hide('slow');// 标签往上收直到消失$('.right').slideUp('slow');})// 设置定时器var interval = setInterval("countFuntion()",1000);$('.start').click(function(){if(interval ){clearInterval(interval);interval = null;}interval = setInterval(countFuntion,1000);// 定时器执行的方法function countFuntion(){var num = $('.count').html();num ++;$('.count').html(num);}});/** 停止定时器*/$('.stop').click(function(){if(interval){clearInterval(interval);interval = null;}});
});

转载于:https://www.cnblogs.com/lantu1989/p/6053330.html

jQuery框架的简单使用（H5）相关推荐

jQuery框架开发一个最简单的幻灯效果
在线演示在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果阅读原文:jQuery框架开发一个最简单的幻灯效果
jQuery框架简单介绍
jQuery框架介绍 1. jQuery框架与javaScript之间的有什么关系? 2. jQuery与原生javaSript对比,有什么优点? 3. jQuery与javaScript之间的区别是 ...
jQuery：收集一些基于jQuery框架开发的控件/jquery插件2
Horizontal accordion: jQuery 基于jQuery开发,非常简单的水平方向折叠控件. 主页:http://letmehaveblog.blogspot.com/2007/10/ ...
jQuery框架学习第一天：开始认识jQuery
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...
Java程序员从笨鸟到菜鸟之（八十八）跟我学jquery（四）JQuery框架操作元素的属性与样式
在前面几篇博客中,我们初步了解了一下jQuery的好处,基本语法,还有一些基本函数,这是学习jquery的基础,在这篇博客中,我们一起来学习一下JQuery框架操作元素的属性与样式,在web开发中,修 ...
从零实现一个简易jQuery框架之一—jQuery框架概述
我们知道,不管学习任何一门框架,了解其设计的理念.目的.总体的结构及核心特性对我们使用和后续的深入理解框架都是有很大的帮助的.因此在这里先梳理一下本人对jQuery框架的一些理解. 设计目的(为什么要 ...
jQuery框架学习第十一天：实战jQuery表单验证及jQuery自动完成提示插件
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery框架学习第十天：实战jQueryUI常用功能
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQ ...
jQuery框架学习第七天：jQuery动画–jQuery让页面动起来!
jQuery框架学习第一天:开始认识jQuery jQuery框架学习第二天:jQuery中万能的选择器 jQuery框架学习第三天:如何管理jQuery包装集 jQuery框架学习第四天:使用jQu ...

jQuery框架的简单使用（H5）

jQuery框架的简单使用（H5）相关推荐

最新文章

热门文章