教你用html制作一个最简单的真心话大冒险,惊艳众人。
首先在你的桌面新建一个空白文件夹,
点击新建文档
输入代码(直接粘贴下面的代码)
点击重命名
修改拓展,将txt改为html
点击确定
图标会更新成浏览器的形式:
点击就可以了
恭喜你成功了!!!!
加油加油
你已经会编写一给html格式的大冒险了。
代码:
<!DOCTYPE html>
<html>
<head>
<title>真心话大冒险</title>
<style>
body {
background-color: pink;
font-family: Arial, sans-serif;
text-align: center;
padding-top: 100px;
}
h1 {
color: #333333;
}
.container {
display: flex;
justify-content: center;
margin-top: 30px;
}
button {
background-color: #333333;
color: #ffffff;
border: none;
border-radius: 5px;
padding: 10px 20px;
font-size: 16px;
font-weight: bold;
margin: 0 10px;
cursor: pointer;
}
#question {
margin-top: 30px;
font-size: 20px;
color: #333333;
}
#btn-continue {
display: none;
margin-top: 20px;
}
</style>
</head>
<body>
<h1>真心话大冒险</h1>
<div class="container">
<button onclick="playTruthOrDare('truth')">真心话</button>
<button onclick="playTruthOrDare('dare')">大冒险</button>
</div>
<p id="question"></p>
<button id="btn-continue" onclick="continueGame()">继续</button>
<script>
var truthQuestions = [
"说出你对于算法的了解?",
"你目前都知道那些算法?",
"你喜欢计算机吗?",
"你对了机器学习的了解有多少?",
"你都知道那些算法的应用案例?",
"最新的高科技算法应用你都知道有哪些?",
"你知道算法可以干什么吗?",
"如何实现算法?"
];
var dareActions = [
"写出你感觉最骄傲的十件事",
"上大学你最幸运的十件事",
"写出你获得过的十个荣誉",
"随机奖励你一个算法问题",
"将大数据时代这本书看完",
"用编程解决判断是否事闰年问题",
"说出你最喜欢做的十件事"
];
var currentIndex = 0;
function playTruthOrDare(type) {
var questionElement = document.getElementById('question');
var continueButton = document.getElementById('btn-continue');
if (type === 'truth') {
var truthIndex = Math.floor(Math.random() * truthQuestions.length);
questionElement.innerText = "问题:" + truthQuestions[truthIndex];
} else if (type === 'dare') {
var dareIndex = Math.floor(Math.random() * dareActions.length);
questionElement.innerText = "任务:" + dareActions[dareIndex];
}
currentIndex++;
questionElement.style.display = 'block';
continueButton.style.display = 'inline-block';
}
function continueGame() {
var questionElement = document.getElementById('question');
var continueButton = document.getElementById('btn-continue');
if (currentIndex < truthQuestions.length) {
questionElement.innerText = "";
questionElement.style.display = 'none';
continueButton.style.display = 'none';
} else {
questionElement.innerText = "游戏结束。再见!";
continueButton.style.display = 'none';
}
}
</script>
</body>
</html>