JavaScript的简单案例

一、从静态网页到动态网页

	 在我们过去的html代码中，我们做的都是文本的信息，只能给浏览者观看的效果，但是这样的需求是远远不够的，后来我们引入了css样式，这样也只是让页面更加美观，最后，为了满足人们的需求，我们带来了JavaScript,这样我们就可以在网页中做出操作获取我们需要的了。话不多说，我们来看看今天的简单例子。

二、网上商城的页面展示模块效果图

三、描述

      在我们网上购物的时候，这样的图片是随处可见的，但是，我们如果需要很多的图片展示，这样就需要写很多的div来装这些图片，这样程序看起来很不美观，给程序也带来了很多的弊端，所以，我们选择了js来处理这个内容，具体实现如下：

1，主体代码块：

	
	
	



	

	
	

		

		
		
		

			

			

			
小米9
			
2999元
			
		
		
	
	
	
	
	
	
	

2,js引入代码块

var pictures=[
	{
	"path":"img/shop1.png",
	"name":"小米9",
	"price":"2500元"
	},
	{
		"path":"img/shop2.png",
		"name":"小米9SE",
		"price":"1999元"
	},
	{
	"path":"img/shop3.png",
	"name":"小米笔记本AIR",
	"price":"4999元"
	},
	{
		"path":"img/shop4.png",
		"name":"小米手环",
		"price":"99元"
	},
	{
		"path":"img/1111.jpg",
		"name":"苹果X",
		"price":"9999元"
	},
	{
		"path":"img/2222.jpg",
		"name":"红米7",
		"price":"699元"
	},
	
]

四、小结

	我们通过引入的js,实际上是JSON的数据，将他们动态绑定到页面中，这样就可以得任意的图片，我们都可以实现页面图片的加载了。

五、难点

	1，我们需要掌握JSON的格式，每一个数据条我们要用｛｝包裹，数据条与数据条之间要用‘，’隔开，所有的数据条最终要用[]搞起来，这样以此内推，就可以完后相应的数据的填写了。使用时我们需要引入html页面，依次遍历，将每一条数据都绑定到相应的位置，这样就实现了这个页面。一起学习一下吧！