JavaScript进阶指南：从初学者到专家，一步也能登天-CSDN博客

本文链接：https://blog.csdn.net/m0_70031574/article/details/131574579

概要

以下是 JavaScript 的一些关键特点和概要：

客户端脚本语言：JavaScript 最常用于网页开发中，作为一种客户端脚本语言，可以在用户的浏览器中执行。它可以与 HTML 和 CSS 配合使用，为网页添加动态行为和交互能力。
弱类型语言：JavaScript 是一种弱类型语言，这意味着你不需要指定变量的数据类型，变量的类型可以在运行时自动推断。
事件驱动编程：JavaScript 基于事件模型，通过监听各种事件（如鼠标点击、键盘输入、页面加载等）来触发相应的处理函数，实现与用户的交互。
对象导向：JavaScript 是一种基于对象的语言，它支持面向对象编程的概念和特性，如封装、继承和多态。
广泛的应用领域：除了在网页开发中使用外，JavaScript 也可以在服务器端（如Node.js）进行后端开发，进行数据库操作、网络通信等任务。
第三方库和框架：JavaScript 生态系统丰富多样，拥有众多开源的第三方库和框架，如React、Angular、Vue.js等，它们提供了丰富的功能和便捷的开发方式。

今日分享：1、接球小游戏

坤

关键js代码：

<script>

//1.生成0~1200随机数

let r=Math.floor(Math.random()*1200)

//随机点坐标（r,50)，球心坐标(x,y)

let x=600,y=400

//2.计算x和y之间运动距离的倍数关系

let x_y=(x-r)/(y-50)

let dy=-1//沿着y轴向上运动1

let dx=x_y*dy//单位时间沿着x轴运动

//获取小球dom对象

let ball=document.getElementById('ball')

//点击父元素任意开始游戏

let m=null

function startGame(){

if(m==null){

m=setInterval(()=>{

//上下碰撞

if(y<=50){

dy=-dy

}

//左右碰撞

if(x<=50||x>=1150){

dx=-dx

}

//板子碰撞

let c=y1-y

if(((x>=a)&&(x<=b))&&((c<=60)&&(c>=50))){

dy=-dy

}

if(y>750){

alert('游戏结束，点击确定重新开始游戏')

x=600,y=400

x1=500,y1=790

board.style.left=x1-50+'px'

board.style.top=y1-10+'px'

dy=-dy

}

//把单位时间的位移作用在坐标上

x+=dx

y+=dy

//把坐标作用在实际定位上

ball.style.left=x-50+'px'

ball.style.top=y-50+'px'

},1)

}}

let board=document.getElementById('board')

let x1=500,y1=790

let dy1=30,dx1=100

let a=x1-100,b=x1+100

document.οnkeydοwn=function(e){

switch(e.keyCode){

case 38://上

y1-=dy1

a=x1-100,b=x1+100

c=y1-y

board.style.top=y1-10+'px'

break;

case 39://右

x1+=dx1

c=y1-y

a=x1-100,b=x1+100

board.style.left=x1-50+'px'

break;

case 40://下

y1+=dy1

c=y1-y

a=x1-100,b=x1+100

board.style.top=y1-10+'px'

break;

case 37://左

x1-=dx1

a=x1-100,b=x1+100

c=y1-y

board.style.left=x1-50+'px'

break;

}

}

</script>

今日分享：2、走马灯

整体框架流程

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>走马灯</title>

<style>

.f{

width: 800px;

height: 50px;

border-top: 1px solid rebeccapurple;

}

.f>div{

width: 60px;

height: 40px;

background-color: rgba(0, 255, 255, 0);

border-radius: 50%;

float: left;

margin-left: 20px;

}

@keyframes changeColor {

0%{

background-color: red;

}20%{

background-color: blue

}40%{

background-color: rgb(255, 255, 0);

}60%{

background-color: coral;

}80%{

background-color: rgba(134, 31, 207, 0.901);

}100%{

background-color: pink

}

}

.f>div:nth-child(1){

animation: changeColor 3s ease 0s infinite ;

}

.f>div:nth-child(2){

animation: changeColor 3s ease 1s infinite ;

}

.f>div:nth-child(3){

animation: changeColor 3s ease 2s infinite ;

}

.f>div:nth-child(4){

animation: changeColor 3s ease 3s infinite ;

}

.f>div:nth-child(5){

animation: changeColor 3s ease 4s infinite ;

}

.f>div:nth-child(6){

animation: changeColor 3s ease 5s infinite ;

}

.f>div:nth-child(7){

animation: changeColor 3s ease 6s infinite ;

}

.f>div:nth-child(8){

animation: changeColor 3s ease 7s infinite ;

}

.f>div:nth-child(9){

animation: changeColor 3s ease 8s infinite ;

}

.f>div:nth-child(10){

animation: changeColor 3s ease 9s infinite ;

}

</style>

</head>

<body id="body">

<button οnclick="s()">生成</button>

<input type="text" id="input" >行

<span id="a">

<div class="f">

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

</span>

</body>

<script>

//1.获取

let a=document.getElementById('a')

let input=document.getElementById('input')

function s(){

let s=''

for(let i=0;i<input.value;i++){

s+=`

<div class="f" >

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

<div></div>

</div>

`

}

a.innerHTML=s

}

</script>

</html>

第三个小游戏：三国英雄归位

代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>三国英雄</title>

<style>

/*

操控单个元素，布局方式：子元素绝对定位，父元素相对定位，所有子元素，left，top相对于父元素的左上顶点

每个子元素的left，top初始值不一样

操控批量元素：

父元素流式布局flex，子元素相对定位，每个子元素相对自身的初始位置，每个子元素的left，top初始值都是0

*/

.f1,.f2{

/*子绝父相*/

/*流式布局*/

display: flex;

/*每个子元素均匀分布*/

justify-content: space-around;

}

.f1>img{

width: 200px;

height: 300px;

position: relative;

}

.f2{

margin-top: 130px;

}

.f2>div{

width: 200px;

height: 300px;

border: 1px solid rebeccapurple;

text-align: center;

/*行高与元素高度一致，垂直居中*/

line-height: 300px;

}

</style>

</head>

<body>

<div class="f1">

<img src="../img/曹操.jpg" οnclick="move1(this,0)">

<img src="../img/貂蝉.webp" οnclick="move1(this,1)">

<img src="../img/关羽.webp" οnclick="move1(this,2)">

<img src="../img/刘备.jpg" οnclick="move1(this,3)">

<img src="../img/刘协.webp" οnclick="move1(this,4)">

<img src="../img/孙权.webp" οnclick="move1(this,5)">

</div>

<div class="f2">

<div>刘协</div>

<div>曹操</div>

<div>刘备</div>

<div>孙权</div>

<div>关羽</div>

<div>貂蝉</div>

</div>

</body>

<script>

//定义一个坐标对象，记录当前操作的位置

let pos={x:0,y:0}

//定义一个数组存放六个对象，每个记录独立的坐标

let arr=[{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0},{x:0,y:0}]

function move1(img,i){

//pos表示当前操作的对象

pos=arr[i]

document.οnkeydοwn=function(e){

switch(e.keyCode){

case 38://上

pos.y-=10

img.style.top=pos.y+'px'78

break;

case 39://右

pos.x+=10

img.style.left=pos.x+'px'

break;

case 40://下

pos.y+=10

img.style.top=pos.y+'px'

break;

case 37://左

pos.x-=10

img.style.left=pos.x+'px'

break;

}

}

}

</script>

</html>