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.快排(快速排序) 这一算法的核心思想为,先随机选一个数作为标兵或者说是标记(这个数一般来说选择该无序数组的中间那个元素 ...
随机推荐
- spring data jpa sql
CREATE TABLE cst_customer ( cust_id bigint(32) NOT NULL AUTO_INCREMENT COMMENT '客户编号(主键)', cust_name ...
- 【JVM】内存区域
程序运行时,有六个地方都可以保存数据: 1. 寄存器:这是最快的保存区域,因为它位于和其他所有保存方式不同的地方:处理器内部.然而,寄存器的数量十分有限,所以寄存器是根据需要由编译器分配.我们对此没有 ...
- paper 140:TLD视觉跟踪算法(超棒)
我是看了这样的一个视频:http://www.56.com/u83/v_NTk3Mzc1NTI.html 然后在准备针对TLD视觉跟踪算法来个小的总结. 以下博文转自:http://blog.csdn ...
- taomcat中catalina.out文件
项目中发现在linux环境下布署的tomcat所占用的磁盘空间越来越大,是catalina.out 文件,每天几乎是2个G,发现可能会影响到tomcat服务(没确定)正常访问.文件这么大,其实已经无法 ...
- Arrays(二)，对封装的数组进行增删改查操作
(一)添加元素 对任意位置添加元素 /** * 向数组中添加元素 * @param e 元素e * @param index 插入元素的在数组中的位置 * @return 添加结果 */ public ...
- leetcode的一些贪心题目
11-盛最多水的容器 思路:定义2个指针分别指向数组的两端,找出两边缘最小的那个,然后乘以两边缘的距离,然后向中间搜索,移动一次算出结果比较取最大的. class Solution { public: ...
- 用 Flask 来写个轻博客 (12) — M(V)C_编写和继承 Jinja 模板
Blog 项目源码:https://github.com/JmilkFan/JmilkFan-s-Blog 目录 目录 前文列表 扩展阅读 使用 Bootstrap 编写 Jinja 模板文件 继承一 ...
- Windows 08R2_破解管理员密码
目录 目录 破解Windows 08R2管理员密码 破解Windows 08R2管理员密码 将登录界面的功能链接变成cmd.exe的链接,通过CMD进入到目录C:\Windows\System32下, ...
- 仅当使用了列列表并且 IDENTITY_INSERT 为 ON 时，才能为表'XXX'中的标识列指定显式值。
(来自:https://zhidao.baidu.com/question/494717175.html)第一条回复,原因和例子都有了,解释的很好. 插入数据时,自增长列是系统自动处理,不需要你来指定 ...
- 一个普通函数的冷僻属性(length、caller、arguments、name、[[Scopes]]和[[FunctionLocation]])
https://blog.csdn.net/qq_17175013/article/details/81915059