javascript基础总结之实例(二)
div的显示和隐藏
<!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>Insert title here</title>
<style type="text/css">
#div1{color:red;border:5px solid purple;width:300px;height:200px;}
</style>
<script type="text/javascript">
function show(){
var ob=document.getElementById('div1');
ob.style.display="block";
}
function hide(){
var ob=document.getElementById('div1');
ob.style.display="none";
}
</script>
</head>
<body>
<div id="div1">div-1</div>
<input onclick="show();" type="button" value="显示div"/>
<input onclick="hide();" type="button" value="隐藏div"/>
</body>
</html>
给div追加内容
<!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>Insert title here</title>
</head>
<body>
<div id="div1"></div>
<input type="button" value="给div1追加内容"/>
</body>
</html>
<script type="text/javascript">
document.getElementsByTagName('input')[0].onclick=function(){
document.getElementById('div1').innerHTML="nihao";
}
</script>
给img添加属性
<!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>Insert title here</title>
<script type="text/javascript">
function fun1(){
var obC=document.getElementsByTagName("img");
for(var i=0;i<obC.length;i++){
obC[i].title="tu"+(i+1);
}
}
</script>
</head>
<body>
<img src="data:images/a.jpg"/>
<img src="data:images/b.jpg"/>
<img src="data:images/c.jpg"/>
<br/>
<input onclick="fun1();" type="button" value="给img增加属性title"/>
</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>Insert title here</title>
<style type="text/css">
#content{padding:3px;position:relative;width:550px;height:240px;border:5px solid orange;margin:100px auto;}
#d1,#d2,#d3,#d4{cursor:pointer;background:#abcdef;position:absolute;border:1px solid red;padding:3px 5px;}
#d1{bottom:10px;right:90px;}
#d2{bottom:10px;right:65px;}
#d3{bottom:10px;right:40px;}
#d4{bottom:10px;right:15px;}
</style>
<script type="text/javascript">
var imgName=['images/a.jpg','images/b.jpg','images/c.jpg','images/d.jpg'];
function showImage(num){
curNum=num;
//num 1 ----- a.jpg 2----b.jpg
var imgPath=imgName[num-1];
document.getElementById('image1').src=imgPath;
//无条件把所有的块，背景置#abcdef，去掉加粗效果
for(var i=1;i<=4;i++){
document.getElementById('d'+i).style.background="#abcdef";
document.getElementById('d'+i).style.fontWeight="none";
}
//找到当前的小方块，改变背景颜色
document.getElementById("d"+num).style.background="yellow";
document.getElementById("d"+num).style.fontWeight="bold"; }
var curNum=1;
function autoShowImg(){
curNum++;
if(curNum>4){
curNum=1;
}
showImage(curNum);
}
</script>
</head>
<body>
<div id="content">
<img onmouseover="clearInterval(t)" onmouseout="t=window.setInterval(autoShowImg,1500)" id="image1" src="data:images/a.jpg"/>
<div id='d1' onclick="showImage(1)" style="background:yellow;font-weight:bold;">1</div>
<div id='d2' onclick="showImage(2)">2</div>
<div id='d3' onclick="showImage(3)">3</div>
<div id='d4' onclick="showImage(4)">4</div>
</div>
</body>
</html>
<script type="text/javascript">
var t=window.setInterval(autoShowImg,1500);
</script>
获取div中的内容
<!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>Insert title here</title>
<style type="text/css">
</style>
<script type="text/javascript">
function getContent(){
var content=document.getElementById('div1').innerHTML;
alert(content.replace(/<.*?>/g,""));
}
</script>
</head>
<body>
<div id="div1">div-1<b>nn</b></div>
<input onclick="getContent();" type="button" value="获取div的内容"/>
</body>
</html>
javascript基础总结之实例(二)的更多相关文章
- JavaScript基础知识总结（二）
JavaScript语法 二.数据类型 程序把这些量.值分为几大类,每一类分别叫什么名称,有什么特点,就叫数据类型. 1.字符串(string) 字符串由零个或多个字符构成,字符包括字母,数字,标点符 ...
- javascript基础学习（十二）
javascript之BOM 学习要点: 屏幕对象 History对象 Location对象 一.屏幕对象 Screen对象是一个由javascript自动创建的对象,该对象的主要作用是描述客户端的显 ...
- JavaScript基础笔记（十二）Ajax
Ajax 一.XMLHttpRequest对象 一)XHR用法 var xhr = new XMLHttpRequest(); //open()方法,参数一:发送方法,参数二:请求的URL,参数三:是 ...
- JavaScript基础入门教程（二）
说明 前一篇博客介绍了js以及一些关于js基本类型的简单知识,本篇博客将详细介绍js的基础类型,捎带介绍对象类型,更详细的对象类型的说明将后续再讲. js中类型的说明 js中的类型分为基本类型和对象类 ...
- Javascript基础系列之（二）变量
javascript 中变量通过var关键字(variable)来声明的. var school = "beijingyizhong" 也可以通过var 关键字给变量多个值. va ...
- javaScript 基础知识汇总（二）
1.运算符 术语或者叫法:一元运算符.二元运算符.运算元(参数) let x=0; x=5+2; //5和2为运算元,“+” 为二元运算符: x=-x; //"-" 为一元运算符 ...
- javascript基础总结之实例(一)
样式 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.o ...
- 原生javascript 基础动画函数封装(二)
<!DOCTYPE html> <html> <head> <title></title> <style type="tex ...
- JavaScript 基础排序的实现(二)
继上一篇O(n^2)的排序算法后,这一篇主要记录O(n*logn)的排序算法 1.快排(快速排序) 这一算法的核心思想为,先随机选一个数作为标兵或者说是标记(这个数一般来说选择该无序数组的中间那个元素 ...
随机推荐
- Database基础(七)：部署集群基础环境、MySQL-MMM架构部署、MySQL-MMM架构使用
一.部署集群基础环境 目标: 本案例要求为MySQL集群准备基础环境,完成以下任务操作: 数据库授权 部署MySQL双主多从结构 配置本机hosts解析记录 方案: 使用4台RHEL 6虚拟机,如下图 ...
- nginx 全面优化 负载均衡
修改nginx.conf文件,它保存有nginx不同模块的全部设置.如果是原生安装的话应该在服务器的 /etc/nginx 目录找到 nginx.conf ,使用其它安装包的话也可以自行查找nginx ...
- 使用Canvas操作像素
现代浏览器支持通过<video>元素播放视频.大多数浏览器也可以通过MediaDevices.getUserMedia() API访问摄像头.但即使这两件事结合起来,我们也无法直接访问和操 ...
- Toast 使用方法大全
原文地址:http://daikainan.iteye.com/blog/1405575 Toast 是一个 View 视图,快速的为用户显示少量的信息. Toast 在应用程序上浮动显示信息给用户, ...
- tidb入门
由于目前的项目把mysql换成了TiDb,所以特意来了解下tidb.其实也不能说换,由于tidb和mysql几乎完全兼容,所以我们的程序没有任何改动就完成了数据库从mysql到TiDb的转换,TiDB ...
- Struts1.3——登录案例的改进
在上篇写的用户登录验证案例的基础上进一步改进. 1.在登录成功后的welcome.jsp页面显示登录成功的用户名 思路1:在LoginAction中,将username放入request的域对象中 因 ...
- 【C++第一个Demo】---控制台RPG游戏3【登陆菜单树】
[登陆系统--树结构] 1 首先我这里设计,由一个基类MainMenu构建树结构,并实现控制台上菜单之间的切换和返回操作 #ifndef _UI_BASE_H_ #define _UI_BASE_H_ ...
- upc组队赛5 Bulbs
Bulbs 题目描述 Greg has an m × n grid of Sweet Lightbulbs of Pure Coolness he would like to turn on. Ini ...
- java 并发——synchronized
java 并发--synchronized 介绍 在平常我们开发的过程中可能会遇到线程安全性的问题,为了保证线程之间操作数据的正确性,我们第一想到的可能就是使用 synchronized 并且 syn ...
- UVA_548Tree
这是一个很经典的建树,然而当时不会!!!! 给你一个中序和后序 先建一个二叉树,然后找最优解(最优解就是一个叶子节点到根节点权值最小, 同时本身权值最小) //生成一棵树 int build(int ...