学习教程：黑马程序员视频链接
对象
了解
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let goods = {
'goods-name' : 'xiaomi',
num : '1112222',
weight : '0.55kg',
address : 'China',
song : function() {
document.write("i am singing<br>");
},
dance : function() {
document.write('i am dancing<br>');
}
}
console.log(goods);
goods.name = 'xiaomi10plus';
goods.color = 'pink';
console.log(goods);
console.log(goods.num);
console.log(goods['goods-name']);
goods.song();
goods.dance();
</script>
</body>
</html>
遍历对象
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<script>
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
];
for(let i = 0;i < students.length;i++) {
for(let key in students[i]) {
console.log(students[i][key]);
}
}
</script>
</body>
</html>
案例-使用遍历对象渲染表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table {
width: 600px;
text-align: center;
}
table,
th,
td {
border: 1px solid #ccc;
border-collapse: collapse;
}
caption {
font-size: 18px;
font-weight: 600;
margin-bottom: 20px;
}
tr {
height: 40px;
cursor: pointer;
}
table tr:nth-child(1) {
background-color: #ddd;
}
table tr:not(:first-child):hover {
background-color: #eee;
}
</style>
</head>
<body>
<!-- <h3>学生信息表</h3> -->
<table>
<caption>学生信息表</caption>
<tr>
<th>num</th>
<th>name</th>
<th>gender</th>
<th>age</th>
<th>hometown</th>
</tr>
<script>
let students = [
{name: '小明', age: 18, gender: '男', hometown: '河北省'},
{name: '小红', age: 19, gender: '女', hometown: '河南省'},
{name: '小刚', age: 17, gender: '男', hometown: '山西省'},
{name: '小丽', age: 18, gender: '女', hometown: '山东省'}
];
for(let i = 0;i < students.length;i++) {
document.write(`<tr><td>${i + 1}</td>`);
for(let key in students[i]) {
document.write(`<td>${students[i][key]}</td>`)
}
document.write('</tr>');
}
</script>
</table>
</body>
</html>
案例-生成随机颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid #000;
}
</style>
</head>
<body>
<div id="demo"></div>
<script>
function getRandom(floor, ceiling) {
return Math.floor(Math.random() * (ceiling - floor + 1)) + floor;
}
function getRandomColor1() {
let letters = ['a', 'b', 'c', 'd', 'e', 'f', '0', '1', '2', '3', '4', '5', '6', '7', '8', '9' ];
// return letters[getRandom(0, 5)];
// let color = '#'
// for(let i = 0;i < 6;i++) {
// color += letters[getRandom(0, 5)];
// }
let color = `#${letters[getRandom(0, 16)]}${letters[getRandom(0, 16)]}${letters[getRandom(0, 16)]}${letters[getRandom(0, 16)]}${letters[getRandom(0, 16)]}${letters[getRandom(0, 16)]}`;
return color;
}
function getRandomColor2() {
// return getRandom(0, 255);
color = `rgb(${getRandom(0, 255)},${getRandom(0, 255)},${getRandom(0, 255)})`;
return color;
}
let color = '';
function getRandomColor(flag) {
if(flag) {
return getRandomColor1();
}
else {
return getRandomColor2();
}
}
getRandomColor(false);
const div = document.querySelector('div');
div.style.backgroundColor = getRandomColor(true);
</script>
</body>
</html>
案例-学成在线页面渲染
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
.whole {
width: 1200px;
margin: auto;
}
body {
background-color: #f7f5f3;
}
li {
list-style: none;
}
a {
text-decoration: none;
}
.clearfix:before, .clearfix:after {
content: '';
display: table;
}
.clearfix:after {
/* 清除浮动 */
clear: both;
}
.clearfix {
zoom: 1;
}
.box {
margin-top: 30px;
}
.box-head {
height: 45px;
}
.box-head h3 {
/* text-align: left; */
float: left;
font-size: 20px;
color: #494949;
}
.box-head a {
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
}
.box-body ul {
width: 1225px;
}
.box-body ul li {
position: relative;
float: left;
top: 0;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
transition: all .3s;
}
.box-body ul li a {
display: block;
}
.box-body ul li:hover {
top: -8px;
box-shadow: 0 15px 30px rgb(0 0 0/10%);
}
.box-body ul li image {
width: 100%;
}
.box-body ul li h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
font-weight: 600;
}
.box-body .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-body .info span{
color: red;
}
</style>
</head>
<body>
<div class="box whole">
<div class="box-head">
<h3>精品推荐</h3>
<a href="#">查看全部</a>
</div>
<div class="box-body">
<ul class="clearfix">
<!-- <li>
<a href="#">
<img src="images/course01.png" alt="">
<h4>Think PHP 5.0 博客系统实战项目演练</h4>
<div class="info">
<span>高级</span> • <span>1125</span>人在学习
</div>
</a>
</li> -->
<script>
let data = [
{
src: 'images/course01.png',
title: 'Think PHP 5.0 博客系统实战项目演练',
num: 1125
},
{
src: 'images/course02.png',
title: 'Android 网络动态图片加载实战',
num: 357
},
{
src: 'images/course03.png',
title: 'Angular2 大前端商城实战项目演练',
num: 22250
},
{
src: 'images/course04.png',
title: 'Android APP 实战项目演练',
num: 389
},
{
src: 'images/course05.png',
title: 'UGUI 源码深度分析案例',
num: 124
},
{
src: 'images/course06.png',
title: 'Kami2首页界面切换效果实战演练',
num: 432
},
{
src: 'images/course07.png',
title: 'UNITY 从入门到精通实战案例',
num: 888
},
{
src: 'images/course08.png',
title: 'Cocos 深度学习你不会错过的实战',
num: 590
},
]
for(let i = 0;i < data.length;i++) {
document.write('<li><a href="#">');
document.write(`
<img src=${data[i].src} alt="">
<h4>${data[i].title}</h4>
<div class="info">
<span>高级</span> • <span>${data[i].num}</span>人在学习
</div>`)
document.write('</a></li>');
}
</script>
</ul>
</div>
</div>
</body>
</html>
案例-英雄展示
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
* {
margin: 0;
padding: 0;
}
body {
background-color: #000;
text-align: center;
}
ul {
list-style: none;
/* margin-top: 20px; */
display: flex;
flex-wrap: wrap;
width: 600px;
margin: 20px auto;
}
ul li {
position: relative;
transition: all 1s;
margin-top: 15px;
}
ul li img {
width: 100px;
height: 100px;
}
ul li:first-child {
margin-left: 0;
}
ul li:hover {
transform: scale(1.2,1.2);
z-index: 999;
}
</style>
</head>
<body>
<div class="box">
<ul>
<!-- <li><img src="./images/heros/01.jpg" title="司马懿"></li> -->
<script>
const datas = [
{ name: '司马懿', imgSrc: './images/heros/01.jpg' },
{ name: '女娲', imgSrc: './images/heros/02.jpg' },
{ name: '百里守约', imgSrc: './images/heros/03.jpg' },
{ name: '亚瑟', imgSrc: './images/heros/04.jpg' },
{ name: '虞姬', imgSrc: './images/heros/05.jpg' },
{ name: '张良', imgSrc: './images/heros/06.jpg' },
{ name: '安其拉', imgSrc: './images/heros/07.jpg' },
{ name: '李白', imgSrc: './images/heros/08.jpg' },
{ name: '阿珂', imgSrc: './images/heros/09.jpg' },
{ name: '墨子', imgSrc: './images/heros/10.jpg' },
{ name: '鲁班', imgSrc: './images/heros/11.jpg' },
{ name: '嬴政', imgSrc: './images/heros/12.jpg' },
{ name: '孙膑', imgSrc: './images/heros/13.jpg' },
{ name: '周瑜', imgSrc: './images/heros/14.jpg' },
{ name: 'XXX', imgSrc: './images/heros/15.jpg' },
{ name: 'XXX', imgSrc: './images/heros/16.jpg' },
{ name: 'XXX', imgSrc: './images/heros/17.jpg' },
{ name: 'XXX', imgSrc: './images/heros/18.jpg' },
{ name: 'XXX', imgSrc: './images/heros/19.jpg' },
{ name: 'XXX', imgSrc: './images/heros/20.jpg' }
]
for(let i = 0;i < datas.length;i++) {
document.write(`<li><img src=${datas[i].imgSrc} title=${datas[i].name}></li>`)
// <li><img src="./images/heros/01.jpg" title="司马懿"></li>
}
</script>
</ul>
</div>
</body>
</html>
案例02-成绩表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.score-case {
width: 1000px;
margin: 50px auto;
display: flex;
}
.score-case .table {
flex: 4;
}
.score-case .table table {
width: 100%;
border-spacing: 0;
border-top: 1px solid #ccc;
border-left: 1px solid #ccc;
}
.score-case .table table th {
background-color: #bbb;
}
.score-case .table table td {
margin: auto;
}
.score-case .table table tr:hover td {
/* margin: auto; */
background-color: #f5f5f5;
}
.score-case .table table th,
.score-case .table table td {
border-right: 1px solid #ccc;
border-bottom: 1px solid #ccc;
text-align: center;
padding: 10px;
}
/* td.red 交集选择器 */
.score-case .table table td.red,
.score-case .table table td.red {
color: red;
}
.score-case .table table td.none {
color: #999;
}
</style>
</head>
<body>
<div id="app" class="score-case">
<div class="table">
<table>
<thead>
<tr>
<th>编号</th>
<th>科目</th>
<th>成绩</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<!-- <tr>
<td>1</td>
<td>语文</td>
<td class="red">99</td>
<td><a href="#">删除</a></td>
</tr> -->
<script>
let data = [
{ subject: '语文', score: 46 },
{ subject: '数学', score: 80 },
{ subject: '英语', score: 100 },
];
let sum = 0;
for(let i = 0;i < data.length;i++) {
sum += data[i].score;
data[i].flag = data[i].score < 60 ? 'red' : 'notred';
document.write(`<tr><td>${i + 1}</td>
<td>${data[i].subject}</td>
<td class=${data[i].flag}>${data[i].score}</td>
<td><a href="#">删除</a></td><tr>`)
}
// document.write('')
</script>
</tbody>
<tbody>
<tr>
<td colspan="4" class="none"><span>暂无数据</span></td>
</tr>
</tbody>
<tfoot>
<script>
document.write(`
<tr>
<td colspan="4">
<span>总分：${sum}</span>
<span>平均分：${sum/data.length}
</span>
</td>
</tr>`)
</script>
</tfoot>
</table>
</div>
</div>
</body>
</html>