Java学习笔记day35

最新推荐文章于 2024-06-14 15:02:13 发布
最新推荐文章于 2024-06-14 15:02:13 发布
阅读量55 收藏
点赞数
分类专栏： Java学习记录 文章标签： java 学习 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kouzai8880/article/details/127816674
版权

事件: Event

获取Event对象
	window.event

示例: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				var btn = document.getElementById("btn");
				btn.onclick = function(event){
					console.log(window.event);					
					console.log(event);
					//this在事件当中 指向接收事件的html元素
					console.log(this);
				}
				
				btn.ondblclick = function(){
					console.log(window.event);
				}
			}
		</script>
	</head>
	<body>
		<input type="button" value="按钮" id="btn"/>
	</body>
</html>


事件冒泡

示例: 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 200px;
				background: orange;
			}
		</style>
		
	</head>
	<body>
		<div id="box">
			<input type="button" value="按钮" id="btn" />
		</div>
	</body>
	<script type="text/javascript">
		var box = document.getElementById("box");
		var btn = document.getElementById("btn");
		box.onclick = function(){
			console.log("box被点击了");
		}
		btn.onclick = function(){
			console.log("按钮被点击了");
			//阻止事件冒泡
			window.event.stopPropagation();
		}
	</script>
</html>

你画我猜小游戏

登陆页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>你画我猜</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			html, body{
				width: 100%;
				height: 100%;
			}
			
			#content{
				width: 100%;
				height: 100%;
				background: url(img/bg.gif);
				background-size: 50% 50%;
				position: relative;
			}
			
			#inner{
				width: 400px;
				height: 260px;
				background: rgba(0, 0, 0, 0.3);
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -200px;
				margin-top: -130px;
				border-radius: 20px;
			}
			
			#topic{
				width: 80%;
				height: 40px;
				margin: 10px auto;
				margin-bottom: 5px;
				font-family: "楷体";
				font-size: 28px;
				color: white;
				text-align: center;
				line-height: 40px;
				font-weight: 900;
			}
			
			#username{				
				margin-top: 30px;
				margin-bottom: 10px;
			}
			
			#username, #password{
				width: 90%;
				height: 40px;
				margin-left: 5%;
				border: 1px solid white;
				border-radius: 10px;
				box-sizing: border-box;
				position: relative;
				padding-left: 3px;
			}
			
			#uname, #pword{
				display: inline-block;
				color: white;
				font-size: 16px;
				width: 12%;
				height: 40px;
				line-height: 36px;
			}
			
			#uname_input, #pword_input{
				box-sizing: border-box;
				width: 86%;
				height: 30px;
				position: absolute;
				top: 50%;
				margin-top: -15px;
				background: transparent;
				border-width: 0;
				outline: none;
			}
			
			#info{
				width: 90%;
				margin-left: 5%;
				margin-top: 10px;
				text-align: right;
			}
			
			#forget_pword, #regist{
				text-decoration: none;
			}
			
			#forget_pword:hover, #regist:hover{
				color: orange;
			}
			
			#forget_pword, #line, #regist{
				color: white;
				font-size: 14px;
			}
			
			#btn{
				width: 90%;
				margin-left: 5%;
				margin-top: 12px;
			}
			
			#login_btn{
				width: 60%;
				height: 30px;
				margin-left: 20%;
				border-radius: 10px;
				color: white;
				font-size: 16px;
				background: orange;
				border: none;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="inner">
				<div id="topic">
					你画我猜
				</div>
				<hr />
				<div id="username">
					<span id="uname">
						账号: 
					</span>
					<input type="text" id="uname_input" placeholder="请输入账号"/>
				</div>
				<div id="password">
					<span id="pword">
						密码: 
					</span>
					<input type="password" id="pword_input" placeholder="请输入密码"/>
				</div>
				<div id="info">
					<a href="#" id="forget_pword">
						忘记密码
					</a>
					<span id="line">
						|
					</span>
					<a href="#" id="regist">
						注册
					</a>
				</div>
				<div id="btn">
					<input type="button" id="login_btn" value="登录" />
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		document.getElementById("login_btn").onclick = function(){
			var unameInput = document.getElementsByTagName("input")[0];
			var pwordInput = document.getElementsByTagName("input")[1];
			var username = unameInput.value.trim();
			var password = pwordInput.value.trim();
			if(username.length <= 0){
				alert("请输入账号");
				return;
			}
			if(password.length <= 0){
				alert("请输入密码");
				return;
			}
			if(username == "admin" && password == "123456"){
				var name = "管理员";
				name = escape(name);
				var sex = "男";
				sex = escape(sex);
				document.cookie = "name = " + name;
				document.cookie = "sex = " + sex;
				location.href = "main.html";
			}else{
				alert("账号密码不匹配");
			}
		}		
	</script>
</html>

主页面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>你画我猜</title>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			html, body{
				width: 100%;
				height: 100%;
			}
			
			#content{
				width: 100%;
				height: 100%;
				background: url(img/bg.gif);
				background-size: 50% 50%;
				position: relative;
			}
			
			#top{
				width: 100%;
				height: 50px;
				background: rgba(0, 0, 0, 0.3);
				text-align: right;
				line-height: 50px;
				position: relative;
			}
			
			#admin, #exit{
				display: inline-block;
				height: 30px;
				border: 1px solid white;
				color: white;
				text-align: center;
				line-height: 30px;
				font-size: 16px;
				border-radius: 10px;
				margin-left: 30px;			
			}
			
			#admin{
				width: 70px;
			}
			
			#exit{
				width: 106px;
				margin-right: 10px;
				cursor: pointer;
			}
			
			#admin:hover, #exit:hover{
				color: orange;
				border-color: orange;
			}
			
			#inner{
				width: 600px;
				height: 400px;
				background: rgba(0, 0, 0, 0.3);
				position: absolute;
				left: 50%;
				top: 50%;
				margin-left: -300px;
				margin-top: -200px;
				border-radius: 10px;
				box-sizing: border-box;
				position: relative;
			}
			
			#left{
				width: 50%;
				height: 400px;
				box-sizing: border-box;
				border-right: 1px solid white;
				font-size: 120px;
				color: white;
				text-align: center;
				line-height: 400px;
			}
			
			#right{
				width: 50%;
				height: 400px;
				box-sizing: border-box;
				position: absolute;
				top: 0;
				right: 0;
			}
			
			#inner_top{
				width: 100%;
				height: 30px;
				margin-top: 10px;
				font-size: 16px;
				color: white;
				line-height: 30px;
				position: relative;
			}
			
			#span_left{
				margin-left: 10px;
			}
			
			#span_right{
				position: absolute;
				right: 10px;
			}
			
			#topic{
				height: 40px;
				background: rgb(0,218,218);
				margin-top: 30px;
				font-size: 24px;
				color: white;
				text-align: center;
				line-height: 40px;
			}
			
			#info{
				height: 40px;
				margin-top: 80px;
				font-size: 24px;
				color: white;
				text-align: center;
				line-height: 40px;
			}
						
			#start_btn{
				width: 200px;
				height: 30px;
				position: absolute;
				left: 50%;
				margin-left: -100px;
				bottom: 20px;
				border-radius: 5px;
				background: rgb(0,218,218);
				border: none;
				font-size: 16px;
				color: white;
				box-shadow: 0 0 10px white;
			}
			
			#start{
				width: 200px;
				height: 30px;
				position: absolute;
				left: 50%;
				margin-left: -100px;
				bottom: 20px;
				display: none;
			}
			
			#btn_yes, #btn_no{
				display: inline-block;
				width: 30px;
				height: 30px;
				border-radius: 50%;
				border: 1px solid white;
				font-size: 16px;
				text-align: center;
				line-height: 30px;
				color: white;
			}
			
			#btn_no{
				position: absolute;
				right: 0;
			}
		</style>
	</head>
	<body>
		<div id="content">
			<div id="top">
				<span id="admin">
					xxx
				</span>
				<span id="exit">
					退出登录					
				</span>
			</div>
			<div id="inner">
				<div id="left">
					180
				</div>
				<div id="right">
					<div id="inner_top">
						<span id="span_left">
							第1题
						</span>
						<span id="span_right">
							得分: 0
						</span>
					</div>
					<div id="topic">
						你画我猜
					</div>
					<div id="info">
						你准备好了吗?
					</div>
					<input type="button" id="start_btn" value="开始游戏" />
					<!--两个隐藏按钮-->
					<div id="start">
						<span id="btn_yes">
							√
						</span>
						<span id="btn_no">
							×
						</span>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script type="text/javascript">
		var info = document.cookie;
		if(info.length <= 0){
			location.href = "login.html";
		}
		var name = null;
		var sex = null;
		var infos = info.split(";");
		for (var i = 0; i < infos.length; i++) {
			var kv = infos[i].split("=");
			var k = kv[0].trim();
			var v = kv[1].trim();
			if(k == "name"){
				name = unescape(v);
			}else if(k == "sex"){
				sex = unescape(v);
			}
		}
		if(name.length <= 0){
			location.href = "login.html";
		}
		
		var admin = document.getElementById("admin");
		var exit = document.getElementById("exit");
		var left = document.getElementById("left");
		var problem = document.getElementById("span_left");
		var scores = document.getElementById("span_right");
		var info = document.getElementById("info");
		var startBtn = document.getElementById("start_btn");
		var start = document.getElementById("start");
		var btnYes = document.getElementById("btn_yes");
		var btnNo = document.getElementById("btn_no");
		
		admin.innerText = name;
		exit.onclick = () => {
			document.cookie = "name = " + "";
			document.cookie = "sex = " + "";
			location.href = "login.html";
		}
		
		var num = 1;
		var score = 0;
		var task = null;
		var timing = () => {
			var time = parseInt(left.innerText);
			time--;
			if(time >= 0){
				left.innerText = time + "";
			}else{
				alert("您的得分为: " + score + "分");
				clearInterval(task);
				location.reload();
			}
		}
		
		var problems = ["鬼哭狼嚎","飞檐走壁","凤姐","犀利哥",
				"三长二短","抱头鼠窜","鸡鸣狗盗",
				"头破血流","坐井观天","眼高手低","目瞪口呆",
				"胸无点墨",
				"鸡飞狗跳","鼠目寸光","盲人摸象","画蛇添足",
				"画龙点睛","抱头鼠窜","狗急跳墙","虎背熊腰",
				"守株待兔","亡羊补牢","对牛弹琴","如鱼得水",
				"打草惊蛇","打草惊蛇","走马观花","三头六臂"];
		var nextProblem = () => {
			var n = Math.floor(Math.random() * problems.length);
			info.innerText = problems[n];
		}
		
		startBtn.onclick = () => {
			startBtn.style.display = "none";
			start.style.display = "block";
			nextProblem();
			task = setInterval(timing, 100);
		}
		
		btnYes.onclick = () => {
			num++;
			score++;
			nextProblem();
			problem.innerText = "第" + num + "题";
			scores.innerText = "得分: " + score;
		}
		
		btnNo.onclick = () => {
			num++;
			nextProblem();
			problem.innerText = "第" + num + "题";
		}
	</script>
</html>
新手小白6
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
day3 java 学习笔记
01-13
day3 java 笔记
springboot学习笔记day13.xmind
04-21
springboot学习笔记day13.xmind
Java学习笔记 day1
Tang_Qie的博客
04-15 198
.java 编译 -> .class ->JVM(java虚拟机) 运行JDK （java 开发工具包）JRE (java 运行环境)Java转义字符\t 制表位 对齐\n 换行\\ 一个\\" 一个"\' 一个'\r 一个回车\\ 注释\* *\ 多行注释
JAVA学习笔记 day1
salad_oil的博客
11-06 76
java基础
Java学习笔记Day1.1
qq_43559559的博客
09-18 215
安装软件最好新建一个文件夹，方便统一与管理。 到Oracle官网下载jdk 版本8，接着傻瓜式安装 1. 配置jdk环境变量： 步骤（window10） 右击此电脑–>属性–>高级系统设置–>环境变量–>分别在用户变量一框新建以下三个变量： 1.java_home (jdk的安装目录) C:\Program Files\Java\jdk1.8.0_201 2.path（jd...
JAVA学习笔记DAY3——菜鸟教程Java基础
weixin_47227105的博客
06-09 975
菜鸟教程面向对象之前的部分都走马观花看了一遍。用于突击学习和复习。
Java学习笔记
stange1的博客
05-06 5242
1.2.1 首先找到此电脑，右键点击属性，可以按照下面的界面；点击【高级系统设置】，再点击【环境变量】 1.2.2 找到JDK的bin目录，复制一下 1.2.3 将JDK的bin目录粘贴在Path环境变量后面 1.2.4.在CMD输入javac -version 看提示信息是否显示你安装JDK的版本号​ 1、java 基础（Java SE）标准版 2、就业方向：①JavaEE软件工程师②大数据③android开发 3、运行原理示意图 4、Java 开发注意事项和细节说明 5、如何快速掌握技术或知识点 代
java学习笔记day1
m0_52601335的博客
02-25 539
java学习笔记day1 首先，创建一个文本文档，然后命名为“类”的名字。如：Steam.java 之后，win+R打开命令面板，输入cmd. 如图： 之后，**C:\Users\22836>**代表初始的文件路径。经过，几步操作，跳转到 java文本文档所在的路径。 java文本文档所在的路径 如图： 之后，输入javac Steam.java，编译java文本文档. 会看到 文件中，多了一个 class文档。 然后，输入java Steam,就进行 执行程序的阶段了。程序会 运作，并产生结
java学习笔记（持续更新）
快乐学习，daydayup!
12-24 7375
如果您也在学习java，希望能够和您一起讨论，一起学习。这篇文章是记录笔者0基础学习java的过程，如果您阅读这篇文章时，发现一些错误，也希望您愿意指出。本次java学习流程以黑马程序员的java教学视频为主，其他博主或公开教程为辅。学习过程中遇到的一些个别情况或错误都会记录其中并记载解决方案。本篇学习记录会一直更新，希望能与大家一起学习，共同成长。
JAVA学习笔记-day1
riverMS的博客
08-11 235
自学
JAVA学习笔记day 001
xiaomiguoba7的博客
04-19 225
学习笔记
JAVA学习笔记DAY1
xieyihu的博客
04-19 374
一.数组篇 一维数组测试 import java.util.Scanner; public class Test { public static void main(String[] args) { Scanner scanner = new Scanner(System.in); System.out.println("请输入学生个数"); int number = scanner.nextInt(); int[] arr = new int[number]; Syst
springboot学习笔记day12.xmind
03-30
springboot学习笔记day12.xmind
springboot学习笔记day11.xmind
03-11
springboot学习笔记day11.xmind
学习笔记java_day03
08-26
java\CoreJava笔记\CoreJava_day03 java\CoreJava笔记\CoreJava_day03
【仿真建模-anylogic】FlowchartPort原理解析
zhaoyaxuan001的博客
06-14 379
FlowchartPort是流图组件端口的基类，一般不会直接使用；如果需要自行封装组件库时会用到；FlowchartPort继承Port类，并定义了一系列抽象函数；用于输入端口判定此刻是否不能接收Agent。用于输出端口判定是否有Agent准备离开。判定端口是否发生错误。
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 545
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
Spring Boot集成antlr实现词法和语法分析
HBLOG
06-13 918
Antlr4 是一款强大的语法生成器工具，可用于读取、处理、执行和翻译结构化的文本或二进制文件。基本上是当前 Java 语言中使用最为广泛的语法生成器工具。Twitter搜索使用ANTLR进行语法分析，每天处理超过20亿次查询；Hadoop生态系统中的Hive、Pig、数据仓库和分析系统所使用的语言都用到了ANTLR；Lex Machina将ANTLR用于分析法律文本；Oracle公司在SQL开发者IDE和迁移工具中使用了ANTLR；NetBeans公司的IDE使用ANTLR来解析C++；
盲盒App开发时有哪些技术框架可以借鉴
最新发布
bytekj的博客
06-14 642
在开发盲盒App时，可以根据项目需求和团队技术栈选择合适的技术框架。前端可以选择微信小程序框架、React Native或Vue.js等；后端可以选择Node.js或Spring Boot等；数据库可以选择MySQL或MongoDB等。同时，还需要考虑缓存、消息队列、支付和物流接口等其他技术来完善应用的功能和性能。
java 学习笔记 xmind
01-02
Java 学习笔记 XMind 是一款专门用于整理和管理 Java 学习内容的思维导图软件。通过 XMind，我们可以将 Java 相关的知识点、重点、代码案例、类库等内容进行整理和分类，方便我们进行学习和复习。 首先，我用 XMind...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值