1<!DOCTYPE html> 2<html style="width:100%;height:100%;"> 3<style> 4 .phone { 5 justify-content:space-around; 6 display:flex; 7 margin-left:60px; 8 margin-right:60px; 9 margin-top:260px; 10 flex-wrap: wrap 11 } 12 .tablet { 13 justify-content:space-around; 14 display:flex; 15 margin-left:260px; 16 margin-right:260px; 17 margin-top:260px; 18 flex-wrap: wrap 19 } 20</style> 21<script> 22 var isPhone = false; 23 function initPhone() { 24 console.info('function init start') 25 this.isPhone = true 26 func1() 27 console.info('function init end') 28 } 29 function initPad() { 30 this.isPhone = false 31 func1() 32 } 33 function func1() { 34 let array = [{src: "./bing.png", name:"必应", addr: "bing.com"}, 35 {src: "./58.png", name: "58同城", addr: "www.58.com"}, 36 {src: "./dianping.png", name: "大众点评", addr:"www.dianping.com"}, 37 {src: "./hao.png", name: "hao123", addr:"www.hao123.com"}, 38 {src: "./jingdong.png", name: "京东", addr:"www.jd.com"}, 39 {src: "./pinduoduo.png", name: "拼多多", addr:"www.pinduoduo.com"}, 40 {src: "./sohu.png", name:"搜狐", addr: "www.sohu.com"}, 41 {src: "./taobao.png", name:"淘宝", addr: "www.tmall.com"}, 42 {src: "./tengxun.png", name:"腾讯新闻", addr:"news.qq.com"}, 43 {src: "./yuedu.png", name:"阅读", addr:"m.zhangyue.com"}, 44 {src: "./zhihu.png", name:"知乎", addr:"www.zhihu.com"}, 45 {src: "./meituan.png", name:"美团", addr:"meituan.com"},] 46 var div = document.getElementById("test") 47 div.className = isPhone ? "phone" : "tablet" 48 for(let i = 0; i < array.length; i++) { 49 let box = document.createElement("div") 50 box.style.display = 'flex' 51 box.style.flexDirection = 'column' 52 box.style.justifyContent = 'center' 53 box.style.alignItems = 'center' 54 box.style.height = '240px' 55 box.style.minWidth = isPhone ? '240px' : '320px' 56 box.style.borderRadius = '30px' 57 box.addEventListener('touchstart', function(e){ 58 box.style.backgroundColor = '#e4e4e4' 59 }) 60 box.addEventListener('touchend', function(e){ 61 box.style.backgroundColor = '#00000000' 62 }) 63 let text = document.createElement('p') 64 text.innerHTML = array[i].name 65 text.style.fontSize = '26px' 66 text.style.fontWeight = 400 67 var image = new Image() 68 image.src = array[i].src 69 image.style.width = '96px' 70 image.style.height = '96px' 71 image.onclick = function() { 72 console.info('image.onclick') 73 etsObj.test(array[i].addr) 74 } 75 box.appendChild(image) 76 box.appendChild(text) 77 div.appendChild(box) 78 } 79 80 } 81 </script> 82<body style="height:98%;margin：0px" onload="func1()"> 83<div style="display:flex;flex-direction:column;background-color:#fdfdfd;width:100%;height:100%"> 84 <div id = "test"/> 85</div> 86</body > 87</html>
