JS的游戏-打字机-时钟-随机方块-计算器-摇色子

最新推荐文章于 2024-07-25 11:52:08 发布
最新推荐文章于 2024-07-25 11:52:08 发布
阅读量102 收藏
点赞数
分类专栏： JavaScript 文章标签： html javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Benxiaohai_311/article/details/124834792
版权

一、打字机效果 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>打字机效果</title>
		<script>
			window.onload=function(){
				//如何播放背景声音
				var ao = document.getElementById("ao");
				var str = "学渣|关羽正是上课讲的是加法|抠脚大汉上课了积分卡洛斯n6";
				var index = 0;
				window.setInterval(function(){
					//配音
					ao.play();
					if(index == str.length){
						index = 0;
					}
					//截取需要的写到文本域中的内容
					var ctx = str.substring(0,index);
					document.getElementById("msg").innerHTML = ctx;
					index++;
				},200)
				
				ao.play();
			}
		</script>
	</head>
	<body>
		<textarea id="msg" cols="20" rows="5"></textarea>
		<audio id="ao" width="0px" height="0px" preload="auto" autoplay="autoplay">
			抱歉，你的浏览器不支持audit标签
			<source src="./type.mp3" type="audio/mp3"></source> <!-- 打字机音效 -->
		</audio>
	</body>
</html>

二、canvas画时钟

<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<title>HTML5 时钟</title>
	<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
	<style>
		.clocks {
			height: 500px;
			margin: 25px auto;
			position: relative;
			width: 500px;
		}
	</style>
</head>

<script>
	// inner variables
	var canvas, ctx;
	var clockRadius = 250;
	var clockImage;

	// draw functions :
	function clear() { // clear canvas function
		ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
	}

	function drawScene() { // main drawScene function
		clear(); // clear canvas

		// get current time
		var date = new Date();
		var hours = date.getHours();
		var minutes = date.getMinutes();
		var seconds = date.getSeconds();
		hours = hours > 12 ? hours - 12 : hours;
		var hour = hours + minutes / 60;
		var minute = minutes + seconds / 60;

		// save current context
		ctx.save();

		// draw clock image (as background)
		ctx.drawImage(clockImage, 0, 0, 500, 500);

		ctx.translate(canvas.width / 2, canvas.height / 2);
		ctx.beginPath();

		// draw numbers
		ctx.font = '36px Arial';
		ctx.fillStyle = '#000';
		ctx.textAlign = 'center';
		ctx.textBaseline = 'middle';
		for (var n = 1; n <= 12; n++) {
			var theta = (n - 3) * (Math.PI * 2) / 12;
			var x = clockRadius * 0.7 * Math.cos(theta);
			var y = clockRadius * 0.7 * Math.sin(theta);
			ctx.fillText(n, x, y);
		}

		// draw hour
		ctx.save();
		var theta = (hour - 3) * 2 * Math.PI / 12;
		ctx.rotate(theta);
		ctx.beginPath();
		ctx.moveTo(-15, -5);
		ctx.lineTo(-15, 5);
		ctx.lineTo(clockRadius * 0.5, 1);
		ctx.lineTo(clockRadius * 0.5, -1);
		ctx.fill();
		ctx.restore();

		// draw minute
		ctx.save();
		var theta = (minute - 15) * 2 * Math.PI / 60;
		ctx.rotate(theta);
		ctx.beginPath();
		ctx.moveTo(-15, -4);
		ctx.lineTo(-15, 4);
		ctx.lineTo(clockRadius * 0.8, 1);
		ctx.lineTo(clockRadius * 0.8, -1);
		ctx.fill();
		ctx.restore();

		// draw second
		ctx.save();
		var theta = (seconds - 15) * 2 * Math.PI / 60;
		ctx.rotate(theta);
		ctx.beginPath();
		ctx.moveTo(-15, -3);
		ctx.lineTo(-15, 3);
		ctx.lineTo(clockRadius * 0.9, 1);
		ctx.lineTo(clockRadius * 0.9, -1);
		ctx.fillStyle = '#0f0';
		ctx.fill();
		ctx.restore();

		ctx.restore();
	}

	// initialization
	$(function () {
		canvas = document.getElementById('canvas');
		ctx = canvas.getContext('2d');

		// var width = canvas.width;
		// var height = canvas.height;

		clockImage = new Image();
		clockImage.src = 'https://static.runoob.com/images/mix/125855_nnla_89964.png';

		setInterval(drawScene, 1000); // loop drawScene
	});
</script>

<body>
	<header>
		<h2>HTML5 时钟</h2>
	</header>
	<div class="clocks">
		<canvas id="canvas" width="500" height="500"></canvas>
	</div>
</body>

</html>

三、随机方块

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>随机方块</title>
		<script>
			// 步骤:
			// 1、声明方块的构造方法
		    // 2、创建方块的数组
			// 3、得到页面中的div
			// 4、设置方块数组中的每个方块的属性
			// 5、将创建的方块添加到获取到的div中
            var colors=["red","green","yellow","pink","orange","blue","purple"];
            var fangkuai=function(width,height,color,top,left){
            	this.width=width;
            	this.height=height;
            	this.color=color;
            	this.top=top;
            	this.left=left;
            }
            var fangkuais=[
                 //要使用随机得到颜色，这个颜色我们就使用声明的数组中的颜色，下标随机，所以颜色随机
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500)),
                 new fangkuai("30px","30px",colors[Math.floor(Math.random()*colors.length)],Math.floor(Math.random()*500),Math.floor(Math.random()*500))
            ];
            function dedaodiv(){
            	//得到页面中的这个div元素
            	var div1=document.getElementById("div1");
            	//创建一个div
            	for(var j of fangkuais){
	            	var creatediv=document.createElement("div");
	            	//设置一下创建的这个div的属性
	            	creatediv.style.width=j.width;
	            	creatediv.style.height=j.height;
	            	creatediv.style.backgroundColor=j.color;
	            	creatediv.style.top=j.top+"px";
	            	creatediv.style.left=j.left+"px";
	            	//创建的这个div需要绝对定位
	            	creatediv.style.position="absolute";
	            	//将创建的元素添加到它的子元素中
	            	div1.appendChild(creatediv);
            	}
            }
            window.onload=function(){
            	dedaodiv();
            }
		</script>
	</head>
	<body>
		<div id="div1" style="width:500px; height:500px; position:relative;margin:0px auto; background-color: darkgray;"></div>
	</body>
</html>

四、简易计算器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			#div_main{
				width:270px; height:400px; margin:0px auto; border:1px solid red;
			}
			#div1{
				width:230px; height:50px; margin:0px auto;
				 margin-top:40px;  text-align:center;
			}
			#txt{
				width:220px; height:30px; text-align:right;
			}
			#div2{
				width:230px; margin:0px auto; text-align:center;
			}
			#div2 input {
				width:35px; height:35px; margin: 7px;
			}
		</style>
		<script>
			window.onload=function(){
				//获取文本框
				var text=document.getElementById("txt");
				var div2=document.getElementById("div2");
				var diyici,fuhao;
				//去获取所有的按钮
			    var inputs=div2.getElementsByTagName("input")
			    //给每个按钮添加一个事件
			    for(var i of inputs){
			    	i.onclick=function(){
                        if(!isNaN(this.value)){
                        	 //这个没考虑到0的问题
//                     		 text.value=(Number(text.value+this.value))*1;
                             //这个有问题
//                     		 text.value.chatAt(1) !=0 ? text.value=text.value+this.value : text.value=(text.value+this.value)*1;

	                        if(Number(this.value)==0){
	                        	if(text.value>0 || text.value.indexOf(".")>0){
	                        		text.value=text.value+this.value;
	                        	}
	                        }else {
	                        	text.value=(text.value+this.value)*1;
	                        }
                        }else{
                        	switch(this.value){
                        		case '+':
                        		case '-':
                        		case '*':
                        		case '/':
                        		     diyici=text.value;
                        		     text.value="0";
                        		     fuhao=this.value;
                        		     break;
                        		case 'C':
                        		     text.value="0";break;
                        		case '←':
//                      		     text.value=text.value.substr(0,text.value.length-1);
//                      		     if(text.value.length==0){
//                      		     	text.value="0";
//                      		     }
                                     text.value=text.value.length>1?text.value.substr(0,text.value.length-1):"0";
                        		     break;
                        		case '+/-':
                        		     //判断文本框中的内容是不是包含'-';
                        		     //使用indexOf去判断字符串的内容
                        		     text.value=text.value.indexOf("-")==-1?'-'+text.value:text.value.substr(1);
                        		     break;
                        		case '.':
                        		     text.value=text.value.indexOf(".")==-1?text.value+'.':text.value; break;
                        	    case '=':
                        	         var dierci=text.value;
                        	         switch(fuhao){
                        	         	//默认以为是字符串，会做字符串拼接操作，所以要转型
                        	         	case '+':
                        	         	     text.value=Number(diyici)+Number(dierci);break;
                        	         	case '-':
                        	         	     text.value=Number(diyici)-Number(dierci);break;
                        	         	case '*':
                        	         	     text.value=Number(diyici)*Number(dierci);break;
                        	         	case '/':
                        	         	     if(Number(dierci)==0){
                        	         	     	text.value=0;
                        	         	     }else{
                        	         	        text.value=Number(diyici)/Number(dierci);break;
                        	                 }
                        	          }
                        	}
                        }
			    	}
			    }
			}
//			function dianji(a){
//				var text=document.getElementById("txt");
//				var anniu=a.value;
//				text.value=text.value+anniu;
//			}
		</script>
	</head>
	<body>
		<div id="div_main">
			<div id="div1">
				<input type="text" id="txt"/>
			</div>
			<div id="div2"> 
			    <input type="button" value="C"/> 
			    <input type="button" value="←"/> 
                <input type="button" value="+/-"/> 
                <input type="button" value="+"/> 
				<input type="button" value="1"/> 
			    <input type="button" value="2"/> 
                <input type="button" value="3"/> 
                <input type="button" value="-"/> 
			    <input type="button" value="4"/> 
				<input type="button" value="5"/>
                <input type="button" value="6"/>
                <input type="button" value="*"/> 
			    <input type="button" value="7"/> 
			    <input type="button" value="8"/> 
                <input type="button" value="9"/> 
                <input type="button" value="/"/> 
			    <input type="button" value="0"/> 
				<input type="button" value="."/> 
                <input type="button" value="="/> 
                <input type="button" value="m"/> 
			</div>
			
		</div>
	</body>
</html>

五、摇骰子

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			body {
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  min-height: 100vh;
			}
			
			.dice {
			  background-image: url(https://assets.codepen.io/2002878/random-dice.png);
			  width: 366px;
			  height: 366px;
			  background-position: 0% 100%;
			  animation: .2s steps(5, start) random infinite;
			}
			
			@keyframes random {
			  to {
			    background-position: 100% 100%;
			  }
			}
			
			#dice {
			  display: none;
			}
			
			#dice:checked + label .dice {
			  animation-play-state: paused;
			}
			
			.dice::before {
			  content: '?';
			  background-color: rgba(255, 255, 255, .8);
			  width: inherit;
			  height: inherit;
			  display: flex;
			  justify-content: center;
			  align-items: center;
			  font-size: 320px;
			  font-family: Helvetica;
			  backdrop-filter: blur(20px);
			  -webkit-backdrop-filter: blur(20px);
			  border-radius: 60px;
			}
			
			#dice:checked + label .dice::before {
			  display: none;
			}
		</style>
	</head>

	<body>
		<input type="checkbox" id="dice">

		<label for="dice">
		  <div class="dice"></div>
		</label>
	</body>

</html>

琪公子呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
骰子游戏的概率计算
weixin_30765577的博客
11-29 1719
昨天跟朋友们喝酒，玩掷骰子游戏，游戏规则是这样的： 每人有5个骰子，摇完之后自己可以看，不要让别人知道，然后按顺序轮流叫数，比如x个y，就是说场上所有骰子，为y的至少要有x个，下一个人可以选择继续叫或者摊牌，如果继续叫，那么两个数至少要有一个比前一个人的大，比如前一个人10个③，那你可以叫10个④或者11个①；如果选择摊牌，就来算场上的y是不是大于等于x个，如果是，那么摊牌的人喝酒，如果...
JAVA上百实例源码以及开源项目
热门推荐
http://www.54tianzhisheng.cn/
01-03 2万+
笔者当初为了学习JAVA，收集了很多经典源码，源码难易程度分为初级、中级、高级等，详情看源码列表，需要的可以直接下载！ 这些源码反映了那时那景笔者对未来的盲目，对代码的热情、执着，对IT的憧憬、向往！此时此景，笔者只专注Android、Iphone等移动平台开发，看着这些源码心中有万分感慨，写此文章纪念那时那景！
Python—2023 |已有文章汇总 | 持续更新，直接看这篇就够了
顾木子吖的博客
11-17 1万+
????导语 现将之前写过的文章进行分类整理，方便大家观看找到自己喜欢的文章类型哦~ ????每日更新： 项目1.0樱花将灿，冬尽风暖 漫天樱花表白小程序:“樱花将灿，冬尽风暖“一樱花和你我都想念~(内含多份源码) 项目1.1 纪念册 【Python纪念册】哪些浪漫至极的表白程序—“你做我的男孩，我做你的宇宙” 项目1.2 外星人小游戏 Pygame实战：前方高燃，外星人基地又双叒叕“空降”了。 ????Pygame游戏项目合集───── 项目1.0 超级玛丽 程序员自制游戏：
JAVA 代码
briup_acmer的专栏
01-27 4153
笔者当初为了学习JAVA，收集了很多经典源码，源码难易程度分为初级、中级、高级等，详情看源码列表，需要的可以直接下载！ 这些源码反映了那时那景笔者对未来的盲目，对代码的热情、执着，对IT的憧憬、向往！此时此景，笔者只专注Android、Iphone等移动平台开发，看着这些源码心中有万分感慨，写此文章纪念那时那景！ Java 源码包 Applet钢琴模拟程序java源码 2个目标
js-reflector:打字机的js-reflector
04-27
js反射器打字机的js-reflector 工程师建造了一架飞机，他记录了飞机的结构。 飞行员来，启动电动机，飞向天空。为什么要反思一流的价值在运行时了解更多有助于提高灵活性开始吧给班级起一个明确的名字import { ...
Dev-C++游戏创作之金山打字通
08-08
嘿嘿嘿嘿，金山打字通的配乐来啦！大家可以先去我的博客里看看配套的讲解哦 这些就是资料，大家拿去用，免费了哈！
js源码 - 打字练习游戏
06-27
打字游戏是一个使用HTML5、CSS和JavaScript开发的简单项目。这个项目可以帮助你提高打字速度。这就像一个游戏。单击“开始”按钮开始输入，也可以在任务完成前停止输入。 要运行此项目，只需要一个浏览器。通过单击...
react-reacttypewriterhook用reacthooks来实现打字机的效果
08-15
其中，打字机效果是一种常见的动画形式，它模拟了文字逐个显示的过程，给用户带来一种正在实时输入的感觉。`react-typewriter-hook`就是这样一个库，它利用React Hooks帮助开发者轻松地在组件中实现这种效果。 ...
基于 HTML+ECharts 实现的大数据可视化平台模板（含源码）
柯晓楠
07-24 2685
大数据的可视化对于企业决策、市场分析和业务洞察至关重要。通过直观的数据展示，团队可以快速理解复杂的数据模式，发现潜在的业务机会。本文将详细介绍如何利用 HTML 和 ECharts 实现一个功能丰富的大数据可视化平台模板。
[HTML]一文掌握
CSDN20221005的博客
07-21 885
场景：在网页的底部导航中通常会用到。语法：dl>dt>dd特点：dd前会默认显示缩进效果注意：dl中只允许包含dt/dd标签dt/dd中可以包含任意内容。
前端与HTML
m0_65544927的博客
07-21 492
HTML 不是一种编程语言，而是一种标记语言HyperTextMarkupLanguage。
iframe 渲染请求到的 html (邮件预览), 避免样式污染 + 打印 iframe 邮件详情 + iframe 预览邮件时固定水平滚动条在视口底部
最新发布
汤一飞
07-25 350
iframe 预览邮件 + 打印邮件 + 模拟滚动条
基于 HTML+ECharts 实现的数据可视化大屏案例（含源码）
柯晓楠
07-24 462
数据可视化已成为企业决策和业务分析的重要工具。通过直观、动态的图表展示，数据可视化大屏能够帮助用户快速理解复杂的数据关系，发现潜在的业务趋势。本文将介绍如何利用 HTML 和 ECharts 实现一个功能丰富的数据可视化大屏案例。
HTML启动本地EXE的通用方法
07-22 869
HTML启动本地应用的解决方案
【HTML — 构建网络】HTML 入门
07-24 602
如果您查看许多其他站点的代码，您可能会遇到许多奇怪的标记样式，包括不带引号的属性值。在这一点上，你应该了解 HTML 是什么样子的，以及它在基本层面上是如何工作的。在 HTML 中，不需要在 void 元素标记的末尾添加 a，例如： .但是，它也是一种有效的语法，当您希望 HTML 是有效的 XML 时，您可以这样做。现在，您可以在 Web 浏览器中打开此文件，以查看呈现的代码的外观。在本练习中，您可以如前所述在计算机上本地编辑代码，也可以在下面的示例窗口中编辑代码（在本例中，可编辑示例窗口仅表示。
HTML 基础知识
07-24 819
你写的替代文本应该为读者提供足够的信息，以便对图像传达的内容有一个很好的了解。对于我们的Firefox徽标，一个更好的替代品是“Firefox徽标：围绕地球的火焰狐狸”。如果它们如上所示重叠，那么您的 Web 浏览器将尝试对您想说的内容做出最佳猜测，这可能会导致意外结果。正如我们之前所说，它将图像嵌入到我们的页面中，该图像位于它出现的位置。空格（或任何字符）的简单属性值可以保持不加引号的状态，但建议您将所有属性值加引号，因为这可以使代码更加一致和易于理解。创建链接后，单击它以确保它将您发送到您想要的地方。
Web响应式设计———1、Grid布局
Violetto_Yan的博客
07-21 374
流动网格布局是响应式设计的基础。它通过使用百分比而不是固定像素来定义网格和元素的宽度。这样，页面上的元素可以根据屏幕宽度自动调整大小，适应不同设备和分辨率。//跨越三行（纵向）grid-column: span 2;网格之间间距 gap: 30px;grid-column-gap:列间距。利用fr分成等份，根据屏幕大小自适应。把被合并的注释掉，样式写在第一个上面。grid-row-gap:行间距。//网格区域 跨行/跨列。跨越两列（横向合并）
HTML常用的转义字符——怎么在网页中写“＜div＞＜/div＞”？
weixin_64294248的博客
07-22 236
如果需要在网页中写“”怎么办呢？使用转义字符效果如下：此处使用了转义字符将""转义为““
2023 NOIP CSP-J/CSP-S初赛学习资料合集与教程
"五笔字型课堂"针对的是语言技能，对于非英语为主的地区的学生，五笔字型输入法的学习有助于提高打字效率，减轻在竞赛中的时间压力。 "Linux入门"则是现代编程者必备的基础，理解Linux操作系统的工作原理和命令行...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值