目录
猜数字
1、生成1-100的数字
2、让用户输入一个数字
3、根据输入的数字的大小给出提示（高，低，猜对了）
<script>
//1.生成随机数
let toGuess=parseInt(100*(Math.random()))+1;
console.log(toGuess);
</script>在JavaScript中生成随机数使用的Math.random()是[0,1)之间的数（小数），所以为了生成1-100，我们需要用100*Math.random(),就变成了[0,100)，然后使用parseInt使之变为整数，最后再加1，就是[1,100]。
完整代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字</title>
</head>
<body>
<div>请输入要猜的数字</div>
<input type="text">
<button>提交</button>
<div class="result"></div>
<script>
//1.生成随机数
let toGuess=parseInt(100*(Math.random()))+1;
//console.log(toGuess);
//2.进行数字的操作
let button=document.querySelector('button');
let input=document.querySelector('input');
let resultDiv=document.querySelector('.result');
button.onclick=function(){
//3.取出输入框内容
//用户啥也没有输入
if(input.value==''){
return;
}
//用户输入数字
//4.比较大小
let inputNum=parseInt(input.value);
if(inputNum<toGuess){
//低
resultDiv.innerHTML='猜低了';
}else if(inputNum>toGuess){
//高
resultDiv.innerHTML='猜高了';
}else{
//猜对了
resultDiv.innerHTML='猜对了';
}
}
</script>
</body>
</html> 
表白墙
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>表白墙</title>
</head>
<style>
/* 通配符选择器，选择界面所有元素 */
*{
/* 消除浏览器自带的格式影响 */
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container{
width: 600px;
margin: 20px auto;
}
h1{
text-align: center;
}
p{
text-align:center;
color: #666;
margin: 20px;
}
.row{
/*弹性布局*/
display: flex;
height: 40px;
/* 水平方向居中 */
justify-content: center;
/* 垂直方向居中 */
align-items: center;
}
.row span{
width: 88px;
}
.row input{
width: 200px;
height: 30px;
}
.row button{
width: 288px;
height: 30px;
color:white;
background-color: orange;
/* 去除黑色边框 */
border: none;
/* 加一个圆角矩形 */
border-radius: 5px;
}
.row button:active{
background-color: #666;
}
</style>
<body>
<div class="container">
<h1>表白墙</h1>
<p>输入内容后点击提交按钮，信息会显示在下方表格</p>
<div class="row">
<span>谁：</span>
<input type="text">
</div>
<div class="row">
<span>对谁：</span>
<input type="text">
</div>
<div class="row">
<span>说：</span>
<input type="text">
</div>
<div class="row">
<button id="submit">提交</button>
</div>
<div class="row">
<button id="revert">撤销</button>
</div>
</div>
<script>
//实现提交,点击提交，输入的内容提交到页面显示
//点击时获取输入框内容，创建新的div，把内容构造到div中
let containerDiv=document.querySelector('.container');
let button=document.querySelector('#submit');
let inputs=document.querySelectorAll('input');
button.onclick=function(){
//1.获取输入框内容
let from=inputs[0].value;
let to =inputs[1].value;
let msg=inputs[2].value;
if(from==''||to==''|| msg==''){
return;
}
//2.构造div
let rowDiv=document.createElement('div');
rowDiv.className='row message';
rowDiv.innerHTML=from+'对'+to+'说'+msg;
containerDiv.appendChild(rowDiv);
//3.清空之前的输入框内容
for(let input of inputs){
input.value='';
}
}
let revertButton=document.querySelector('#revert');
revertButton.onclick=function(){
//删除最后一条消息
//选中所有的row，找出最后一个row，然后进行删除
let rows=document.querySelectorAll('.message');
if(rows==null||rows.length==0){
return;
}
containerDiv.removeChild(rows[rows.length-1]);
}
</script>
</body>
</html>
待办事项
创建页面布局
<div class="nav">
<input type="text">
<button>新建任务</button>
</div>
<div class="container">
<div class="todo">
<h3>未完成</h3>
<div class="row">
<input type="checkbox">
<span>吃饭</span>
<button>删除</button>
</div>
</div>
<div class="done">
<h3>已完成</h3>
</div>
</div>实现页面样式
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 800px;
margin: 0 auto;
display: flex;
}
.todo,
.done {
width: 50%;
height: 100%;
}
.container h3 {
height: 50px;
text-align: center;
line-height: 50px;
background-color: #333;
color: #fff;
}
.nav {
width: 800px;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
}
.nav input {
width: 600px;
height: 50px;
}
.nav button {
width: 200px;
height: 50px;
border: none;
background-color: orange;
color: #fff;
}
.row {
height: 50px;
display: flex;
align-items: center;
}
.row input {
margin: 0 10px;
}
.row span {
width: 300px;
}
.row button {
width: 50px;
height: 40px;
}
</style>实现页面行为
<script>
// 实现新增任务
var addTaskButton = document.querySelector('.nav button');
addTaskButton.onclick = function () {
// 1. 获取到任务内容的输入框
var input = document.querySelector('.nav input');
// 2. 获取到输入框内容
var taskContent = input.value;
// 3. 根据内容新建一个元素节点
var row = document.createElement('div');
row.className = 'row';
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
var span = document.createElement('span');
span.innerHTML = taskContent;
var button = document.createElement('button');
button.innerHTML = '删除';
row.appendChild(checkbox);
row.appendChild(span);
row.appendChild(button);
// 4. 把新节点插入到 todo 中
var todo = document.querySelector('.todo');
todo.appendChild(row);
}
// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
// 上方的部分不变...
// 5. 给 checkbox 注册点击事件
checkbox.onclick = function () {
//
var row = this.parentNode;
// 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数
if (this.checked) {
var target = document.querySelector('.done');
} else {
var target = document.querySelector('.todo');
}
target.appendChild(row);
}
}
// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
// 上方的部分不变...
// 6. 给删除按钮注册点击事件
button.onclick = function () {
var row = this.parentNode;
var grandParent = row.parentNode;
grandParent.removeChild(row);
}
}
</script>完整代码展示：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>待办事项</title>
</head>
<body>
<div class="nav">
<input type="text">
<button>新建任务</button>
</div>
<div class="container">
<div class="todo">
<h3>未完成</h3>
<div class="row">
<input type="checkbox">
<span>吃饭</span>
<button>删除</button>
</div>
</div>
<div class="done">
<h3>已完成</h3>
</div>
</div>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
width: 800px;
margin: 0 auto;
display: flex;
}
.todo,
.done {
width: 50%;
height: 100%;
}
.container h3 {
height: 50px;
text-align: center;
line-height: 50px;
background-color: #333;
color: #fff;
}
.nav {
width: 800px;
height: 100px;
margin: 0 auto;
display: flex;
align-items: center;
}
.nav input {
width: 600px;
height: 50px;
}
.nav button {
width: 200px;
height: 50px;
border: none;
background-color: orange;
color: #fff;
}
.row {
height: 50px;
display: flex;
align-items: center;
}
.row input {
margin: 0 10px;
}
.row span {
width: 300px;
}
.row button {
width: 50px;
height: 40px;
}
</style>
<script>
// 实现新增任务
var addTaskButton = document.querySelector('.nav button');
addTaskButton.onclick = function () {
// 1. 获取到任务内容的输入框
var input = document.querySelector('.nav input');
// 2. 获取到输入框内容
var taskContent = input.value;
// 3. 根据内容新建一个元素节点
var row = document.createElement('div');
row.className = 'row';
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
var span = document.createElement('span');
span.innerHTML = taskContent;
var button = document.createElement('button');
button.innerHTML = '删除';
row.appendChild(checkbox);
row.appendChild(span);
row.appendChild(button);
// 4. 把新节点插入到 todo 中
var todo = document.querySelector('.todo');
todo.appendChild(row);
}
// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
// 上方的部分不变...
// 5. 给 checkbox 注册点击事件
checkbox.onclick = function () {
//
var row = this.parentNode;
// 注意! 是先触发 checked 为 true, 然后再调用 onclick 函数
if (this.checked) {
var target = document.querySelector('.done');
} else {
var target = document.querySelector('.todo');
}
target.appendChild(row);
}
}
// 修改 addTaskButton.onclick
addTaskButton.onclick = function () {
// 上方的部分不变...
// 6. 给删除按钮注册点击事件
button.onclick = function () {
var row = this.parentNode;
var grandParent = row.parentNode;
grandParent.removeChild(row);
}
}
</script>
</body>
</html>