目录
1、手风琴，实现页面切换，背景也随着切换
<!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;
list-style: none;
}
html,body{
height: 100%;
}
body{
background-image: url(img/1.jpg);
background-size: cover;
background-position: center center;
}
ul{
width: 800px;
height: 400px;
background-color: pink;
/* margin:0 auto */
position: absolute;
left:50%;
top: 50%;
margin-left:-400px;
margin-top: -200px;
}
li{
width: 80px;
height: 400px;
float: left;
background-size: cover;
background-position: center center;
transition: .3s;
}
.open{
width: 480px;
}
li p{
width: 80px;
height: 400px;
background-color: rgb(24, 120, 204);
color: black;
font-size: 40px;
}
</style>
</head>
<body>
<ul>
<li class="open" style="background-image: url(img/1.jpg);">
<p>风景</p>
</li>
<li style="background-image: url(img/1.jpg);"><p>风景</p></li>
<li style="background-image: url(img/2.jpg);"><p>大厦</p></li>
<li style="background-image: url(img/3.jpg);"><p>白云</p></li>
<li style="background-image: url(img/4.jpg);"><p>寿司</p></li>
</ul>
<script>
// 获取所有的li
var lis = document.querySelectorAll("li");
// 记录当前open的下标
var showIndex=0;
// 使用for循环，添加点击事件
for(var i=0;i<lis.length;i++){
lis[i].index=i;//为每个li添加一个标记
lis[i].onclick=function(){
// 1、收起展开的li
// 1.1、我不知道那个li展开了，让所有的li都收起来
// for(var j=0;j<lis.length;j++){
// lis[j].className="";
// }
// 1.2 做标记
// 判断点击的是否是展开的li
if(showIndex==this.index){
return;
}
lis[showIndex].className="";
// 2、打开点击的li
this.className="open";
showIndex=this.index;//修改标记值
// 3、修改body的背景图
document.body.style.backgroundImage=this.style.backgroundImage;
}
}
</script>
</body>
</html>
2、留言板，可删除留言
<!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>留言板</title>
<style>
*{
margin: 0;
padding: 0;
list-style: none;
box-sizing: border-box;
}
.container{
width: 800px;
margin: 0 auto;
}
header{
padding: 30px;
background-color: lightgrey;
}
input{
background-color: transparent;
border: 0;
outline: 0;
width: 92%;
height: 36px;
line-height: 36px;
display: block;
margin-left: 4%;
}
header>div{
width: 80%;
height: 36px;
background-color: #efefef;
border-radius: 4px;
margin: 0 auto;
}
#submit{
width: 40%;
margin-top: 40px;
line-height: 36px;
text-align: center;
}
#submit:hover,li p .del:hover{
cursor: pointer;
}
ul{
margin-top: 40px;
}
li{
height: 60px;
margin: 10px;
}
li p{
height: 30px;
}
li p .nick,li p .message{
float: left;
height: 30px;
line-height: 30px;
margin-left: 10px;
}
li p .time,li p .del{
float:right;
height: 30px;
line-height: 30px;
margin-right: 10px;
}
.up{
background-color: lightblue;
}
.down{
background-color: aquamarine;
}
</style>
</head>
<body>
<div class="container">
<header>
<div>
<input type="text" id="nick" placeholder="请输入昵称">
</div>
<div style="margin-top: 40px;">
<input type="text" id="message" placeholder="请输入留言">
</div>
<div id="submit">提交</div>
</header>
<ul>
<!-- <li>
<p class="up">
<span class="nick">leo</span>
<span class="time">15:25:00</span>
</p>
<p class="down">
<span class="message">hello</span>
<span class="del">删除</span>
</p>
</li> -->
</ul>
</div>
<script>
// 标签 与全局变量
var iptNick = document.getElementById("nick");
var iptMessage = document.getElementById("message");
var dSub = document.getElementById("submit");
var ul = document.querySelector("ul");
// 点击 提交 按钮
dSub.onclick=function(){
// 1、获取输入框内容，并判断不能为空
if(iptNick.value == "" || iptMessage.value == ""){
alert("昵称或留言不能为空");
return;
}
// 2.创建对于的li标签，并添加到ul中
var li = document.createElement("li");
li.innerHTML=`
<p class="up">
<span class="nick">${iptNick.value}</span>
<span class="time">${getNowTime()}</span>
</p>
<p class="down">
<span class="message">${iptMessage.value}</span>
<span class="del">删除</span>
</p>
`;
ul.appendChild(li);
// 新消息放在首位/ 如果留言板无留言，则新的消息放在首位
if(ul.children.length ==0){
ul.appendChild(li);
}
else{
ul.insertBefore(li,ul.children[0]);
}
// 3、清空输入框内容
iptNick.value="";
iptMessage.value="";
// 4、删除操作
var spanDel = li.querySelector(".del");
spanDel.onclick=function(){
ul.removeChild(this.parentNode.parentNode);
}
}
// 获取当前时间
function getNowTime(){
var date = new Date();
var h = date.getHours();
var m = date.getMinutes();
var s = date.getSeconds();
return [h,m,s].join(":");
}
</script>
</body>
</html>
3、固定版瀑布流，1-50个模块根据模块大小拼接
<!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;
list-style: none;
}
.container{
width: 800px;
overflow: hidden;
margin: 0 auto;
}
ul{
width: 200px;
float: left;
}
li{
width: 190px;
margin: 5px;
color: white;
font-size: 3em;
text-align: center;
background-color: aqua;
}
</style>
</head>
<body>
<div class="container">
<ul></ul>
<ul></ul>
<ul></ul>
<ul></ul>
</div>
<script>
var uls = document.getElementsByTagName("ul");
// 创建50个li
for(var i=0; i<50;i++){
// 1、创建li标签
var li = document.createElement("li");
// 2、配置li标签
li.innerHTML = i+1;
var h = rand(50,300);
li.style.height = h + 'px';
li.style.lineHeight = h + 'px';
// 3、添加到对应的ul中
uls[getMin()].appendChild(li);
}
// 返回高度最低的ul下标
function getMin(){
var min = 0;
for(var i=1;i<uls.length;i++){
if(uls[min].offsetHeight > uls[i].offsetHeight) {
min=i;
}
}
return min;
}
// 随机函数
function rand(min,max){
return Math.round(Math.random()*(max-min)+min);
}
</script>
</body>
</html>
4、拓展版瀑布流，根据窗口大小进行收缩
<!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;
list-style: none;
}
ul{
margin: 0 auto;
position: relative;
}
li{
width: 190px;
background-color: plum;
color: white;
font-size: 3em;
text-align: center;
position: absolute;
transition: .3s;
}
</style>
</head>
<body>
<ul></ul>
</body>
<script>
// 获取标签
var ul= document.getElementsByTagName("ul")[0];
var colWidth=200;//虚拟列宽
var col = 0;//虚拟列数
var arrHeight=[];//记录每一个虚拟列的高度
var isFirstLoad = true;//是否是第一次加载
function setUl(){
// 设置ul宽度
col = Math.floor(window.innerWidth/colWidth);
ul.style.width = col * colWidth + 'px';
// 填充arrHeight
arrHeight=[];
for(var i=0;i<col;i++){
arrHeight.push(0);
}
// 创建并设置li
setLi();
}
setUl();
function setLi(){
// 创建50个li标签
for(var i=0; i<50;i++){
var li =null;
var h = 0;
if(isFirstLoad){
// 第一次加载，需要创建li
li=document.createElement("li");
li.innerHTML = i+1;
h = rand(50,300);
li.style.height = h + 'px';
li.style.lineHeight = h + 'px';
// 将li添加到ul中
ul.appendChild(li);
}
else{
li=ul.children[i];
h = li.offsetHeight;
}
// 还需要配置li的left和top值
var min =getMin();
li.style.left = 5 + min * colWidth + 'px';
li.style.top=arrHeight[min] + 'px';
// 修改对应的arrHeight的值
arrHeight[min]+=(h+5);
}
isFirstLoad = false;
}
// 添加resize事件
window.onresize = function(){
var nweCol =Math.floor(window.innerWidth/colWidth);
if(nweCol === col){
return;
}
// 当浏览器窗口大小发生变化时执行
setUl();
}
// 获取最小高度的下标
function getMin(){
var min=0;
for(var i=0;i<arrHeight.length;i++){
if (arrHeight[min]>arrHeight[i]){
min=i;
}
}
return min;
}
// 随机函数
function rand(min,max){
return Math.round(Math.random()*(max-min)+min);
}
</script>
</html>
5、选字游戏
<!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;
list-style: none;
}
.container{
width: 400px;
height: 600px;
margin: 0 auto;
overflow: hidden;
box-shadow: 0 0 3px gray;
}
.top{
height: 30px;
margin-top: 50px;
font-size: 20px;
}
.top #time{
float: left;
margin-left: 5px;
}
.top #score{
float: right;
margin-right: 5px;
}
#showWord{
text-align: center;
line-height: 100px;
font-size:150px;
margin-top: 50px;;
}
.rule{
font-size: 18px;
text-align: center;
margin-top: 100px;
}
ul{
height:30px;
display: flex;
justify-content: space-around;
}
li{
width: 400px;
height: 300px;
line-height: 250px;
font-size:30px;
text-align: center;
}
</style>
</head>
<body>
<div class="container">
<p class="top">
<span id="time"> 剩余时间:20 </span>
<span id="score"> 得分:0 </span>
</p>
<p id="showWord">黑</p>
<p class="rule">根据上面字的颜色,在下面选择正确的字</p>
<ul>
<li>黑</li>
<li>黄</li>
<li>红</li>
<li>绿</li>
<li>蓝</li>
</ul>
</div>
</body>
<script>
var pShowWord = document.getElementById("showWord");
var lis = document.getElementsByTagName("li");
var spanTime = document.getElementById("time");
var spanScore = document.getElementById("score");
//数据源
var colors=["black","yellow","red","green","blue"];
var words = ["黑","黄","红","绿","蓝"];
//得分0
var score = 0;
var time = 20;
//计时器
var timer=null;
//改变showWord和li
function setView(){
pShowWord.innerHTML = words[rand(0,5)];
var index = rand(0,5)
pShowWord.style.color = colors[index];
pShowWord.index = index;
//设置li
setLi();
}
setView();
function setLi(){
//打乱数组
var wordIndex = [0,1,2,3,4].sort(function(a,b){
return Math.random() - 0.5;
})
var colorIndex = [0,1,2,3,4].sort(function(a,b){
return Math.random() - 0.5;
})
for (var i=0;i<lis.length;i++){
//文字的下标
var wi = wordIndex[i];
lis[i].innerHTML = words[wi];
lis[i].index = wi;
//颜色的下标
var ci = colorIndex[i];
lis[i].style.color = colors[ci];
}
}
//为li添加点击事件
for (var i=0;i<lis.length;i++){
lis[i].onclick = function(){
if(this.index === pShowWord.index){
//点对了，增加得分
score++;
spanScore.innerHTML = "得分"+ score;
if (score===1){
timer = setInterval(function() {
time-=0.05;
spanTime.innerHTML="剩余时间"+time.toFixed(2);
if(time<=0){
time=0;
spanTime.innerHTML="剩余时间"+time;
//停止结束，结束游戏
clearInterval(timer);
alert("恭喜您的得分是"+score);
}
},50)
}
// 继续游戏
setView();
}
}
}
//随机数
function rand(min,max){
return Math.floor(Math.random()*(max-min)+min);
}
</script>
</html> 
1094
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
