web开发基础笔录（1）-html5&js基础
- 2023-10-17 02:13:55
- 阅读：40次
hello,world
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello,world</title>
</head>
<body>
<div>
<p>你好，世界</p>
</div>
</body>
</html>
打招呼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello,world</title>
</head>
<body>
<div>
<p>你好，我是waterperl！</p>
<p>
<label>如何称呼您?<br>您叫：<input type="text" id="username" /> </label>
<button onclick="showWelcome()">很高兴认识你</button>
</p>
</div>
<script type="text/javascript">
function showWelcome(){
let username = document.getElementById("username").value;
alert("你好，"+username);
}
</script>
</body>
</html>
当前日期
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello,world</title>
</head>
<body>
<hgroup>
<p>你好，我是waterperl！</p>
<p id="nowdate"></p>
</hgroup>
<script type="text/javascript">
let nowdate =document.getElementById('nowdate');
nowdate.innerHTML =Date();
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello,world</title>
</head>
<body>
<hgroup>
<p>你好，我是waterperl！</p>
<p id="nowdate"></p>
</hgroup>
<script type="text/javascript">
let nowdate =document.getElementById('nowdate');
let showDate=new Date(Date());
const options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' };
nowdate.innerHTML = "toLocaleString:"+showDate.toLocaleString({ timeZone: 'UTC' });
nowdate.innerHTML += "<br>toString:"+showDate.toString();
nowdate.innerHTML += "<br>toLocaleDateString:"+showDate.toLocaleDateString(undefined, options);
nowdate.innerHTML += "<br>toLocaleTimeString:"+showDate.toLocaleTimeString(undefined, options);
nowdate.innerHTML += "<br>toTimeString():"+showDate.toTimeString();
nowdate.innerHTML += "<br>toUTCString():"+showDate.toUTCString();
nowdate.innerHTML += "<br>toISOtring():"+showDate.toISOString();
</script>
</body>
</html>
toISOString() 方法返回一个 ISO（ISO 8601 Extended Format）格式的字符串： YYYY-MM-DDTHH:mm:ss.sssZ。时区总是 UTC（协调世界时），加一个后缀“Z”标识。
列表
- 我的愿望
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>你好，列表！</title>
</head>
<body>
<p>
<label>我的愿望:<input type="text" name="myDream" id="myDream" required></label>
<button id="newDreamBtn">是的，加到我的愿望列表中</button>
</p>
<hgroup >
<ul id="dreamList">
</ul>
</hgroup>
<script type="text/javascript">
function addDream(myDream){
let list = document.getElementById("dreamList");
let newDreamNode=document.createElement("li");
newDreamNode.innerHTML=myDream;
list.appendChild(newDreamNode);
}
function newDreamNode(){
let myDreamStr=document.getElementById("myDream").value;
addDream(myDreamStr);
}
let addDreamBtn=document.getElementById("newDreamBtn");
addDreamBtn.addEventListener("click",newDreamNode);
</script>
</body>
</html>
21点游戏
- 玩家抽数
var playerSource=0;
var playerNums=[];
var computerSource=0;
let playerContinueBtn=document.getElementById("continueSelectBtn");
playerContinueBtn.addEventListener("click",playerContinue);
function playerContinue(){
let playerNum=parseInt(getSelectNum());
playerSource+=playerNum;
playerNums.push(playerNum);
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML+=`玩家抽数:${playerNum}，玩家当前点数:${playerSource}<br>玩家:`;
for (let playerNum of playerNums){
playerNS.innerHTML+=`${playerNum} `;
}
playerNS.innerHTML+="<br>";
}
function getSelectNum(){
return Math.floor(Math.random() * 13) + 1;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21点游戏</title>
</head>
<body>
<div id="playerGameArea" >
<label>玩家名字: <input type="text" name="playerName" id="playerName" ></label>
<p id="playerSelectResult"></p>
<button id="continueSelectBtn">继续抽牌</button>
<button id="cancelSelectBtn">放弃抽牌</button>
</div>
<div id="computerGame">
<output id="computerSelectResult">
</output>
</div>
<script type="text/javascript" src="learn2.js"></script>
</body>
</html>
- 电脑抽数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21点游戏</title>
</head>
<body>
<details id="playerGameArea" open="open">
<summary>玩家</summary>
<label>玩家名字: <input type="text" name="playerName" id="playerName" ></label>
<p><output id="playerSelectResult"></output><br></p>
</details>
<details id="computerGame" open="open">
<summary>电脑</summary>
<output id="computerSelectResult">
</output>
</details>
<button id="continueSelectBtn">继续抽牌</button>
<button id="cancelSelectBtn">放弃抽牌</button>
<script type="text/javascript" src="learn2.js"></script>
</body>
</html>
var playerSource=0;
var playerNums=[];
var computerNums=[];
var computerSource=0;
let playerContinueBtn=document.getElementById("continueSelectBtn");
playerContinueBtn.addEventListener("click",playerContinue);
function playerContinue(){
let playerNum=parseInt(getSelectNum());
playerSource+=playerNum;
playerNums.push(playerNum);
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML+=`玩家抽数:${playerNum}，玩家当前点数:${playerSource}<br>玩家:`;
for (let playerNum of playerNums){
playerNS.innerHTML+=`${playerNum} `;
}
playerNS.innerHTML+="<br>";
computerThink();
}
function computerContinue(){
let computerNum=parseInt(getSelectNum());
computerSource+=computerNum;
computerNums.push(computerNum);
let computerNS=document.getElementById("computerSelectResult");
computerNS.innerHTML+=`电脑抽数:${computerNum}，电脑当前点数:${computerSource}<br>电脑:`;
for (let computerNum of computerNums){
computerNS.innerHTML+=`${computerNum} `;
}
computerNS.innerHTML+="<br>";
}
function getSelectNum(){
return Math.floor(Math.random() * 13) + 1;
}
function computerThink(){
computerContinue();
}
- 抽数（牌）
var playerSource=0;
var playerNums=[];
var computerNums=[];
var computerSource=0;
var computerLosed=false;
var playerLosed=false;
var playerGameCancel=false;
var computerGameCancel=false;
var gameOver=false;
var isNewGame=true;
let playerContinueBtn=document.getElementById("continueSelectBtn");
playerContinueBtn.addEventListener("click",playerContinue);
let playerCancelBtn=document.getElementById("cancelSelectBtn");
playerCancelBtn.addEventListener("click",playerCancel);
function gameContinue(){
do {
computerThink();
gameIsEnd();
}while((playerGameCancel||playerLosed) && (!(computerGameCancel||computerLosed)) && (!gameOver));
if (gameOver){
let gameInfo=document.getElementById("gameInfo");
gameInfo.innerHTML+=`玩家点数：${playerSource},电脑点数：${computerSource}<br>新游戏重新开始!<br>`;
playerContinueBtn.disabled=false;
playerSource=0;
computerSource=0;
gameOver=false;
playerCancel=false;
computerCancel=false;
computerLosed=false;
playerLosed=false;
isNewGame=true;
}
}
function playerContinue(){
if (isNewGame){
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML="";
let computerNS=document.getElementById("computerSelectResult");
computerNS.innerHTML="";
playerNums=[];
computerNums=[];
isNewGame=false;
}
let playerNum=parseInt(getSelectNum());
playerSource+=playerNum;
playerNums.push(playerNum);
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML+=`玩家抽数:${playerNum}，玩家当前点数:${playerSource}<br>玩家:`;
for (let playerNum of playerNums){
playerNS.innerHTML+=`${playerNum} `;
}
playerNS.innerHTML+="<br>";
gameContinue();
}
function playerCancel(){
playerGameCancel=true;
}
function computerCancel(){
computerGameCancel=true;
}
function gameIsEnd(){
let playerContinueBtn=document.getElementById("continueSelectBtn");
let gameInfo=document.getElementById("gameInfo");
if (playerSource>21){
playerContinueBtn.disabled=true;
playerLose();
}
else{
playerContinueBtn.disabled=false;
}
if (computerSource>21){
computerLose();
}
if (playerLosed && computerLosed ){
gameInfo.innerHTML+=`电脑和玩家输了!游戏结束<br>`;
gameOver=true;
}
else if (playerLosed && computerGameCancel){
gameInfo.innerHTML+=`玩家输了!游戏结束<br>`;
gameOver=true;
}
else if (computerLosed && playerGameCancel){
gameInfo.innerHTML+=`电脑输了!游戏结束<br>`;
gameOver=true;
}
else if (!(playerLosed && computerLosed ) && (playerGameCancel&&computerGameCancel))
{
if((computerSource===21 && playerSource===21)||(computerSource==playerSource)){
gameInfo.innerHTML+=`电脑和玩家平手!游戏结束<br>`;
gameOver=true;
}
else if (computerSource>playerSource){
gameInfo.innerHTML+=`玩家输了!游戏结束<br>`;
gameOver=true;
}
else if (computerSource<playerSource){
gameInfo.innerHTML+=`电脑输了!游戏结束<br>`;
gameOver=true;
}
}
}
function computerContinue(){
let computerNum=parseInt(getSelectNum());
computerSource+=computerNum;
computerNums.push(computerNum);
let computerNS=document.getElementById("computerSelectResult");
computerNS.innerHTML+=`电脑抽数:${computerNum}，电脑当前点数:${computerSource}<br>电脑:`;
for (let computerNum of computerNums){
computerNS.innerHTML+=`${computerNum} `;
}
computerNS.innerHTML+="<br>";
}
function getSelectNum(){
return Math.floor(Math.random() * 13) + 1;
}
function computerThink(){
computerContinue();
}
function playerLose(){
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML+=`玩家输了<br>`;
playerLosed=true;
}
function computerLose(){
let computerNS=document.getElementById("computerSelectResult");
computerNS.innerHTML+=`电脑输了<br>`;
computerLosed=true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21点游戏</title>
</head>
<body>
<details id="playerGameArea" open="open">
<summary>玩家</summary>
<label>玩家名字: <input type="text" name="playerName" id="playerName" ></label>
<p><output id="playerSelectResult"></output><br></p>
</details>
<details id="computerGame" open="open">
<summary>电脑</summary>
<output id="computerSelectResult" >
</output>
</details>
<button id="continueSelectBtn">继续抽牌</button>
<button id="cancelSelectBtn">放弃抽牌</button>
<div >
<p id ="gameInfo"></p>
</div>
<script type="text/javascript" src="learn2.js"></script>
</body>
</html>
- 所有游戏逻辑
var playerSource=0;
var playerNums=[];
var computerNums=[];
var computerSource=0;
var computerLosed=false;
var playerLosed=false;
var playerGameCancel=false;
var computerGameCancel=false;
var gameOver=false;
var isNewGame=true;
let playerContinueBtn=document.getElementById("continueSelectBtn");
playerContinueBtn.addEventListener("click",playerContinue);
let playerCancelBtn=document.getElementById("cancelSelectBtn");
playerCancelBtn.addEventListener("click",playerGoCancel);
function gameContinue(){
do {
computerThink();
gameIsEnd();
}while((playerGameCancel||playerLosed) && (!(computerGameCancel||computerLosed)) && (!gameOver));
}
function playerContinue(){
if (isNewGame){
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML="";
let computerNS=document.getElementById("computerSelectResult");
computerNS.innerHTML="";
playerNums=[];
computerNums=[];
isNewGame=false;
}
let playerNum=parseInt(getSelectNum());
playerSource+=playerNum;
playerNums.push(playerNum);
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML+=`玩家抽数:${playerNum}，玩家当前点数:${playerSource}<br>玩家:`;
for (let playerNum of playerNums){
playerNS.innerHTML+=`${playerNum} `;
}
playerNS.innerHTML+="<br>";
gameContinue();
}
function playerGoCancel(){
playerGameCancel=true;
let playerContinueBtn=document.getElementById("continueSelectBtn");
playerContinueBtn.disabled=true;
let playerCancelBtn=document.getElementById("cancelSelectBtn");
playerCancelBtn.disabled=true;
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML+="玩家放弃抽牌！<br>";
gameContinue();
}
function computerGoCancel(){
computerGameCancel=true;
let computerNS=document.getElementById("computerSelectResult");
computerNS.innerHTML+="电脑放弃抽牌！<br>";
}
function gameIsEnd(){
let playerContinueBtn=document.getElementById("continueSelectBtn");
let playerCancelBtn=document.getElementById("cancelSelectBtn");
if (playerSource>21){
playerContinueBtn.disabled=true;
playerCancelBtn.disabled=true;
playerLose();
}
else{
playerContinueBtn.disabled=false;
}
if (computerSource>21){
computerLose();
}
if (playerLosed && computerLosed ){
gameInfo.innerHTML+=`电脑和玩家输了!游戏结束<br>`;
gameOver=true;
}
else if (playerLosed && computerGameCancel){
gameInfo.innerHTML+=`玩家输了!游戏结束<br>`;
gameOver=true;
}
else if (computerLosed && playerGameCancel){
gameInfo.innerHTML+=`电脑输了!游戏结束<br>`;
gameOver=true;
}
else if (!(playerLosed && computerLosed ) && (playerGameCancel&&computerGameCancel))
{
if((computerSource===21 && playerSource===21)||(computerSource===playerSource)){
gameInfo.innerHTML+=`电脑和玩家平手!游戏结束<br>`;
gameOver=true;
}
else if (computerSource>playerSource){
gameInfo.innerHTML+=`玩家输了!游戏结束<br>`;
gameOver=true;
}
else if (computerSource<playerSource){
gameInfo.innerHTML+=`电脑输了!游戏结束<br>`;
gameOver=true;
}
}
if (gameOver){
let gameInfo=document.getElementById("gameInfo");
gameInfo.innerHTML+=`玩家点数：${playerSource},电脑点数：${computerSource}<br>新游戏重新开始!<br>`;
playerSource=0;
computerSource=0;
gameOver=false;
playerGameCancel=false;
computerGameCancel=false;
computerLosed=false;
playerLosed=false;
isNewGame=true;
playerContinueBtn.disabled=false;
playerCancelBtn.disabled=false;
}
}
function computerContinue(){
let computerNum=parseInt(getSelectNum());
computerSource+=computerNum;
computerNums.push(computerNum);
let computerNS=document.getElementById("computerSelectResult");
computerNS.innerHTML+=`电脑抽数:${computerNum}，电脑当前点数:${computerSource}<br>电脑:`;
for (let computerNum of computerNums){
computerNS.innerHTML+=`${computerNum} `;
}
computerNS.innerHTML+="<br>";
}
function getSelectNum(){
return Math.floor(Math.random() * 13) + 1;
}
function computerThink(){
if (computerGameCancel||computerLosed){
return;
}
if (computerSource>17){
computerGoCancel();
}
else{
computerContinue();
}
}
function playerLose(){
let playerNS=document.getElementById("playerSelectResult");
playerNS.innerHTML+=`玩家输了<br>`;
playerLosed=true;
}
function computerLose(){
let computerNS=document.getElementById("computerSelectResult");
computerNS.innerHTML+=`电脑输了<br>`;
computerLosed=true;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>21点游戏</title>
</head>
<body>
<details id="playerGameArea" open="open">
<summary>玩家</summary>
<label>玩家名字: <input type="text" name="playerName" id="playerName" ></label>
<p><output id="playerSelectResult"></output><br></p>
</details>
<details id="computerGame" open="open">
<summary>电脑</summary>
<output id="computerSelectResult" >
</output>
</details>
<button id="continueSelectBtn">继续抽牌</button>
<button id="cancelSelectBtn">放弃抽牌</button>
<div >
<p id ="gameInfo"></p>
</div>
<script type="text/javascript" src="learn2.js"></script>
</body>
</html>
