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">
© by 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;
}
});
});
jQuery框架的简单使用（H5）的更多相关文章
- 使用dom元素和jquery元素实现简单增删改的练习
软件开发实际就是数据的增删改查,javascript前端开发也不例外.今天学了jquery框架的简单使用.于是用它实现简单的增删改,接着也用原始的javascript实现同样的功能,以便看出jquer ...
- jQuery系列 第一章 jQuery框架简单介绍
第一章 jQuery框架简单介绍 1.1 jQuery简介 jQuery是一款优秀的javaScript库(框架),该框架凭借简洁的语法和跨平台的兼容性,极大的简化了开发人员对HTML文档,DOM,事 ...
- jQuery框架开发一个最简单的幻灯效果
在线演示 在这个课程中,我们将介绍如何使用jQuery来开发一个最简单的图片幻灯效果. 立刻观看互动课程:jQuery框架开发一个最简单的幻灯效果 阅读原文:jQuery框架开发一个最简单的幻灯效果
- jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法
一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...
- jQuery系列 第四章 jQuery框架的选择器
第四章 jQuery框架的选择器 4.1 jQuery选择器说明 jQuery 最核心的组成部分就是选择器引擎.它完全继承了 CSS 的风格,可以对 DOM 元 素的标签名.属性名.状态等进行快速准确 ...
- jQuery系列 第八章 jQuery框架Ajax模块
第八章 jQuery框架Ajax模块 8.1 jQuery框架中的Ajax简介 Ajax技术的核心是XMLHTTPRequest对象,该对象是Ajax实现的关键,发送异步请求.接收服务器端的响应以及执 ...
- jQuery系列 第七章 jQuery框架DOM操作
第七章 jQuery框架的选择器 jQuery框架继承和优化了JavaScript访问DOM对象的特性,我们使用jQuery框架提供的api可以更加方便的操作DOM对象. 7.1 创建DOM节点 使用 ...
- jQuery系列 第六章 jQuery框架事件处理
第六章 jQuery框架事件处理 JavaScript以事件驱动来实现页面的交互,其核心是以消息为基础,以事件来驱动.虽然利用传统的JavaScript事件处理方式也能够完成页面交互,但jQuery框 ...
- jQuery系列 第五章 jQuery框架动画特效
第五章 jQuery框架动画特效 5.1 jQuery动画特效说明 jQuery框架中为我们封装了众多的动画和特效方法,只需要调用对应的动画方法传递合适的参数,就能够方便的实现一些炫酷的效果,而且jQ ...
随机推荐
- SAE saestorage.class.php文件的封装代码
Source for file saestorage.class.php Documentation is available at saestorage.class.php <?php /** ...
- Redis 笔记与总结2 String 类型和 Hash 类型
Linux 版本信息: cat /etc/issue 或cat /etc/redhat-release(Linux查看版本当前操作系统发行版信息) CentOS release 6.6 (Final) ...
- Web 在线文件管理器学习笔记与总结（8）删除文件
unlink($filename) 删除文件 index.php: <?php require 'dir.func.php'; require 'file.func.php'; require ...
- GDC2016【彩虹六号:围攻 】使丰富的“突破”成为可能的破坏系统
[彩虹六号:围攻 ]使得丰富的“突破”成为可能的破坏系统 深奥的战术游戏的背景下,最新的程序化破坏技术[REALBLAST]! 进行演讲的是Ubisoft Montreal的Julien ...
- 【翻译】KNACK制作介绍
KNACK 次世代游戏机的性能开发新世界,PlayStation 4首发游戏的舞台幕后 配合PS4的国内首发,作为SCE的第一个游戏发售的本作. 一边加入发挥次世代机机能的表现,设计了谁都可以 ...
- smoke
1.Have a smoke? 2.Would you like a cigarette? 3.Cigarettes? 4.Let's go have a smoke. 5.Do you smoke ...
- Delphi结构体数组指针的问题
//这段代码在Delphi 2007和delphi 7下是可以执行的,所以正确使用结构体数组和指针应该是这样的,已验证 unit Unit1; interface uses Windows, Mess ...
- 数据库CRUD操作：C：create创建（添加）、R：read读取、U：update：修改、D：delete删除；高级查询
1.注释语法:--,#2.后缀是.sql的文件是数据库查询文件3.保存查询4.在数据库里面 列有个名字叫字段 行有个名字叫记录5.一条数据即为表的一行 CRUD操作:create 创建(添加)re ...
- http协议（转）
主要还是为了存放状态码··· 剖析 HTTP 协议 目录 HTTP 概述 HTTP 消息结构 HTTP 请求 HTTP 响应 HTTP 状态码 参考 回到顶部 HTTP 概述 HTTP 是什么? ...
- Android性能优化典范（转）
转载自oschina. 2015年伊始,Google发布了关于Android性能优化典范的专题, 一共16个短视频,每个3-5分钟,帮助开发者创建更快更优秀的Android App.课程专题不仅仅介绍 ...