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.快排(快速排序) 这一算法的核心思想为,先随机选一个数作为标兵或者说是标记(这个数一般来说选择该无序数组的中间那个元素 ...
随机推荐
- QUIC协议学习记录
QUIC(Quick UDP Internet Connections,快速UDP互联网连接)是Google提出的一种基于UDP改进的通信协议,其目的是降低网络通信的延迟,提供更好的用户互动体验. Q ...
- appium-Android的驱动程序
Appium Android Driver是Android设备的测试自动化工具.Appium Android驱动程序自动化原生的,混合的和移动的Web应用程序,在模拟器,仿真器和真实设备上进行测试.A ...
- BZOJ 3926: [Zjoi2015]诸神眷顾的幻想乡(后缀自动机)
传送门 解题思路 因为叶节点不超过\(20\)个,所以可以枚举这些叶节点,并把这些节点当做根扫整棵树.可以证明所有的子串一定可以被便利到,然后可以对这些串建广义后缀自动机.\(dfs\)的时候要记录一 ...
- 《ArcGIS Runtime SDK for .NET开发笔记》--三维功能
介绍 在ArcGIS Runtim SDK for .NET 10.2.6中,新添加了三维地图功能.在ArcGIS中,我们将三维地图称为Scene(场景),所以在Runtime SDK SDK for ...
- php开发面试题---攻击网站的常用手段有哪些，及如何预防（整理）
php开发面试题---攻击网站的常用手段有哪些,及如何预防(整理) 一.总结 一句话总结: 比较记忆:注意比较各种攻击的区别,比如csrf和xss,以及xss和sql,这样才能记住 1.Sql注入是什 ...
- win10在bios上还原系统
遇到两次,win10系统,自动更新后,c盘好像被格式化了,桌面啥都没了,那个气啊.记录下怎么恢复的. 参考https://www.kafan.cn/edu/50206642.html,中的方法1. 通 ...
- 集合类不安全之ArrayList
1. 不安全的ArrayList 大家都知道ArrayList线程不安全,怎么个不安全法呢?上代码: public class ContainerNotSafeDemo { public static ...
- Windows环境下Oracle数据库的自动备份脚本自动删除30天前的备份
@echo off echo ================================================ echo Windows环境下Oracle数据库的自动备份脚本 echo ...
- OA集成备注
1. 查看轨迹方法<script type="text/javascript"> function WinOpenIt(url) { //alert(1); var t ...
- 数据库的基本使用（C#语言）
目录 insert select 的使用 delete update 更新 Like模糊查询 Order 排序 GETDATA() 聚合函数:MAX,MIN,AVG,SUM,COUNT Max COU ...