가위바위보
사용 자 는 가위 바위 보 를 선택 하여 컴퓨터 시스템 에서 무 작위 로 가위 바위 보 를 생 성 한 후 결 과 를 판단 하여 사용자 에 게 표시 합 니 다.
실현 효과
2.사용 절차
1.HTML 과 CSS
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> </title>
<style>
#bigbox{
width: 600px;
height: 600px;
background: slateblue;
margin: 0 auto;
}
#bigbox>h1{
width: 100%;
text-align: center;
color: #ffffff;
}
.box1{
height: 200px;
}
.box2{
height: 220px;
}
.box1 img{
float: left;
margin: 25px;
}
.box2 img{
float: left;
margin:20px 63px;
width: 150px;
height: 150px;
}
.box2 h1{
display: block;
color: #000;
float: left;
line-height: 150px;
}
img{
width: 150px;
height: 150px;
}
p{
text-align: center;
color: red;
font-size: 20px;
font-weight: bold;
}
.text{
height: 20px;
}
.text span{
font-size: 20px;
color: #ffffff;
margin: 0 100px;
line-height: 20px;
}
</style>
</head>
<body>
<div id='bigbox'>
<h1> </h1>
<div class="box1">
<img src="../img/shitou.png" alt="">
<img src="../img/jiandao.png" alt="">
<img src="../img/bu.png" alt="">
</div>
<div class="text">
<span> </span>
<span> </span>
</div>
<div class="box2">
<img src="../img/undefined.png" alt="">
<h1>pk</h1>
<img src="../img/undefined.png" alt="">
</div>
<p> 。。。</p>
</div>
</body>
<script>
let imgs=document.getElementsByTagName('img')
// console.log(imgs.length)
for(let i=0;i<3;i++){
imgs[i].onclick=function(){
game(this,i)
}
}
function game(src,i){
// console.log(i)
//
let str=src.src;
let user=document.getElementsByTagName('img')[3]
user.src=str
//
setTimeout(function (){
let user=document.getElementsByTagName('img')[4]
let imgSrc=['../img/shitou.png','../img/jiandao.png','../img/bu.png']
let num = Math.floor(Math.random() * imgSrc.length)
console.log(num)
user.src=imgSrc[num]
i=i*1
//
let rs=document.getElementsByTagName('p')[0]
if(i==0&&num==1 || i==1&&num==2
|| i==2&&num==0){
rs.innerHTML=" ！"
}else if(i==num){
rs.innerHTML=" ， "
}else{
rs.innerHTML=" ， "
}
},200)
}
</script>배열 을 이용 하여 가위 바위 보 src 주 소 를 저장 하고 무 작위 수 를 이용 하여 0-2 의 임 의 숫자 를 생 성 하 며 컴퓨터 는 0.2 초 지연 되 어 생 성 됩 니 다.사용 자 는 for 순환 을 이용 하여 사진 을 onclick()에 연결 하고 그림 을 클릭 하 며 사용 자 는 그림 을 현재 그림 으로 변경 합 니 다.매개 변수 함 수 를 만 들 고 배열 표시 와 this 대상 을 입력 합 니 다.this.src 를 통 해 사용자 가 선택 한 디 스 플레이 그림 을 바 꾸 고 배열 아래 표 시 된 것 과 무 작위 수 를 조건 으로 판단 합 니 다.0 은 가위,1 은 가위,2 는 보 를 대표 합 니 다.결과 생 성 작업 dom'표시
이상 이 바로 본 고의 모든 내용 입 니 다.여러분 의 학습 에 도움 이 되 고 저 희 를 많이 응원 해 주 셨 으 면 좋 겠 습 니 다.
이 내용에 흥미가 있습니까?
현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:
[2022.04.19] 자바스크립트 this - 생성자 함수와 이벤트리스너에서의 this18일에 this에 대해 공부하면서 적었던 일반적인 함수나 객체에서의 this가 아닌 오늘은 이벤트리스너와 생성자 함수 안에서의 this를 살펴보기로 했다. new 키워드를 붙여 함수를 생성자로 사용할 때 this는...
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.
좋은 웹페이지 즐겨찾기
