内部网站图片滚动FLASH替换html5 如何更改网站滚动图片

转载

网络安全卫士 2023-08-24 10:29:57

文章标签 html JSON 数组 文章分类 HTML5 移动开发

0x00 JSON简介

0x01 JSON字符串，JSON对象和数组

0x02 JSON数据序列化和反序列化

0x03 JSON的使用

0x04 数组的常见操作

0x05 定时器

0x06如何停止定时器

0x07 利用延时性定时器制作延时提示框

0x08 利用间隔性定时器制作无缝滚动图片

0x00 JSON简介

JSON:JavaScript Object Notation,是一种数据交换格式

JSON基于文本，优于轻量（快），用于交换数据

JSON主要用于前后端交互时的传输。几乎所有的编程语言都有解析JSON的库

JSON和XML的比较

JSON是简易的写法，XML是规范的标签写法
JSON更快，更适合js

0x01 JSON字符串，JSON对象和数组

JSON语法规定：

JSON字符串必须为双引号包着而不是单引号。

JSON对象内的键也必须为双引号包着而不是单引号

JSON对象内的值可以是json字符串，数字，json对象，json数组，布尔值或者null

JSON数组中的元素只可以是JSON对象或者JSON字符串

JSON对象：

{
"name":"xiaoming",
"age":21,
"address":["香港","九龙"],
"isMarried":true,
"childNum":null,
"girlfrient":{
    "name":"xiaohong",
    "age":18
    }
}

JSON数组：

[
    {"name":"xiaoming","age":21},
    {"name":"xiaohong","age":22}
]

JSON字符串

'{"name":"xiaomign","age":12}'

这里之所以能用单引号是因为字符串的内容是符合JSON语法规范的一个对象。

演示：

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var jsonObj = {"name":'xiaoming',"age":21,"school":'xdu'};
	console.log(jsonObj,typeof(jsonObj));
	var jsonArr =[
	{"name":'xiaoming',"age":21,"school":'xdu'},
	{"name":'xiaohong',"age":22,"school":'cdu'},
	"json字符串"
	];
	console.log(jsonArr);
	var jsonString='{"name":"xiaomign","age":12}';
	console.log(jsonString);

</script>
</body>
</html>

0x02 JSON数据序列化和反序列化

序列化 JSON.stringify()

把js对象转化为JSON字符串

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	// 序列化，js对象转JSON字符串
	var obj ={name:"小明",age:13};
	console.log(obj,typeof(obj));
	console.log(JSON.stringify(obj),typeof(JSON.stringify(obj)));
</script>
</body>
</html>

内部网站图片滚动FLASH替换html5 如何更改网站滚动图片_数组

反序列化 JSON.parse()

把JSON字符串转js对象

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	// 反序列化，JSON字符串转js对象
	var JSONString ='{"name":"小明","age":13}';
	console.log(JSON.parse(JSONString),typeof(JSON.parse(JSONString)));
</script>
</body>
</html>

0x03 JSON的使用

对于JSON对象的操作

增：obj.xxx='xxx'

删:delete obj.xxx

改:obj.xxx='xxx'

查:obj.xxx

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	JSONobj={"name":"xiaoming","age":24};
	// 增
	JSONobj.height=175;
	// 删
	delete JSONobj.age;
	// 改
	JSONobj.name ="tim";
	console.log(JSONobj);
	// 查
	console.log(JSONobj.name);
</script>
</body>
</html>

0x04php处理json

firefox的插件:json lite

$res = json_decode(json字符串)

将json字符串解码为json对象，当第二个参数为true时，解码为php数组

$res = json_encode($arr/$obj)

将数组或者对象序列化为json字符串

<html>
<head>
<meta charset="utf-8">
</head>
<body>
<?php
    header("Content-type:text/html;charset=utf-8");
    // 1.读取json文件，返回值为字符串类型
    $json = file_get_contents("1.json");
    // 2.将字符串反序列化为json对象
    $oJson = json_decode($json);
    //也可以将字符串反序列化为php数组
    $arrJson = json_decode($json,true);
    echo $oJson->name;
    print_r($arrJson);
    echo $arrJson['name'];
?>

</body>
</html>

字符串 http_build_query(数组)：把数组构建成 url中get查询的字符串,例如:?id=1&name="xiaoming"

0x04 数组的常见操作

1.shift()删除数组的第一个元素，返回被删除元素

2.pop()删除数组最后一个元素，返回被删除的元素

3.unshift() 头插法，返回数组长度

4.push() 尾插法，返回数组长度

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var arr=['刘德华','郭富城','黎明','梁朝伟'];
	var first= arr.shift();
	console.log(first,arr);
	end = arr.pop();
	console.log(end,arr);
	// 头插法
	var length = arr.unshift("咖啡");
	console.log(length,arr);
	// 尾插法
	length = arr.push("米酒");
	console.log(length,arr);

</script>
</body>
</html>

5.concat() 合并两个或多个数组，不会改变原来的数组，返回一个合并完的数组。如果传入的数据类型不是数组，则会当做一个push操作将该数据加入到调用它的数组中。

6.join(separator) 数组转字符串,可传入一个参数用于分隔元素

separator可选，指定要使用的分隔符。如果省略，则使用逗号作为分隔符。

7.split(separator,howmany)字符串转数组，可以传入两个参数

separator必选,指定按什么字符分隔字符串

howmany可选，指定返回数组的最大长度。

8.reverse() 反转数组，返回值为反转后的数组，原数组也发生了变化。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	//数组合并
	var arr=['刘德华','郭富城','黎明','梁朝伟'];
	var arr2=['杨幂','邱淑贞','高圆圆','赵敏'];
	console.log(arr.concat(arr2),arr);
	//数组转字符串
	console.log(arr.join('和'));
	console.log(arr.join());
	//字符串转数组
	var string = '蔡徐坤,打篮球,真垃圾';
	console.log(string.split(',',2));
    var str='xiaoming';
    console.log(str.split(''));   //按照空的字符串来分隔
	//数组反转
	console.log(arr.reverse(),arr);
</script>
</body>
</html>

9.sort(sortfun) 数组排序。可以传入一个参数，直接改变原数组。

sortfun可选，规定排序顺序，必须是函数，不传即按照字典序排序

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	//数组合并
	//从小到大排序
	function cmp1(a,b){
		return a-b;
	}
	//从大到小排序
	function cmp2(a,b){
		return b-a;
	}
	var arr=[1,2,3,11,4,12]
	//字典序
	console.log(arr.sort());
	console.log(arr.sort(cmp1));
	console.log(arr.sort(cmp2));
</script>
</body>
</html>

10.slice(strat,end) 对数组进行切片，前闭后开区间

返回值为数组的切片部分。

start必须，规定从什么地方开始，如果是负数，表示倒数。例如：-1表示倒数第一个

end可选，规定到什么地方结束，如果没有指定，则是到结尾。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var arr=[1,2,3,11,4,12];
	console.log(arr.slice(0,3));
	console.log(arr.slice(-2));

</script>
</body>
</html>

11.splice(index,howmany,x,y,z)

可以对数组进行增加，删除，更改的操作，非常灵活。会返回被删除的项目

index必须。整数，规定增删的位置

howmany必须，要删除的元素的数量，如果设置为0，则不会删除项目

x,y,z为可选项，是添加的新的元素。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var arr=[1,2,3,11,4,12];
	// 增
	arr.splice(0,0,'排球');
	console.log(arr);
	// 删
	arr.splice(0,1);
	console.log(arr);
	//改
	arr.splice(0,1,'L');
	// 将数组的第0个元素替换成L
	console.log(arr);
</script>
</body>
</html>

12.indexOf(item,start) 返回元素的索引，如果没有查找到就返回-1

item必须，查找的元素

start可选，规定从哪里开始查找。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	var arr=[1,2,3,11,4,12];
	console.log(arr.indexOf(11));
</script>
</body>
</html>

13.lastIndexOf(元素值) 返回元素值最后一次出现的索引

14.filter(function) 用于过滤数组成员,满足条件的成员组成一个新的数组返回。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    var arr=[1,2,3,4,5];
    console.log(arr.filter(function(a){
        return a>3;
    }))
</script>
</body>
</html>

15.some() every()

16.map(function) 将数组的所有成员依次传入参数函数，然后把每一次执行结果组成一个新数组返回

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    var arr=[1,2,3,4,5];
    arr.map(function(value,key,arr){
        console.log(arr[key]);
    })
</script>
</body>
</html>

17.forEach(function) 几乎和map一样

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    var arr=[1,2,3,4,5];
    arr.forEach(function(value,key,arr){
        console.log(arr[key]);
    })
</script>
</body>
</html>

18.for(key in 数组)循环

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
</head>
<body>
<script>
    var arr=[1,2,3,4,5];
    arr['username'] ='xiaoming';
    for(var key in arr){
        console.log(arr[key]);
    }
</script>
</body>
</html>

0x05 定时器

1.间隔性与延时性定时器的区别

间隔性定时器 setInterval(fun,time)

fun为执行的函数

time为间隔执行的时间，单位为毫秒，每过time时间就执行一次fun里面的代码

返回定时器句柄

2.延时性定时器setTimeout(fun,time)

fun为执行的函数

time为延时执行的时间，单位为毫秒，进过time时间后执行fun里面的代码，只执行一次

返回定时器句柄

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	// 延时性定时器
	setTimeout(function(){
		alert("我是延时3秒执行的弹窗");
	},3000);
	//间隔性定时器
	setInterval(function(){
		alert("每隔1秒执行一次");
	},1000);
</script>
</body>
</html>

0x06如何停止定时器

clearInterval(定时器句柄) 清除间隔性定时器

clearTimeout(定时器句柄) 在时间还没到的时候，清除延时性定时器。

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
<script type="text/javascript">
	// 延时性定时器
	var time1 =setTimeout(function(){
		console.log("我是延时3秒执行的弹窗");
		clearInterval(time2);
	},3000);
	//间隔性定时器
	var time2 =setInterval(function(){
		console.log("每隔1秒执行一次");
	},1000);
</script>
</body>
</html>

0x07 利用延时性定时器制作延时提示框

当我们鼠标移入小div的时候，会有一个弹窗大div显示在隔壁，鼠标离开两个div的时候，弹窗div延时消失。

<!DOCTYPE html>
<html>
<head>
	<title></title>
<style type="text/css">
	#div1{
		float:left;
		width:50px;
		height:50px;
		background: black;
		margin-right: 30px;
	}
	#div2{
		float:left;
		width:200px;
		height:200px;
		background: green;
		display: none;
		/*不展示*/
	}
</style>
</head>

<body>
	<div id='div1'></div>
	<div id='div2'></div>
<script type="text/javascript">
	window.onload=function(){
		var oDiv1 = document.getElementById('div1');
		var oDiv2 = document.getElementById('div2');
		var timer =null; 
		oDiv2.onmouseover=oDiv1.onmouseover = function(){
			clearTimeout(timer);
			oDiv2.style.display='block';
		};
		oDiv2.onmouseout=oDiv1.onmouseout = function(){
			timer=setTimeout(function(){
				oDiv2.style.display='none';
			},1000);
			
		};
		
	}
</script>
</body>
</html>

0x08 利用间隔性定时器制作无缝滚动图片

思路：

轮播图片其实就是用ul li 把一堆图片排列好，即让这些图片左浮动排列成一行，ul的宽度等于所有图片宽度之和。然后在这堆排列好的图片外套一个容器。设置好容器的宽和高。然后设置为overflow:hidden,即这行图片超出容器的部分会被隐藏。

那么怎么让图片滚动呢？其实这就要用到定位布局了。让这行图片相对容器定位。然后每个30ms就让图片和容器之间left值--即可。

如何让图片滚动完之后从头滚动呢？

首先应该将相同的图片再续一遍

然后设置当offsetLeft < -总图片长度/2 时，left=0 即可以完美骗过观众。

为什么需要将相同的图片续一遍？如果不这样做，直接从图片尾修改到图片头会看到大段空白的。

注意：

style.left

style.width 只能用来写，不能用来读。

读需要用

offsetLeft和offsetWidth

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>轮播图</title>
	<style type="text/css">
		*{
			margin:0;
			padding:0;
		}
		#banner{
			position: relative;
			width:600px;
			height:150px;
			margin:0 auto;
			overflow: hidden;
		}
		#banner ul{
			position:absolute;
			left:0;
			top:0;
			width:2000px;
		}
		#banner ul li{
			list-style: none;
			float:left;
			width:100px;
			height:150px;
		}
		#banner li img{
			width:100px;
			height:150px;
		}
	</style>
</head>
<body>
	<div id="banner">
		<ul>
			<li><img src="img/1.jpg"></li>
			<li><img src="img/2.jpg"></li>
			<li><img src="img/3.jpg"></li>
			<li><img src="img/4.jpg"></li>
			<li><img src="img/5.jpg"></li>
			<li><img src="img/6.jpg"></li>
			<li><img src="img/8.jpg"></li>
			<li><img src="img/9.jpg"></li>
			<li><img src="img/10.jpg"></li>
		</ul>
	</div>
	<script type="text/javascript">
		window.onload=function(){
			var oDiv = document.getElementById('banner');
			var oUl=document.getElementsByTagName('ul')[0];
			var oLi=oUl.getElementsByTagName('li');
			var timer = null;
			function moving(){
				if(oUl.offsetLeft < -oUl.offsetWidth/2 ){
					oUl.style.left = '0';
				}
				oUl.style.left=oUl.offsetLeft - 2 +'px';
			};
			//多拼接一份ul中的内容
			oUl.innerHTML += oUl.innerHTML;
			// 计算ul的宽度
			var width=0;
			for(var i=0;i<oLi.length;i++){
				width += oLi[i].offsetWidth;
			}
			oUl.style.width = width+'px';
			//轮播
			timer = setInterval(moving,30);
			oDiv.onmouseover=function(){
				clearInterval(timer);
			};
			oDiv.onmouseout = function(){
				timer = setInterval(moving,30);
			};
		}
	</script>

</body>
</html>

本文章为转载内容，我们尊重原作者对文章享有的著作权。如有内容错误或侵权问题，欢迎原作者联系我们进行内容更正或删除文章。

上一篇：redis pubsub到前端 redis pubsub命令

下一篇：pytorch实现流水线并行 pytorch 模型并行

提问和评论都可以，用心的回复会被更多人看到评论

发布评论

相关文章

官方博客	全部文章	热门标签	班级博客
了解我们	网站地图	意见反馈

鸿蒙开发者社区	51CTO学堂
51CTO	软考资讯