发表于： 2023-02-17 21:33:08
0 278
今天的js案例：
<!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>
<link rel="stylesheet" href="../css/渲染学成.css">
</head>
<body>
<div class="box w">
<div class="box-bd w">
<ul class="clearfix">
</ul>
<script>
let students = [
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 123
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 456
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 136
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 258
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 147
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 369
},
{
src: `../../js2-DOM/图片/猫.jpg`,
title: `Think PHP 5.0 博客系统实战项目演练`,
num: 789
},
]
for(let i = 0; i < students.length; i++) {
document.write(`
<li>
<a href="#">
<img src=${students[i].src} alt="${students[i].title}">
<h4>
${students[i].title}
</h4>
<div class="info">
<span>高级</span> • <span>在线人数:${students[i].num}</span>
</div>
</a>
</li>
`)
}
</script>
</div>
</div>
</body>
</html>
css：
* {
padding: 0;
margin: 0;
}
.w {
width: 1200px;
margin: auto;
}
li {
list-style: none;
}
li a {
float: left;
color: #333333;
text-decoration:none;
margin: 10px;
}
.bd ul li {
padding: 14px 0;
border-bottom: 1px solid #ccc;
}
.bd ul li a h4 {
font-size: 16px;
color: #4e4e4e;
}
.bd ul li p {
font-size: 12px;
color: #a5a5a5;
}
.box {
margin-top: 30px;
}
.box-hd {
height: 45px;
}
.box-hd h3 {
float: left;
font-size: 20px;
color: #494949;
}
.box-hd a {
float: right;
font-size: 12px;
color: #a5a5a5;
margin-top: 10px;
margin-right: 30px;
text-decoration: none;
}
.box-hd a:hover {
color: #00a4ff;
}
.box-bd ul {
width: 1225px;
}
img {
width: 275px;
}
.box-bd ul li a {
float: left;
width: 228px;
height: 270px;
background-color: #fff;
margin-right: 15px;
margin-bottom: 15px;
margin-top: 40px;
}
.box-bd ul li a h4 {
margin: 20px 20px 20px 25px;
font-size: 14px;
color: #050505;
font-weight: 400;
}
.box-bd .info {
margin: 0 20px 0 25px;
font-size: 12px;
color: #999;
}
.box-bd .info span {
color: #ff7c2d;
}
js_DOM:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
/*div {*/
/* width: 200px;*/
/* height: 200px;*/
/* background-color: red;*/
/*}*/
/*.nav li {*/
/* color: red;*/
/*}*/
/*.wrapper {*/
/* width: 840px;*/
/* height: 420px;*/
/* background-color: red;*/
/* padding: 100px 250px;*/
/* box-sizing: border-box;*/
/*}*/
img {
width: 300px;
}
</style>
</head>
<body>
<!-- <div></div>-->
<!-- <ul class="nav">-->
<!-- <li>1</li>-->
<!-- <li>2</li>-->
<!-- <li>3</li>-->
<!-- </ul>-->
<!-- <div class="box">我是文字内容</div>-->
<!-- <div class="wrapper">-->
<!-- <strong>抽奖</strong>-->
<!-- <h1>一等奖: <span id="one">???</span></h1>-->
<!-- <h3>二等奖: <span id="two">???</span></h3>-->
<!-- <h5>三等奖: <span id="three">???</span></h5>-->
<!-- </div>-->
<img src="images/1.jpg" alt="">
<script>
// const div = document.querySelector('div')
// console.dir(div)
// // const ul = document.querySelector('#ul')
// // const lis = document.querySelectorAll('ul li')
// // console.log(lis)
//
// const lis = document.querySelectorAll('.nav li')
// // document.write(lis)
// // function fn() {
// // for (let i = 0; i <= lis.length; i++ ) {
// // lis.style.backgroundColor = 'pink'
// // }
// // }
// // fn()
// for (let i = 0; i <= lis.length; i++ ) {
// console.log(lis[i]) //每一个的小li对象
// // lis[i].style.color = "pink"
// }
// const box = document.querySelector('.box')
// console.log(box.innerText) //不识别标签
// document.write(box.innerHTML) //识别标签
// box.innerHTML = '<strong>我要更换</strong>>'
//案例 声明数组 ['刘德华', '周杰伦', '周星驰', '张学友', '黎明'] 随机抽取一二三等奖
// const arr = ['刘德华', '周杰伦', '周星驰', '张学友', '黎明']
//
// //一等奖
// const random = Math.floor(Math.random() * arr.length)
// // console.log(arr[random])
// //获取one元素
// const one = document.querySelector('#one')
// one.innerHTML = arr[random]
// //删除中奖的人
// arr.splice(random,1)
// console.log(arr)
//
// //二等奖
// const random2 = Math.floor(Math.random() * arr.length)
// // console.log(arr[random])
// //获取two元素
// const two = document.querySelector('#two')
// two.innerHTML = arr[random2]
// //删除中奖的人
// arr.splice(random2,1)
// console.log(arr)
//
// //三等奖
// const random3 = Math.floor(Math.random() * arr.length)
// // console.log(arr[random])
// //获取three元素
// const three = document.querySelector('#three')
// three.innerHTML = arr[random3]
// //删除中奖的人
// arr.splice(random3,1)
// console.log(arr)
//获取元素
// const img = document.querySelector('img')
// //修改图片
// img.src = '图片/狗.jpg'
// img.title = '动物图片'
//取到 N - M 的随机整数
function getRandom(N, M) {
return Math.floor(Math.random() * (M - N + 1) + N)
}
//获取元素
const img = document.querySelector('img')
//随机得到序号
const random = getRandom(1, 4)
//修改图片
img.src = `images/${random}.jpg`
</script>
</body>
</html>
返回列表
评论