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.快排(快速排序) 这一算法的核心思想为,先随机选一个数作为标兵或者说是标记(这个数一般来说选择该无序数组的中间那个元素 ...
随机推荐
- js保留两位小数，自动补充零
function returnFloat(value){ var value=Math.round(parseFloat(value)*100)/100; var xsd=value.toStri ...
- 容器————priority_queue
#include <queue> 与queue不同的是可以自定义其中数据的优先级,让优先级高的先出队列. 优先队列具有队列的所有特性,包括基本操作,只是在这基础上添加了内部的一个排序,它本 ...
- 【c#技术】一篇文章搞掂：水晶报表
更新数据源 应该先从[数据库]——[数据库专家]——[刷新]——[数据库]——[验证数据库] 必须先刷新,不然验证数据库无效 XP下,打开水晶报表提示无法创建目录或文件,删除临时目录Temp中文件即可 ...
- （转）MyEclipse中使用git
转:https://www.jianshu.com/p/92ee5c99d3a8 Myeclipse老版本可能需要安装一个插件,高版本中已经安装好了. 连接github 当然我们之前已经有仓库了,我们 ...
- qrcode.js生成二维
使用到qrcode.js生成二维码 pako.js压缩字符串:https://github.com/nodeca/pako 参照代码如下: <!DOCTYPE HTML PUBLIC " ...
- (61)C# 可枚举类型和迭代器
一.可枚举类型 枚举器-Enumerator 是一个只读且只能在值序列向前移动的游标 枚举器需要实现下列接口之一 System.Collections.IEnumerator System.Coll ...
- 原生JavaScript 模拟alert对话框
Window.prototype._alert = function() { //创建一个大盒子 var box = document.createElement("div"); ...
- CodeForces - 841B-Godsend-思维
Leha somehow found an array consisting of n integers. Looking at it, he came up with a task. Two pla ...
- SQL语句的执行顺序和效率
今天上午在开发的过程中,突然遇到一个问题,需要了解SQL语句的执行顺序才能继续,上网上查了一下相关的资料,现整理如下:一.sql语句的执行步骤: 1)语法分析,分析语句的语法是否符合规范,衡量语句中各 ...
- [轉]Exploit Linux Kernel Slub Overflow
Exploit Linux Kernel Slub Overflow By wzt 一.前言 最近几年关于kernel exploit的研究比较热门,常见的内核提权漏洞大致可以分为几类: 空指针引用, ...