<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#content{
width: 1000px;
margin: 300px auto;
border: 1px solid #000;
overflow: hidden;
}
.box{
border: 1px solid #000;
overflow: auto;
width: 200px;
box-sizing: border-box;
float: left; }
.box p{
line-height:15x;
font-size: 14px;
width: 100%;
}
.box span{
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<div id="content">
<p>暂时没有货</p>
<!--<img src="https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg" alt="">-->
<!--<p>苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)</p>-->
<!--<span>499</span>-->
</div>
<script>
var data=[{
img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",
name:"苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)",
price:"499"
},
{
img:"https://img11.360buyimg.com/babel/s180x180_jfs/t1/71634/16/6480/286082/5d48e109Ee6ec4ab4/114c9c81eeb8cfa3.jpg",
name:"美的(Midea) 三门冰箱美的 双门冰箱无霜风冷家用节能静音电冰箱 BCD-231WTM(E)",
price:"288"
},
{
img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",
name:"苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)",
price:"499"
},
{
img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",
name:"苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)",
price:"499"
},
{
img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",
name:"苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)",
price:"499"
}
];
var oContent=document.getElementById("content")
var str=""
for(var i=0;i<data.length;i++){
str+='<div class="box"><img src="'+data[i].img+'" alt=""><p>'+data[i].name+'</p><span>'+data[i].price+'</span></div> '
}
oContent.innerHTML = str;//除了表单标签用value,其他都用innerHTML;
</script>
</body>
</html>

步骤:1、首先正常设置好大盒子里小盒子的样式,然后删除小盒子,只留着样式。这些样式可以统以给剩下的用。

  <style>
#content{
width: 1000px;
margin: 300px auto;
border: 1px solid #000;
overflow: hidden;
}
.box{
border: 1px solid #000;
overflow: auto;
width: 200px;
box-sizing: border-box;
float: left; }
.box p{
line-height:15x;
font-size: 14px;
width: 100%;
}
.box span{
font-size: 16px;
color: red;
}
</style>
</head>
<body>
<div id="content">
<p>暂时没有货</p>
<!--<img src="https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg" alt="">-->
<!--<p>苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)</p>-->
<!--<span>499</span>-->
</div>

   2、当没有数据包时自己制作数据包,制作要求:数组里面有多个对象,每个对象里都是键值对。属性值要用双引号(“”)包裹住,键值对之间用逗号(,)隔开,对象与对象之间也用逗号隔开,一定要注意格式别写错。

 var data=[{
img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",
name:"苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)",
price:"499"
},
{
img:"https://img11.360buyimg.com/babel/s180x180_jfs/t1/71634/16/6480/286082/5d48e109Ee6ec4ab4/114c9c81eeb8cfa3.jpg",
name:"美的(Midea) 三门冰箱美的 双门冰箱无霜风冷家用节能静音电冰箱 BCD-231WTM(E)",
price:"288"
},
{
img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",
name:"苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)",
price:"499"
},
{
img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",
name:"苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)",
price:"499"
},
{
img:"https://img10.360buyimg.com/babel/s180x180_jfs/t1/61418/15/1092/294001/5cf50c2cEe7e8bee5/280ec0703f1db717.jpg",
name:"苏泊尔(SUPOR)电磁炉 整板触控 SDHC8E15-210D电磁灶(赠汤锅+炒锅)",
price:"499"
}
];

 3、通过大盒子的id与js实现练习。设置一个空字符串,利用for循环,将设置的数据库data里面的各个属性值一次赋值给str,一定要注意格式。属性值外面要‘+xx.x+’,单引号和加号别搞忘了。

然后将str被赋到的值传给大盒子。str就相当于是小盒子

var oContent=document.getElementById("content")
var str=""
for(var i=0;i<data.length;i++){
str+='<div class="box"><img src="'+data[i].img+'" alt=""><p>'+data[i].name+'</p><span>'+data[i].price+'</span></div> '
}
oContent.innerHTML = str;//除了表单标签用value,其他都用innerHTML;

jason数组实现页面的更多相关文章

  1. jQuery Ajax遍历表格,填充数据,将表格中的数据一条一条拼成Jason数组

    $.ajax({ url: baseURL + "InvoiceSale/OnQuotaInvoiceSale", //点击核销单号时,点击核销时,交互的页面           ...

  2. JS数组 编程练习 使用Javascript语言,把以下数组 在页面显示如下图所示的图案

    编程练习 使用Javascript语言,把以下数组 var  arr = ['*','##',"***","&&","****&quo ...

  3. php中使用mysql_fetch_array输出数组至页面中展示

    用的是CI框架,很好的MVC结构 在Model层 public function showProteinCategory(){ $sql = "SELECT DISTINCT protein ...

  4. springmvc使用数组接收页面商品列表批量删除传过来的参数,并完成批量删除的操作。

    1.1 需求 在商品列表页面选中多个商品,然后删除. 1.2 需求分析 此功能要求商品列表页面中的每个商品前有一个checkbox,选中多个商品后点击删除按钮把商品id传给controller,根据商 ...

  5. Linux就这个范儿 第15章 七种武器 linux 同步IO: sync、fsync与fdatasync Linux中的内存大页面huge page/large page David Cutler Linux读写内存数据的三种方式

    Linux就这个范儿 第15章 七种武器  linux 同步IO: sync.fsync与fdatasync   Linux中的内存大页面huge page/large page  David Cut ...

  6. Spring MVC数组绑定

    需求:商品批量删除,用户在页面选择多个商品,批量删除. 关键:将页面选择(多选)的商品id,传到controller方法的形参,方法形参使用数组接收页面请求的多个商品id // 批量删除 商品信息 @ ...

  7. JQuery Uplodify上传附件(同一个页面多个uplodify控件解决方案)

    功能描述:实现同一页面中多个不同附件的上传保存,且做到最大程度的减少代码修改量(最大程度的公用),为了方便实现垃圾数据和垃圾文件的处理,项目采用临时文件夹的方式:即:文件自动上传先保存到临时文件夹下, ...

  8. springMVC学习(6)-包装pojo类型、数组、list、Map类型参数绑定

    一.包装类型pojo参数绑定: 需求:商品查询controller方法中实现商品查询条件传入. 实现方法: 1)在形参中 添加HttpServletRequest request参数,通过reques ...

  9. php数据库访问及增删改

    利用PHP访问由MySQL构建的数据库 连接到数据库 //1.造连接对象 $db = new MySQLi("localhost","root","1 ...

  10. SQLite剖析之存储模型

    前言 SQLite作为嵌入式数据库,通常针对的应用的数据量相对于DBMS的数据量小.所以它的存储模型设计得非常简单,总的来说,SQLite把一个数据文件分成若干大小相等的页面,然后以B树的形式来组织这 ...

随机推荐

  1. linux安装等

    软碟通刻入某版本linux 推荐方法 2) 1) U盘启动 修改vmlinuz initrd=initrd.img linux dd quiet 查看U盘盘符 重启修改hd:/dev/sd** qui ...

  2. xmake构建C/C++编译环境

    1. xmake介绍 XMake是一个基于Lua的轻量级跨平台自动构建工具,支持在各种主流平台上构建项目 xmake的目标是开发者更加关注于项目本身开发,简化项目的描述和构建,并且提供平台无关性,使得 ...

  3. 关于uniapp

    1.unipp中,页面生命周期onShow获取上一个传过来的options值. 答:onShow() { // 获取当前小程序的页面栈 let pages = getCurrentPages(); / ...

  4. Dependencies 和 Libraries 的区别

    Dependencies 和 Libraries 的区别 - 如何导入 jar 包 虽然现在的项目大多数人更愿意使用 Maven 等工具构建,但是在学习 Project Structure 这块的时候 ...

  5. linux 文件系统和包管理工具rpm,yum

    文件系统 1.什么是文件系统? 文件系统是一种存储和组织计算机中数据文件的机制或方法,他使得对计算机内的数据的存储.访问和查找变得更容易,简单. 文件系统落到计算机里其实就是一个应用软件 ext2 e ...

  6. jetson TX2 + opencv3.4 + python3 + 双目 +人脸检测

    淘宝看到一款很便宜的双目,150元,就买了.想着用它学习一下opencv,好换个工作.当然,也想着能否用它做一些好玩的,比如三维重建之类高大上的东西.先用便宜的入个门,等以后眼界高了再看是不是买那些更 ...

  7. 与用户交互 Scanner

    与用户交互 Scanner Scanner对象 Java提供了一个工具类,可以用以获取用户的输入.java.util.Scanner 是Java5的新特征 基本语法 Scanner s = new S ...

  8. APK 跳转其他APK

    +import android.content.ComponentName;^M /* @@ -343,6 +346,15 @@ public class MainActivity extends A ...

  9. vue再请求头加token

    Vue:全局拦截所有请求,并在请求头中添加token - 道祖且长 - 博客园 (cnblogs.com) util.js export function sessionSet(user){ let ...

  10. CH573 CH582 CH579蓝牙从机(peripheral)例程讲解四(蓝牙动态广播)

    动态广播有两种实现方式: 1.关闭广播,更改广播包数据,等待关闭上报状态后,开启广播. uint8_t initial_advertising_enable = FALSE; GAPRole_SetP ...