JavaScript-DOM练习
2024-06-08 02:28:25
目录
1、手风琴，实现页面切换，背景也随着切换
2、留言板，可删除留言
3、固定版瀑布流，1-50个模块根据模块大小拼接
4、拓展版瀑布流，根据窗口大小进行收缩
5、选字游戏
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>// 获取所有的livar 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 做标记// 判断点击的是否是展开的liif(showIndex==this.index){return;}lis[showIndex].className="";// 2、打开点击的lithis.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个lifor(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';// 填充arrHeightarrHeight=[];for(var i=0;i<col;i++){arrHeight.push(0);}// 创建并设置lisetLi();}setUl();function setLi(){ // 创建50个li标签for(var i=0; i<50;i++){var li =null;var h = 0;if(isFirstLoad){// 第一次加载，需要创建lili=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 = ["黑","黄","红","绿","蓝"];//得分0var score = 0;var time = 20;//计时器var timer=null;//改变showWord和lifunction setView(){pShowWord.innerHTML = words[rand(0,5)];var index = rand(0,5)pShowWord.style.color = colors[index];pShowWord.index = index;//设置lisetLi();}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>
JavaScript-DOM练习相关推荐
- 六、前端开发-JavaScript DOM
六.前端开发语言体系-JavaScript DOM 文章目录 六.前端开发语言体系-JavaScript DOM JavaScript DOM DOM简介 DOM方法 DOM事件 DOM事件监听器 D ...
- javascript DOM 遍历
javascript DOM 遍历 由 愚人码头 撰写 http://www.css88.com/archives/514 javascript DOM 遍历 以下一系列的辅助函数可以帮助您,他们能取 ...
- javascript DOM（08-21）
1.createElement()和createTextNode() //创建一个li新元素 var newChild=document.createElement('li'); //创建一个a 新元 ...
- html dom 替换节点,从javascript dom文本节点替换
我正在使用javascript处理xhtml.我通过连接nodeType == Node.TEXT_NODE的所有子节点的nodeValue来获取div节点的文本内容.从javascript dom文 ...
- javascript dom追加内容的例子
javascript dom追加内容的例子 javascript dom追加内容的使用还是比较广泛的,在本文将为大家介绍下具体的使用方法. 例子: <!DOCTYPE html PUBLIC & ...
- java svg 读取dom结构_SVG基础以及使用Javascript DOM操作SVG
SVG 不依赖分辨率 支持事件处理器 最适合带有大型渲染区域的应用程序(比如谷歌地图) 复杂度高会减慢渲染速度(任何过度使用 DOM 的应用都不快) 不适合游戏应用 Canvas 依赖分辨率 不支持事 ...
- JavaScript Dom编程艺术
当我对JavaScript还停留在只认识这几个字母的时候,有一天我突然心血来潮,在网上下了DOM Scripting的样章,照着里面的例子写了我平生第一个能让我知所以然JavaScript,在浏览器运 ...
- html鼠标离开点击停留,Javascript DOM事件操作小结(监听鼠标点击、释放，悬停、离开等)...
本文实例总结了Javascript DOM事件操作.分享给大家供大家参考,具体如下: 使用JavaScript可以对HTML页面上的各种事件进行监听,如鼠标点击/释放,鼠标悬停/离开,等等. 效果图: ...
- 高性能JavaScript DOM编程
我们知道,DOM是用于操作XML和HTML文档的应用程序接口,用脚本进行DOM操作的代价很昂贵.有个贴切的比喻,把DOM和 JavaScript(这里指ECMScript)各自想象为一个岛屿,它们之间 ...
- Javascript——DOM编程
Javascript--DOM编程 基本概述 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM可以以一种独立于平台和语 ...
最新文章
- 算法笔记_114:等额本金(Java)
- ServletContextListener接口用法
- 【从上云到创新，视频云的新技术与新场景】
- javascript面向对象属性函数用法(defineProperty与getOwnPropertyDescriptor)
- html伪元素before占用高度,CSS：伪元素：before和：after从原始元素继承宽度/高度...
- 原版英文书籍《Linux命令行》阅读记录7 | 一些键盘按键技巧
- 計算機二級-java07
- Kruskal算法 最小生成树
- 同事用Excel花了半小时做甘特图，我用一工具只用10分钟
- Spring Cloud Alibaba Nacos之服务注册中心
- 使用python实现猴子摘香蕉问题
- CentOS8桌面图标不显示
- ASAN中无崩溃测试方案实现
- 积化和差、和差化积公式及记忆
- 学习了pr后的收获_我的PR小结
- 3、管理员添加内容的实现
- 51单片机 普中V2 超声波测距 报警 显示 基于MCS51单片机的超声波测距模块的开发
- WebService 深入详解
- C语言————exec函数族
- chrome android 功能大全,Android版Chrome 55 大更新，多个新功能袭来