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.快排(快速排序) 这一算法的核心思想为,先随机选一个数作为标兵或者说是标记(这个数一般来说选择该无序数组的中间那个元素 ...
随机推荐
- permutations and combinations
# import itertools # # my_list = [1, 2, 3, 4, 5, 6] # # combinations = itertools.combinations(my_lis ...
- c++11的构造函数继承
https://en.cppreference.com/w/cpp/language/using_declaration 在［Inheriting constructors］这一节． 其实叫做＂基类的 ...
- 树莓派上安装boost库
一.安装boost库 sudo apt-get install libboost-dev aptitude search boost 二.编写测试代码 #include <iostream> ...
- Excel表格 函数
1.四则运算(加.减.乘.除).求和.平均.计数.最值. 2. 逻辑函数 (IF函数.NOT函数.等) 3.时间和日期 ( NOW 返回当前日期和时间.等) 4.数学与三角函数 5.文本 ( LOWE ...
- 爬虫问题之Unknown command: crawl
出现这个问题,很大原因是爬虫没有在项目文件夹里运行,因为scrapy 这个爬虫框架封装好的一些命令,必须在框架内环境支持下才能运行 另外在环境目录下,还有很多命令,也必须在此路径环境下才能执行 可以通 ...
- scrapy入门实战-爬取代理网站
入门scrapy. 学习了有这几点 1.如何使用scrapy框架对网站进行爬虫: 2.如何对网页源代码使用xpath进行解析: 3.如何书写spider爬虫文件,对源代码进行解析: 4.学会使用scr ...
- 未来-YLB-跳蚤市场：跳蚤市场（flea market）
ylbtech-未来-YLB-跳蚤市场:跳蚤市场(flea market) 跳蚤市场(flea market)是欧美等西方国家对旧货地摊市场的别称.由一个个地摊摊位组成,市场规模大小不等. 出售商品多 ...
- SQLServer 用法简例
子曰:“温故而知新,可以为师矣.”孔子说:“温习旧知识从而得知新的理解与体会,凭借这一点就可以成为老师了.“ 尤其是咱们搞程序的人,不管是不是全栈工程师,都是集十八般武艺于一身.不过有时候有些知识 ...
- Codeforces 388C Fox and Card Game (贪心博弈)
Codeforces Round #228 (Div. 1) 题目链接:C. Fox and Card Game Fox Ciel is playing a card game with her fr ...
- Spring Cloud配置中心客户端读取配置
微服务连接配置中心来实现外部配置的读取. 引入依赖 <dependencies> <dependency> <groupId>org.springframework ...