前端:HTML/CSS/JavaScript基础知识
HTML
HTML基础
什么是HTML
HTML(Hyper Text Markup Language),超文本标记语言.
超文本
比如下列代码:
<h1>我是⼀级标题</h1>
<h2>我是⼆级标题</h2>
<h3>我是三级标题</h3>经过浏览器解析:
------------------------------------------------------------------------------------------------------------------------------
认识HTML标签
HTML代码是由"标签"来构成的;
<h3>我是三级标题</h3><h3 id="myId">我是三级标题</h3>------------------------------------------------------------------------------------------------------------------------------
HTML文件的基本结构
<html>
<head>
<title>第⼀个⻚⾯</title>
</head>
<body>
hello world
</body>
</html>html 标签是整个 html 文件的根标签(最顶层标签)
head 标签中写页面的属性.
body 标签中写的是页面上显示的内容
title 标签中写的是页面的标题.
标签的层次结构
(1)父子关系;
(2)兄弟关系;
<html>
<head>
<title>第⼀个⻚⾯</title>
</head>
<body>
hello world
</body>
</html>
HTML常见标签
1.标题标签 h1 - h6
数字越大,字体越小:
<h1>hello</h1>
<h2>hello</h2>
<h3>hello</h3>
<h4>hello</h4>
<h5>hello</h5>
<h6>hello</h6>------------------------------------------------------------------------------------------------------------------------------
2.段落标签 p
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>
<p>这是⼀个段落</p>注意:
p 标签描述的段落, 前面没有缩进. (未来 CSS 会学)
自动根据浏览器宽度来决定排版.
html 内容首尾处的换行, 空格均无效.
在 html 中文字之间输入的多个空格只相当于⼀个空格.
html 中直接输入换行不会真的换行, 而是相当于⼀个空格.
" ":半角的不断行的空白格;
" ":半角的空格;
" ":全角的空格;
------------------------------------------------------------------------------------------------------------------------------
3.换行标签 br
br 是 break 的缩写. 表示换行.
br 是⼀个单标签(不需要结束标签)
br 标签不像 p 标签那样带有⼀个很大的空隙.
<br/> 是规范写法. 不建议写成 <br>;
这是⼀个br标签<br/>
这是⼀个br标签<br/>
这是⼀个br标签<br/>效果:
------------------------------------------------------------------------------------------------------------------------------
4.图片标签:img
<img src="rose.jpg">此时要把 rose.jpg 这个图片文件放到和 html 中的同级目录中.
img 标签的其他属性:
width/height: 控制宽度高度. 高度和宽度⼀般改⼀个就行, 另外⼀个会等比例缩放. 否则就会图片失衡.(单位:px,表示像素)
border: 边框, 参数是宽度的像素. 但是⼀般使用 CSS 来设定
注意:
1. 属性可以有多个, 不能写到标签之前.
2. 属性之间用空格分割, 可以是多个空格, 也可以是换行.
3. 属性之间不分先后顺序.
4. 属性使用 "键值对" 的格式来表示.
------------------------------------------------------------------------------------------------------------------------------
5.超链接: a
href: 必须具备, 表示点击后会跳转到哪个页面.
target: 打开方式. 默认是 _self. 如果是 _blank 则用新的标签页打开
<a href="http://www.baidu.com">百度</a>链接的几种形式:
外部链接: href 引用其他网站的地址
<a href="http://www.baidu.com">百度</a>内部链接: 网站内部页面之间的链接. 写相对路径即可
<!-- 1.html -->
我是 1.html
<a href="2.html">点我跳转到 2.html</a>
<!-- 2.html -->
我是 2.html
<a href="1.html">点我跳转到 1.html</a>
空链接: 使用 # 在 href 中占位
<a href="#">空链接</a>
------------------------------------------------------------------------------------------------------------------------------
表格标签
table 标签: 表示整个表格
tr: 表示表格的一行
td: 表示一个单元格
thead: 表格的头部区域
tbody: 表格的主体区域
table 包含 tr, tr 包含 td;
<table border="1px" cellspacing="0" width="300" cellpading="20">
<tr>
<td colspan="2" align="center">aaa</td>
<!-- <td>bbb</td> -->
</tr>
<tr>
<td rowspan="2" align="center">ccc</td>
<td align="center">ddd</td>
</tr>
<tr>
<!-- <td>eee</td> -->
<td align="center">fff</td>
</tr>
</table>效果:
------------------------------------------------------------------------------------------------------------------------------
表单标签
表单是让用户输入信息的重要途径.
分成两个部分:
表单域: 包含表单元素的区域. 重点是 form 标签.
表单控件: 输入框, 提交按钮等. 重点是 input 标签
------------------------------------------------------------------------------------------------------------------------------
form标签
关于 form 需要结合后端代码来进⼀步理解. 后面再详细研究.
------------------------------------------------------------------------------------------------------------------------------
input标签
type(必须有), 取值种类很多, button, checkbox, text, file, image, password, radio 等.
name: 给 input 起了个名字. 尤其是对于 单选按钮, 具有相同的 name 才能多选⼀.
value: input 中的默认值.
checked: 默认被选中. (用于单选按钮和多选按钮)
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
文本框<input type="text" name="" id=""><br/>
密码<input type="password" name="" id=""><br/>
文件<input type="file" name="" id=""><br/>
邮箱<input type="email" name="" id=""><br/>
单选按钮<input type="radio" name="gender" id="">男
<input type="radio" name="gender" id="">女
<input type="radio" name="gender" id="" cheked="checked">不选择<br/>
复选框<input type="checkbox" name="" id="">篮球
<input type="checkbox" name="" id="">足球
<input type="checkbox" name="" id="">网球<br/>
普通按钮<input type="button" value="我是一个按钮,可以点击"><br/>
提交按钮<input type="submit" value="提交">
</body>
</html>代码效果:
------------------------------------------------------------------------------------------------------------------------------
select标签
下拉菜单;
option 中定义 selected="selected" 表示默认选中;
下拉菜单<select >
<option value="">北京</option>
<option value="">上海</option>
<option value="">广东</option>
<option value="" selected="selected">西安</option>
</select><br/>
------------------------------------------------------------------------------------------------------------------------------
textarea标签
文本域中的内容, 就是默认内容, 注意, 空格也会有影响.
rows 和 cols 也都不会直接使用, 都是用 css 来改的.
文本域
<textarea rows="5" cols="20"></textarea>
------------------------------------------------------------------------------------------------------------------------------
无语义标签: div&span
div 标签, division 的缩写, 含义是 分割
span 标签, 含义是跨度
就是两个盒子. 用于网页布局
div 是独占一行的, 是⼀个大盒子.
span 不独占一行, 是⼀个小盒子.
<div style="height: 200px; border: 1px solid black;">我是一个div</div>
<div>我是一个div</div>
<div>我是一个div</div>
<span>我是一个span</span>
<span>我是一个span</span>
<span>我是一个span</span>效果:
综合练习:简易登录界面
代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>用户注册</title>
</head>
<body>
<h1>用户注册</h1>
<table>
<tr>
<td>用户名</td>
<td><input type="text" name="" id="" placeholder="请输入用户名"></td>
</tr>
<tr>
<td>手机号</td>
<td><input type="text" placeholder="请输入手机号"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="password" name="" id="" placeholder="请输入密码"></td>
</tr>
</table>
<div>
<input type="submit" value="注册">
<span>已有帐号?</span>
<a href="#">登录</a>
</div>
</body>
</html>------------------------------------------------------------------------------------------------------------------------------
CSS
CSS介绍
CSS(Cascading Style Sheet)，层叠样式表, 用于控制页面的样式.
CSS 能够对网页中元素位置的排版进行像素级精确控制, 实现美化页面的效果. 能够做到页面的样式和结构分离.
------------------------------------------------------------------------------------------------------------------------------
基本语法规范
选择器 + {⼀条/N条声明}
选择器决定针对谁修改 (找谁)
声明决定修改啥. (干啥)
声明的属性是键值对. 使用";"区分键值对, 使用":"区分键和值;
页面上的所有内容都称为"元素";
<style>
p {
/*设置字体颜色*/
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<p>hello</p>注意:
CSS 要写到 style 标签中(后面还会介绍其他写法)
style 标签可以放到页面任意位置. ⼀般放到 head 标签内.
CSS 使⽤ /* */ 作为注释. (使⽤ ctrl + / 快速切换) .
------------------------------------------------------------------------------------------------------------------------------
引入方式
CSS存在三种引入方式:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
p {
/*设置字体颜色*/
color: red;
/* 设置字体大小 */
font-size: 30px;
}
</style>
<link rel="stylesheet" href="css.css">
</head>
<body>
<!-- 行内样式 -->
<span style="color:green; font-size: 30px;">hello</span>
<!-- 内部样式 -->
<p>hello</p>
<p style="color:blueviolet;">hello</p>
<!-- 外部样式 -->
<m>hello</m>
</body>
</html>m {
/*设置字体颜色*/
color: yellow;
/* 设置字体大小 */
font-size: 30px;
}
效果:
注意:
内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常用.
行内样式, 只适合于写简单样式. 只针对某个标签生效. 缺点是不能写太复杂的样式.
外部样式，html和css实现了完全的分离, 企业开发常用方式
------------------------------------------------------------------------------------------------------------------------------
规范
样式大小写
虽然 CSS 不区分大小写, 我们开发时统⼀使用小写字母;
空格规范
冒号后⾯带空格
选择器和 "{" 之间也有⼀个空格
------------------------------------------------------------------------------------------------------------------------------
CSS选择器
CSS 选择器的主要功能就是选中页面指定的标签元素. 选中了元素, 才可以设置元素的属性;
分为五种:
1. 标签选择器
p {
/*设置字体颜色*/
color: red;
/* 设置字体大小 */
font-size: 30px;
}
span {
color: aqua;
}2. class选择器
.red {
color: red;
}
.green {
color: green;
}
.blue {
color: blue;
}3. id选择器
/* 选择id为submit的元素, 设置颜⾊为红⾊ */
#submit {
color: red;
}4. 通配符选择器
/* 设置⻚⾯所有元素, 颜⾊为红⾊*/
* {
color: red;
}5. 复合选择器
(1)空格表示后代
/*只设置 ul标签下的 li标签下的 a标签, 颜⾊为红⾊*/
ul li a {
color: blue;
}(2)没空格表示交集
p.red {
color: red;
}(3)逗号表示并集
.red,.green {
font-size: 40px;
}(4)">"表示相邻后代
ul>li>a {
color:aqua;
}1. 以上三个标签选择器 ul li a 中的任意, 都可以替换成类选择器, 或者id选择器, 可以是任意选
择器的组合, 也可以是任意数量选择器的组合;
2. 不⼀定是相邻的标签, 也可以是"孙子"标签;
3. 如果需要选择多种标签, 可以使用 "," 分割, 如 p, div { } 表示同时选中p标签和div标签.
逗号前后可以是以上任意选择器, 也可以是选择器的组合.
------------------------------------------------------------------------------------------------------------------------------
常用CSS
color
表示字体颜色
.text1{
color: red;
}颜色有如下几种表达方式:
英文单词,如red,blue
rgb代码的颜色 如rgb(255,0,0)
十六进制的颜色 如#ff00ff
------------------------------------------------------------------------------------------------------------------------------
font-size
表示字体大小
.text1{
font-size: 32px;
}px像素; em相对尺寸(如果字体大小为16px,1em=16px);
rem相对浏览器默认字体的大小; 30%也是相对大小;
------------------------------------------------------------------------------------------------------------------------------
border
边框
.text1{
border: 1px solid purple;
}
边框是⼀个复合属性, 可以同时设置多个样式, 不分前后顺序, 浏览器会根据设置的值自动判断
以上border属性的对应设置的维度分别为边框粗细, 边框样式, 边框颜色.
也可以拆开来设置
------------------------------------------------------------------------------------------------------------------------------
width/height
width: 设置宽度
height: 设置高度
只有块级元素可以设置宽高
块级元素是HTML标签的⼀种显⽰模式, 对应的还有⾏内元素
常见块级元素: h1-h6, p, div 等
常见行内元素: a span
块级元素独占⼀⾏, 可以设置宽⾼
行内元素不独占⼀⾏, 不能设置宽⾼
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>dome3</title>
<style>
div ,span{
/* border: 5px black solid; */
border-width: 1px;
border-color: blue;
border-style: solid;
width: 500px;
height: 200px;
/* border-left-color: purple; */
}
</style>
</head>
<body>
<div>hello</div>
<div>hello1</div>
<span>span</span>
<span>span1</span>
</body>
</html>效果:
改变显⽰模式
使⽤ display 属性可以修改元素的显⽰模式.
display: block 改成块级元素 [常⽤]
display: inline 改成⾏内元素 [很少⽤]
------------------------------------------------------------------------------------------------------------------------------
padding/margin(内边距/外边距)
padding也是⼀个复合样式, 可以对四个方向分开设置
padding-top
padding-bottom
padding-left
padding-right
margin也是⼀个复合样式, 可以给四个方向都加上外边距
margin-top
margin-bottom
margin-left
margin-right
div {
border: 1px black solid;
width: 500px;
height: 200px;
padding: 100px;
margin: 50px 100px 150px 200px;
/* 外边距取两个块级元素外边距的最大值 */
}
html {
padding: 100px;
} ------------------------------------------------------------------------------------------------------------------------------
JavaScript
引入方式
JavaScript也有三种引入方式:
1. 内部样式会出现大量的代码冗余, 不方便后期的维护，所以不常⽤. (课堂上为了方便讲解, 使用该方式)
2. ⾏内样式, 只适合于写简单样式. 只针对某个标签生效. 缺点是不能写太复杂的jS.
3. 外部样式，html和js实现了完全的分离, 企业开发常用方式.
------------------------------------------------------------------------------------------------------------------------------
基础语法
创建变量(变量定义/变量声明/变量初始化), JS声明变量有3种⽅式
注意事项:
1. JavaScript 是⼀⻔动态弱类型语⾔，变量可以存放不同类型的值(动态), ⽐如
var name = 'zhangsan';
var age = 20;随着程序的运⾏, 变量的类型可能会发⽣改变. (弱类型)
var a = 10;
a = "hehe";2. 变量名命名规则:
a. 组成字符可以是任何字⺟、数字、下划线（_）或美元符号（$）;
b. 数字不能开头;
c. 建议使⽤驼峰命名;
3. + 表⽰字符串拼接, 也就是把两个字符串⾸尾相接变成⼀个字符串.
4. \n 表⽰换⾏;
------------------------------------------------------------------------------------------------------------------------------
数据类型
虽然js是弱数据类型的语⾔，但是js中也存在数据类型，js中的数据类型分为 ：
原始类型 和 引⽤类型，具体有如下类型
------------------------------------------------------------------------------------------------------------------------------
运算符
------------------------------------------------------------------------------------------------------------------------------
JavaScript对象
数组
创建数组有两种⽅式
1. 使⽤ new 关键字创建
// Array 的 A 要⼤写
var arr = new Array();var arr = [];
var arr2 = [1, 2, 'haha', false]; // 数组中保存的内容称为 "元素"
注意: JS 的数组不要求元素是相同类型
数组操作
1. 读: 使⽤下标的⽅式访问数组元素(从 0 开始)
2. 增: 通过下标新增, 或者使⽤ push 进⾏追加元素
3. 改: 通过下标修改
4. 删: 使⽤ splice ⽅法删除元素
<script>
var arr = [1, 2, 'haha', false];
//读取数组
console.log(arr[0]); //1
//添加数组元素
arr[4] = "add"
console.log(arr[4]);//add
console.log(arr.length);//5, 获取数组的⻓度
//修改数组元素
arr[4] = "update"
console.log(arr[4]);//update
//删除数组元素
arr.splice(4,1);// 第⼀个参数表⽰从下标为4的位置开始删除. 第⼆个参数表⽰要删除的元
素个数是 1 个
console.log(arr[4]);//undefined 元素已经删除, 如果元素不存在, 结果为undefined
console.log(arr.length);//4, 获取数组的⻓度
<script>------------------------------------------------------------------------------------------------------------------------------
函数
语法格式:
// 创建函数/函数声明/函数定义
function 函数名(形参列表) {
函数体
return 返回值;
}
// 函数调⽤
函数名(实参列表) // 不考虑返回值
返回值 = 函数名(实参列表) // 考虑返回值关于参数个数
实参和形参之间的个数可以不匹配. 但是实际开发⼀般要求形参和实参个数要匹配
1. 如果实参个数⽐形参个数多, 则多出的参数不参与函数运算
2. 如果实参个数⽐形参个数少, 则此时多出来的形参值为 undefined
------------------------------------------------------------------------------------------------------------------------------
函数表达式
var add = function() {
var sum = 0;
for (var i = 0; i < arguments.length; i++) {
sum += arguments[i];
}
return sum;
}
console.log(add(10, 20)); // 30
console.log(add(1, 2, 3, 4)); // 10
console.log(typeof add);对象
在 JS 中, 字符串, 数值, 数组, 函数都是对象.
每个对象中包含若⼲的属性和⽅法.
属性: 事物的特征.
⽅法: 事物的⾏为.
JavaScript 的对象 和 Java 的对象概念上基本⼀致. 只是具体的语法表项形式差别较⼤.
1. 使用字面量创建对象 [常用]
使用"{}"创建对象.
var a = {}; // 创建了⼀个空的对象
var student = {
name: '蔡徐坤',
height: 175,
weight: 170,
sayHello: function() {
console.log("hello");
}
};使⽤ { } 创建对象
属性和⽅法使⽤键值对的形式来组织.
键值对之间使⽤ ","分割. 最后⼀个属性后⾯的 , 可有可无.
键和值之间使⽤ ":" 分割.
⽅法的值是⼀个匿名函数.
使⽤对象的属性和⽅法:
// 1. 使⽤ . 成员访问运算符来访问属性 `.` 可以理解成 "的"
console.log(student.name);
// 2. 使⽤ [ ] 访问属性, 此时属性需要加上引号
console.log(student['height']);
// 3. 调⽤⽅法, 别忘记加上 ()
student.sayHello();2. 使⽤ new Object 创建对象
var student = new Object(); // 和创建数组类似
student.name = "蔡徐坤";
student.height = 175;
student['weight'] = 170;
student.sayHello = function () {
console.log("hello");
}
console.log(student.name);
console.log(student['weight']);
student.sayHello();3. 使⽤ 构造函数 创建对象
function 构造函数名(形参) {
this.属性 = 值;
this.⽅法 = function...
}
var obj = new 构造函数名(实参);注意:
在构造函数内部使⽤ this 关键字来表⽰当前正在构建的对象.
构造函数的函数名⾸字⺟⼀般是⼤写的.
构造函数的函数名可以是名词.
构造函数不需要 return .
创建对象的时候必须使⽤ new 关键字.
------------------------------------------------------------------------------------------------------------------------------
JQuery
引入依赖
使⽤JQuery需要先引⼊对应的库
在使⽤jQuery CDN时，只需要在HTML⽂档中加⼊如下代码
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>其中，src属性指明了JQuery库所在的URL. 这个URL是CDN(内容分发⽹络)服务提供商为jQuery库提供的⼀个统⼀资源定位符
开发时, 建议把JQuery库下载到本地, 放在当前项⽬中. 引⼊外部地址, 会有外部地址不能访问的⻛险.
下载⽅式:
1. 通过浏览器访问上述连接
2. 右键 -> 另存为.... 保存到本地, 放在项⽬中即可
JQuery 语法
jQuery 语法是通过选取 HTML 元素, 并对选取的元素执⾏某些操作
$(selector).action()$() 是⼀个函数, 它是 jQuery 提供的⼀个全局函数, ⽤于选择和操作 HTML 元
selector 选择器, ⽤来"查询"和"查找" HTML 元素
action 操作, 执⾏对元素的操作
JQuery 的代码通常都写在 document ready 函数中.
document：整个⽂档对象, ⼀个⻚⾯就是⼀个⽂档对象, 使⽤document表⽰.
这是为了防⽌⽂档在完全加载（就绪）之前运⾏ jQuery 代码，即在⽂档加载完成后才可以对⻚⾯进⾏操作。
如果在⽂档没有完全加载之前就运⾏函数，操作可能失败.
例子:
<button id="btn">点我看看</button>
<script src="jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function () {
console.log("文档加载完成");
$("#btn").click(function() {
$(this).hide();
});
});
</script>JQuery 选择器
我们通过JQuery选择器来选择⼀些HTML元素. 然后对元素进⾏操作.
JQuery选择器 基于已经存在的CSS选择器, 除此之外, 还有⼀些⾃定义的选择器.
jQuery 中所有选择器都以 $ 开头：$().
JQuery事件
JS 要构建动态⻚⾯, 就需要感知到⽤⼾的⾏为.
⽤⼾对于⻚⾯的⼀些操作(点击, 选择, 修改等) 都会在浏览器中产⽣⼀个个事件, 被 JS 获取到, 从⽽进⾏.
更复杂的交互操作.
事件由三部分组成:
1. 事件源: 哪个元素触发的
2. 事件类型: 是点击, 选中, 还是修改?
3. 事件处理程序: 进⼀步如何处理. 往往是⼀个回调函数
例如: 某个元素的点击事件:
$("p").click(function(){
//动作发⽣后执⾏的代码
});
操作元素
获取/设置元素内容
这三个⽅法即可以获取元素的内容, ⼜可以设置元素的内容.
有参数时, 就进⾏元素的值设置, 没有参数时, 就进⾏元素内容的获取
<script>
$(document).ready(function () {
console.log("文档加载完成");
$("#btn").click(function() {
//$(this).hide();
//$("#content").text("我是修改后得内容 ")
$("#content").html("<h1>我是修改后得内容</h1> ")
$("#txt").val("修改文本框")
});
let content = $("#content").text();
console.log(content);
let content2 = $("#content").html();
console.log(content2);
let content3 = $("#content").val();
console.log(content3);
});
</script>获取/设置元素属性
JQuery attr() ⽅法⽤于获取属性值
let href = $("a").attr("href");
console.log(href);
$("a").attr("href","youdao.com")获取/返回css属性
css() ⽅法设置或返回被选元素的⼀个或多个样式属性
获取
<div style="font-size: 36px;">我是⼀个⽂本</div>
<script>
$(function(){
var fontSize = $("div").css("font-size");
console.log(fontSize);
});
</script>
设置
<div style="font-size: 36px;">我是⼀个⽂本</div>
<script>
$(function(){
$("div").css("font-size","24px");
});
</script>添加元素
添加 HTML 内容
1. append() : 在被选元素的结尾插⼊内容
2. prepend() : 在被选元素的开头插⼊内容
3. after() : 在被选元素之后插⼊内容
4. before() : 在被选元素之前插⼊内容
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<img src="pic/rose.jpg">
<script>
$(function () {
$("ol").append("<li>append</li>");
$("ol").prepend("<li>prepend</li>");
$("img").before("图⽚前插⼊");
$("img").after("图⽚后插⼊");
});
</script>删除元素
删除元素和内容，⼀般使⽤以下两个 jQuery ⽅法：
1. remove() : 删除被选元素（及其⼦元素）
2. empty() : 删除被选元素的⼦元素。
<div id="div1">我是⼀个div</div>
<button>删除 div 元素</button>
<script>
$(function () {
$('button').click(function(){
$('#div1').remove();
});
});
</script>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button>删除列表元素</button>
<script>
$(function () {
$('button').click(function(){
$('ol').empty();
});
});
</script>综合练习
猜数字游戏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜数字游戏</title>
</head>
<body>
<button id="reset">restart the game!</button><br/>
please enter the number you guess: <input type="text" name="" id="guessNum"><input type="button" value="guess!" id="guess"> <br/>
The number of times it has been guessed: <span id="count">0</span> <br/>
result: <span id="result"></span><br/>
<script src="jquery-3.7.1.min.js"></script>
<script>
//generate random number
let rightNum = Math.floor(Math.random() * 100);
console.log(rightNum);
let count = 0;
$("#guess").click(function() {
//guess count
count++;
$("#count").text(count);
//guess result
let guessNum = $("#guessNum").val();
if(guessNum > rightNum) {
$("#result").text("Big guess");
$("#result").css("color", "red");
} else if(guessNum < rightNum){
$("#result").text("Small guess");
$("#result").css("color", "red");
} else {
$("#result").text("Right!");
$("#result").css("color", "green");
}
})
$("#reset").click(function() {
//regenerate random number
rightNum = Math.floor(Math.random() * 100);
console.log(rightNum);
count = 0;
//reset factors
count = 0;
$("#count").text(count);
$("#guessNum").val("");
$("#result").text("");
})
</script>
</body>
</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>
.container {
width: 350px;
height: 300px;
margin: 0 auto;
/* border: 1px black solid; */
text-align: center;
}
.grey {
color: grey;
}
.container .row {
width: 350px;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
}
.container .row input {
width: 260px;
height: 30px;
}
#submit {
width: 350px;
height: 40px;
background-color: orange;
color: white;
border: none;
margin: 10px;
border-radius: 5px;
font-size: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>表白墙</h1>
<p class="grey">输入后点击提交, 会将信息显示下方空白处</p>
<div class="row">
<span>谁:</span> <input type="text" name="" id="from">
</div>
<div class="row">
<span>对谁:</span> <input type="text" name="" id="to">
</div>
<div class="row">
<span>说什么:</span> <input type="text" name="" id="say">
</div>
<input type="button" value="提交" id="submit" onclick="submit()">
<!-- <div>A 对 B 说: hello</div> -->
</div>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
<script>
function submit(){
var from = $("#from").text();
var to = $("#to").text();
var say = $("#say").text();
if(form==""||to==""||say=="") {
alert("请检查输入内容!");
return;
}
var html="<div>" + from + " 对 " + to + " 说: " + say + "</div>";
$(".container").append(html);
$(":text").val("");
}
</script>
</body>
</html>