适合刚学js小白熟悉运算符的一个小页面

最新推荐文章于 2024-08-14 15:45:18 发布
最新推荐文章于 2024-08-14 15:45:18 发布
阅读量145 收藏 1
点赞数 3
文章标签： javascript css html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_45187600/article/details/110819325
版权

**

适合刚学js小白熟悉运算符的一个小页

**
刚学习js的小白，对于运算符上手的没那么快的，可以着手尝试一下这种简单，对逻辑提升比较快的小页面
因为我也是一个萌新，只是感觉这个页面帮助很大，所以分享出来，只简化了js的代码，HTML和css部分代码比较冗余，比较乱，大佬勿喷，求指点
以下是css的代码

			* {
				padding: 0px;
				margin: 0px;
			}
			
			html,body {
				width: 100%;
				height: 100%;
			}
			
			.back {
				width: 100%;
				height: 100%;
				background-image: url(../img/bg1.jpg);
				background-size: 100% 100%;
				position: relative;
			}
			
			#piano {
				width: 700px;
				height: 390px;
				position: absolute;
				top: 0px;
				left: 50%;
				margin-left: -350px;
				display: none;
				z-index: 1;
			}
			
			.content {
				width: 340px;
				height: 340px;
				position: absolute;
				left: 50%;
				margin-left: -170px;
			}
			
			.nav {
				width: 100px;
				height: 100px;
				background-image: url(../img/2.jpg);
				background-size: 100% 100%;
				position: absolute;
				left: 50%;
				margin-left: -50px;
				top: 50%;
				margin-top: -50px;
			}
			
			.back>.content>ul>li {
				width: 100px;
				height: 100px;
				background-image: url(../img/1.png);
				background-size: 100% 100%;
				position: absolute;
				color: white;
				list-style: none;
				line-height: 100px;
				font-size: 24px;
				text-align: center;
			}
			
			.back>.content>ul>li:nth-child(1) {
				top: 0px;
				left: 0px;
			}
			
			.back>.content>ul>li:nth-child(2) {
				left: 50%;
				margin-left: -50px;
			}
			
			.back>.content>ul>li:nth-child(3) {
				right: 0px;
			}
			
			.back>.content>ul>li:nth-child(4) {
				top: 120px;
				right: 0px;
			}
			
			.back>.content>ul>li:nth-child(5) {
				bottom: 0px;
				right: 0px;
			}
			
			.back>.content>ul>li:nth-child(6) {
				left: 50%;
				margin-left: -50px;
				bottom: 0px;
			}
			
			.back>.content>ul>li:nth-child(7) {
				left: 0px;
				bottom: 0px;
			}
			
			.back>.content>ul>li:nth-child(8) {
				left: 0px;
				top: 50%;
				margin-top: -50px;
			}
			
			.content1 {
				height: 300px;
				width: 672px;
				background: white;
				position: absolute;
				top: 390px;
				left: 50%;
				margin-left: -336px;
			}
			
			.content1>ul>li {
				list-style: none;
				float: left;
				width: 80px;
				height: 300px;
				border: 2px solid black;
				text-align: center;
				position: relative;
			}
			
			li>span {
				width: 40px;
				height: 150px;
				background: black;
				display: block;
				position: absolute;
				top: 0px;
				right: -20px;
			}

以下的是HTML的代码，有点混乱嘿嘿

<body>
		<div class="back">
			<div id="piano"></div>
			<div class="content">
				<div class="nav" id="btn"></div>
				<ul>
					<li class="key1">两只老虎</li>
					<li class="key1">轨迹</li>
					<li class="key1">小星星</li>
					<li class="key1">粉刷匠</li>
					<li class="key1">新年好</li>
					<li class="key1">找朋友</li>
					<li class="key1">世上只有</li>
					<li class="key1">青花瓷</li>
				</ul>
			</div>
			<div class="content1">
				<ul>
					<li class="key">do<span></span></li>
					<li class="key">re<span></span></li>
					<li class="key">mi</li>
					<li class="key">fa<span></span></li>
					<li class="key">sol<span></span></li>
					<li class="key">la<span></span></li>
					<li class="key">si</li>
					<li class="key">do</li>
				</ul>
			</div>
		</div>
		<audio src="../mp3/1do.mp3"></audio>
		<audio src="../mp3/2re.mp3"></audio>
		<audio src="../mp3/3mi.mp3"></audio>
		<audio src="../mp3/4fa.mp3"></audio>
		<audio src="../mp3/5so.mp3"></audio>
		<audio src="../mp3/6la.mp3"></audio>
		<audio src="../mp3/7si.mp3"></audio>
		<audio src="../mp3/8do.mp3"></audio>

以下是js代码，注释的是没有优化过的代码，主要是理清楚逻辑

<script>
			var btn = document.getElementById("btn");
			var lis = document.getElementsByClassName("key1");

			var arr = ["../img/青花瓷.png", "../img/两只老虎.png", "../img/轨迹.png", "../img/小星星.png", "../img/粉刷匠.png",
				"../img/新年好.png", "../img/找朋友.png", "../img/世上只有.png"
			];
			var piano = document.getElementById("piano");
			var a = 0;
			btn.onclick = function() {

				var ran = parseInt((Math.random() * 20) + 16);//随机数
				var rans = ran + a;
				
				//转盘转到什么歌就出现什么歌谱
				var timer1 = setInterval(function() {
					for(var j = 0; j < 8; j++) {
						if(rans % 8 == j) {
							clearInterval(timer1);
							piano.style.backgroundImage = "url(" + arr[j] + ")";
							piano.style.display = "block";
							piano.style.backgroundSize = "100% 100%";

						}
					}
				}, 120 * rans);
				
				//随机数控制转盘落点的定时器
				var timer = setInterval(function() {

					if(a == 8) {
						a = 0;
					}
					ran--;
					if(ran == 0) {
						clearInterval(timer);
					}

					for(var i = 0; i < 8; i++) {
						lis[i].style.opacity = "1";
					}

					lis[a++].style.opacity = "0.5";
				}, 100);

			}
			
			//键盘的点击发出声音
			var liss = document.getElementsByClassName("key");
			var mp3 = document.getElementsByTagName("audio");
			//			window.οnkeydοwn=function(event){
			//				if(event.keyCode == 49){
			//					mp3[0].play();
			//				}else if(event.keyCode == 50){
			//					mp3[1].play();
			//				}else if(event.keyCode == 51){
			//					mp3[2].play();
			//				}else if(event.keyCode == 52){
			//					mp3[3].play();
			//				}else if(event.keyCode == 53){
			//					mp3[4].play();
			//				}else if(event.keyCode == 54){
			//					mp3[5].play();
			//				}else if(event.keyCode == 55){
			//					mp3[6].play();
			//				}else if(event.keyCode == 56){
			//					mp3[7].play();
			//				}
			//			}
			window.onkeydown = function(event) {
				for(var k = 49; k < 57; k++) {
					if(event.keyCode == k) {
						mp3[k - 49].play();
						liss[k - 49].style.opacity = "0.5";
					}
				}
			}

			//			window.οnkeyup=function(event){
			//				if(event.keyCode==49){
			//					mp3[0].pause();
			//					mp3[0].currentTime = 0;
			//				}else if(event.keyCode==50){
			//					mp3[1].pause();
			//					mp3[1].currentTime = 0;
			//				}else if(event.keyCode==51){
			//					mp3[2].pause();
			//					mp3[2].currentTime = 0;
			//				}else if(event.keyCode==52){
			//					mp3[3].pause();
			//					mp3[3].currentTime = 0;
			//				}else if(event.keyCode==53){
			//					mp3[4].pause();
			//					mp3[4].currentTime = 0;
			//				}else if(event.keyCode==54){
			//					mp3[5].pause();
			//					mp3[5].currentTime = 0;
			//				}else if(event.keyCode==55){
			//					mp3[6].pause();
			//					mp3[6].currentTime = 0;
			//				}else if(event.keyCode==56){
			//					mp3[7].pause();
			//					mp3[7].currentTime = 0;
			//				}
			//			}

			window.onkeyup = function(event) {
				for(var k = 49; k < 57; k++) {
					if(event.keyCode == k) {
						mp3[k - 49].pause();
						mp3[k - 49].currentTime = 0;
						liss[k - 49].style.opacity = "1";
					}
				}
			}

			piano.onclick = function() {
				piano.style.display = "none";
			}
		</script>

文件和页面
https://download.csdn.net/download/qq_45187600/13489364

蒸饺jio
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Shell算术运算符_适合小白的学习笔记
01-09
- `let`命令：`let`允许你在一行中执行一个或多个表达式，例如`let varname=expression`。 - `$[]`语法：`varname=$[expression]`，这个语法在较旧的shell版本中更常见，但在现代Bash中已不再推荐使用，因为它不...
html生成小窗口,用JS制作9种弹出小窗口(HTML)
weixin_33464176的博客
06-05 7831
进入许多网站时，有弹出式小窗口，它们五花八门，使我们捉摸不透下面就来介绍用JS制作9种制作弹出小窗口：1、最基本的弹出窗口代码其实代码非常简单：window.open("page.html")-->因为这是一段Javascript代码，所以它们应该放在之间。是对一些版本低的浏览器起作用，在这些老浏览器中不会将标签中的代码作为文本显示出来。要养成这个好习惯啊。window.open("pa...
JavaScript 扩展运算符用法实例小结【基于ES6】
12-11
扩展运算符允许一个表达式在期望多个参数（用于函数调用）或多个元素（用于数组字面量）或多个变量（用于解构赋值）的位置扩展。 1、将一个数组放入另一个数组中 下面开始通过四个例子来深刻理解扩展运算符 ①. ...
JavaScript js运算符 示例代码
06-07
JavaScript（简称JS）是一种轻量级、解释型、动态类型的脚本语言，主要用于网页前端开发，但也被广泛用于服务器端和移动应用开发。它最初由Netscape公司的Brendan Eich在1995年为Netscape Navigator浏览器设计，目的...
JavaScript一元正号运算符示例代码
10-16
JavaScript中的“一元正号运算符”（+）是一个简单的但功能强大的运算符，它可以用于提升操作数的数值，特别是当处理数据类型转换时。在本文中，我们将深入探讨一元正号运算符的工作原理，以及它如何在不同场景下...
JavaScript运算符小结
12-09
此外，"+"运算符还有一个特殊的用法，它可以连接字符串，例如`"My name is " + "Tom"`会产生`"My name is Tom"`。这种操作在处理字符串拼接时非常实用。 自增和自减运算符（++和--）需要注意其位置的影响。前置...
Element学习（布局组件、案例操作）（4）
m0_74363339的博客
08-08 465
value：表示输入的值，提交表单后传给服务器的值——>"男"表示1，"女"表示2。定义数据模型时，对象要使用大括号。像这里searchForm: {....}3、这一步之后的效果展示（只是空有一个布局——>目前还没有任何的内容）2、找到这种布局对应的代码（复制——>粘贴到标签<div>中）5、 在主展示区域的上方添加"员工查询"的（且独占一行）表单。还有一个当点击"查询"按钮时，会触发一个方法，也要去声明。7、给表格增加一个边框——>加入border属性即可。6、日期选择器——>(官网中组件中找)
Arco Design for Vue 3 - 快速上手指南与实战技巧
qq_42072014的博客
08-11 507
如果你在使用 TypeScript 时遇到了类型定义问题，确保你安装了正确的类型包，并且版本与 Arco Design 的版本相匹配。Arco Design for Vue 3 是一个非常强大的 UI 框架，它不仅提供了丰富的组件和功能，还有完善的文档和支持。通过本文，你已经掌握了如何快速上手 Arco Design，并学会了一些实用的技巧来提升你的开发效率。希望这些经验能帮助你在 Vue 3 的开发过程中更进一步！
vue3进阶用法之通过调用函数动态加载组件用法及示例
最新发布
wz9608的博客
08-14 267
vue官方文档那边虽然说了函数的使用方法，但没有列举这种业务场景。这里只是做一个简单的实例，其实可以通过这种方法实现其他更多的功能，比如说modal框等等等。
Electron学习与总结
song854601134的博客
08-12 201
组成，‌其中Chromium负责渲染和显示Web页面，‌而Node.js则提供了主进程的功能，‌包括管理应用程序的生命周期、‌创建和控制浏览器窗口以及与操作系统交互。，‌Electron使得开发者能够保持JavaScript代码库的一致性，‌从而轻松地创建跨平台的应用程序，‌而无需具备本地开发经验。Electron的核心是由。
牛客JS题（三十四）监听对象
不起眼小菜菜的博客
08-10 420
注释很详细，直接上代码……
【无标题】
weixin_42348009的博客
08-14 114
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 894
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
Ant-Design-Vue快速上手 指南+排坑（下）
Dingdangr的博客
08-10 475
确保你正确定义了校验规则。Ant Design Vue 3.x 及以上版本推荐使用Form.Item的rules属性来定义校验规则，这是一个数组，可以包含多个校验项。html复制代码label="用户名":rules="[{ required: true, message: '请输入用户名!' }, { min: 3, message: '用户名至少为3个字符!' }]"如果 Ant Design Vue 提供的校验规则不满足你的需求，你可以自定义校验规则。
Vue 中 app.config 相关配置项介绍与案例
前端基地
08-13 1023
本博文展开了细致且全面的阐述，对 app.config 、app.config.errorHandler 、app.config.warnHandler 、app.config.performance 、app.config.compilerOptions 、app.config.globalProperties 以及 app.config.optionMergeStrategies 进行了深入剖析。不仅清晰明了地介绍了它们的功能和特性，还通过丰富多样的实际案例展开了详尽的分析。
基于微信小程序的心理测评平台设计与实现
No_Name_Cao_Ni_Mei的博客
08-12 422
本文旨在设计与实现一个基于微信小程序的心理测评平台。该平台将提供心理测评问卷、分析报告和个性化建议等功能，旨在帮助用户了解自身心理状况并提供适当的改善方案。该平台将采用微信小程序作为开发平台，具备跨平台、便捷性等优势，能够满足用户在手机应用中进行心理测评的需求。本平台主要分为用户端和管理员端两个模块。用户端提供注册、登录、心理测试问卷填写等功能，同时可以生成个人心理分析报告和个性化建议。管理员端可以管理测试问卷、生成报告和建议，并管理用户信息和反馈意见。
基于vue框架的NBA球星管理系统1878g（程序+源码+数据库+调试部署+开发环境）系统界面在最后面。
h2345678的博客
08-12 998
随着互联网的普及和体育产业的蓬勃发展，篮球运动在全球范围内拥有庞大的粉丝群体，NBA（美国职业篮球联赛）作为其中的佼佼者，其球星更是备受关注。传统的球星信息管理方式往往依赖于纸质文档或简单的电子表格，这种方式不仅效率低下，难以实现数据的即时更新与共享，也无法满足球迷和媒体对球星信息深度挖掘的需求。因此，开发一套基于Vue框架的NBA球星管理系统，通过信息化手段整合球星信息，实现数据的快速录入、存储、查询与分析，对于提升管理效率、满足用户需求具有重要意义。，处理前端请求并提供业务逻辑。
Vue 标准开发方式与组件、插槽的高效使用
小刘哥的博客
08-10 311
Vue.js 是一个渐进式的 JavaScript 框架，适用于构建用户界面。本文将详细探讨 Vue.js 的标准开发方式，以及如何有效地使用组件、插槽等核心功能。
Unity数据持久化 之 Json序列化与反序列化
2301_77947509的博客
08-09 478
Json的序列化与反序列化
javascript学习手册三：js运算符
03-16
JavaScript运算符分为算术运算符、关系运算符、逻辑运算符、赋值运算符和其他运算符。 算术运算符包括：加（+）、减（-）、乘（*）、除（/）、取模（%）、++和--。 关系运算符包括：等于（==）、不等于（!=）、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值