Tab栏的切换案例
<!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>
.dataDiv {
width: 1000px;
height: 100px;
border: 1px solid gray;
margin: auto;
display: flex;
justify-content: space-evenly;
}
.item {
width: 100px;
height: 50px;
margin-top: 20px;
border: 1px solid gainsboro;
text-align: center;
align-items: center;
}
#bg {
color: red;
font-size: 17px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div class="dataDiv">
<div class="item" id="bg">
<div>11-10</div>
<div>周日</div>
</div>
<div class="item">
<div>11-11</div>
<div>周一</div>
</div>
<div class="item">
<div>11-12</div>
<div>周二</div>
</div>
<div class="item">
<div>11-13</div>
<div>周三</div>
</div>
<div class="item">
<div>11-14</div>
<div>周四</div>
</div>
<div class="item">
<div>11-15</div>
<div>周五</div>
</div>
<div class="item">
<div>11-16</div>
<div>周六</div>
</div>
</div>
<script>
//获取所有item
var items = document.querySelectorAll('.item')
var lastIndex = 0;//旧的点击对象的下标
for (let i = 0; i < items.length; i++) {
var item = items[i]
item.setAttribute('index', i)
//点击事件
item.onclick = function () {
var index = this.getAttribute('index')
//这边用this，不用item
//禁止重复点击
if (index === lastIndex) {
return
}
console.log(index);
this.id = 'bg'
//清除旧的
items[lastIndex].id = ''
items[lastIndex].style.color = 'black'
items[lastIndex].style.backgroundColor = ''
//存储当前的
lastIndex = index;
}
//移入事件
item.onmouseenter = function () {
var index = this.getAttribute('index')
console.log("鼠标移入第" + index + "个div");
this.style.color = 'red'
this.style.backgroundColor = 'antiquewhite';
}
//移出事件
item.onmouseleave = function () {
var index = this.getAttribute('index')
console.log("鼠标移出第" + index + "个div");
//判断是否有id
if (this.id == '') {
this.style.color = 'black'
this.style.backgroundColor = ''
}
}
}
</script>
<!-- 鼠标扫一遍才取消，
涉及css优先级的问题，直接设置style比id和class高，
我们的问题是，当鼠标移入，执行：
this.style.color = 'red'
this.style.backgroundColor = 'antiquewhite';
当点击时：加上id='bg'
此时style为red和antiquewhite
当点击下一个时，这个的id被清除了，但是直接通过style设置的
this.style.color = 'red'
this.style.backgroundColor = 'antiquewhite';
仍然存在，而onmouseleave事件判断的是鼠标移出，
（当我们点击完这个设置了style，再点击另一个就相当于当前这个
逃过了onmouseleave函数的监管，因为相当于没有在id=' '的时候移出）
所以要鼠标扫一遍才能去除其他的style
解决方法是清除旧的id的同时，清除style
-->
</body>
</html>
键盘事件学习：
<!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>
.text {
width: 400px;
height: 200px;
}
</style>
</head>
<body>
<textarea name="" class="text" placeholder="请输入"></textarea>
<script>
var textarea = document.querySelector('.text')
textarea.onkeydown = function () {
console.log(this);//this指输入框本身
console.log(this.value);//内容
console.log(event);//键盘按键本身
console.log(event.keyCode);
//回车调用发送函数
if (event.keyCode == 13) {
commit();
}
}
function commit() {
console.log('发送' + textarea.value);
textarea.value = ''//发送完后清空输入框，但是还有回车效果
//要取消默认事件
event.preventDefault();
}
//上面是监听输入框，而4399黄金矿工是监听整个body
document.body.onkeydown = function () {
console.log(event.keyCode);
}
</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>Document</title>
<style>
div {
width: 1064px;
height: 660px;
margin: auto;
background-color: antiquewhite;
}
.img {
display: none;
}
.showImg {
display: inline;
}
</style>
</head>
<body>
<div>
<img src="img/06ccb3ef-94cf-409d-babe-34661ddfc54c.jpg" width="1064px" height="660px" class="img showImg">
<img src="img/228dae19-7c2e-4d39-8c95-3d204f6a2c84.jpg" width="1064px" height="660px" class="img">
<img src="img/2a072233-6372-4da4-ad23-10c9fb3a0c49.jpg" width="1064px" height="660px" class="img">
<img src="img/2a3d2d3b-b5c0-494a-b6e0-39e4b8851632.jpg" width="1064px" height="660px" class="img">
<img src="img/3b7ed0af-a6ab-4ca2-b9f9-9bd722ff3c78.jpg" width="1064px" height="660px" class="img">
<img src="img/48403b38-1ad4-4737-bc36-7b5534febebe.jpg" width="1064px" height="660px" class="img">
<img src="img/88de2136-575f-4e9e-aa80-b9380e5b2594.jpg" width="1064px" height="660px" class="img">
<img src="img/d5e09ce3-91ba-443e-8fc4-ac219062b675.jpg" width="1064px" height="660px" class="img">
</div>
<script>
var imgs = document.querySelectorAll('.img')
var index = 0;//显示第0个图片
//键盘点击事件
document.body.onkeydown = function () {
//左
if (event.keyCode === 37) {
if (index > 0) {
imgs[index].classList.remove('showImg')
index--
imgs[index].classList.add('showImg')
}
else {
imgs[index].classList.remove('showImg')
index = 7
imgs[index].classList.add('showImg')
}
}
//右
else if (event.keyCode === 39) {
if (index < 7) {
//去掉旧的
imgs[index].classList.remove('showImg')
//添加新的
index++
imgs[index].classList.add('showImg')
}
else {
imgs[index].classList.remove('showImg')
index = 0
imgs[index].classList.add('showImg')
}
}
}
</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>Document</title>
<style>
body {
background-color: rgba(0, 0, 0, 0.78);
}
.dataDiv {
border-radius: 5px;
background-color: #fff;
width: 560px;
height: 400px;
margin: auto;
margin-top: 150px;
padding-top: 30px;
box-sizing: border-box;
}
.title {
width: 100%;
height: 50px;
font-size: 17px;
line-height: 50px;
text-align: center;
font-weight: 600;
}
.phoneDiv {
width: 50%;
height: 60px;
/* background-color: antiquewhite; */
margin: auto;
margin-top: 50px;
}
.areaBtn {
width: 50px;
height: 60px;
line-height: 60px;
font-size: 17px;
float: left;
}
.phoneText {
width: calc(100% - 50px);
height: 60px;
line-height: 60px;
float: left;
border-width: 0px;
box-sizing: border-box;
outline: none;
font-size: 17px;
}
.line {
width: 50%;
margin: auto;
background-color: gainsboro;
height: 1px;
}
.alertTitle {
width: 50%;
margin: auto;
font-size: 11px;
color: red;
display: none;
}
</style>
</head>
<body>
<div class="dataDiv">
<!-- 标题 -->
<div class="title">手机号登录</div>
<!-- 手机号码输入 -->
<div class="phoneDiv">
<div class="areaBtn">+86 | </div>
<input type="text" class="phoneText" placeholder="请输入手机号码" name="" id="">
</div>
<!-- 线条 -->
<div class="line"></div>
<!-- 提示 -->
<div class="alertTitle">请输入合法的手机号</div>
</div>
<script>
var phoneText = document.querySelector('.phoneText')
var line = document.querySelector('.line')
var alertTitle = document.querySelector('.alertTitle')
//监听手机号输入
phoneText.onfocus = function () {
line.style.backgroundColor = '#5dcdcb'
}
phoneText.onblur = function () {
line.style.backgroundColor = 'gainsboro'
}
//监听输入的手机号
phoneText.oninput = function () {
if (this.value.length === 11) {
if (isValid(this.value)) {
alertTitle.style.display = 'none'
}
else alertTitle.style.display = 'block'
}
else if (this.value.length < 11) {
alertTitle.style.display = 'none'
}
}
function isValid(tt) {
var regex = /^1[3-9]\d{9}$/
return regex.test(tt)
}
</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>Document</title>
<style>
.backTop {
width: 50px;
height: 50px;
font-size: 17px;
background-color: orange;
border-radius: 10px;
color: white;
text-align: center;
position: fixed;
right: 50px;
bottom: 100px;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="backTop">回到顶部</div>
<h1>秦皇汉武</h1>
<p>秦皇即秦始皇帝(公元前259年-公元前210年)：俗称秦始皇。嬴姓，名政。世称“嬴政”。原为战国时秦国君主，秦庄襄王之子。公元前247年即王位，当时年仅十三岁。由于未行成人之礼，实际专权用事者为相邦吕不韦及太后宠信的假宦官嫪毐。公元前238年，秦王政开始亲政，当年镇压了嫪毐的叛乱，第二年又免去了吕不韦的职务。接着任用李斯为丞相，采纳其灭六国以成一统的建议，派大将王翦等人进行统一战争。
</p>
<p>统一全国后，秦王政认为自己功高三皇五帝，创立了“皇帝”的尊号，自称始皇帝。皇帝是国家最高统治者，可决定国家一切事物，直接任免重要的中央及地方官吏。此外，秦始皇又在全国实行郡县制，分全国为三十六郡，又南征百越、北伐匈奴，统一了货币、文字、度量衡等。他下令销毁民间兵器，将山东六国贵族迁移到关中，又焚毁儒学诸书，坑杀了四百六十多名术士，实行专制主义的中央集权统治。公元前210年，秦始皇于第五次出巡途中，在返回咸阳的路上病死于沙丘(在今河北邢台)。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<script>
var backTop = document.querySelector('.backTop')
//监听body滚动(两种方法：监听window或者body)
window.addEventListener('scroll', function () {
if (document.documentElement.scrollTop > 300) {
backTop.style.display = 'block'
}
else {
backTop.style.display = 'none'
}
//阅读隐私政策，滚动到底部才能点击确认,怎么知道滚到底部了？
// 获取滚动距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 获取页面总高度
var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
// 获取视口高度
var clientHeight = window.innerHeight;
// 判断是否滚动到底部(已经滚动的高度+视图的高度 >= 页面总高度)
if (scrollTop + clientHeight >= scrollHeight) {
console.log("滚到底部了");
}
})
// document.body.onscroll = function () {
// console.log(document.documentElement.scrollTop);
// }
backTop.onclick = function () {
document.documentElement.scrollTop = 0
}
// 刚开始把滚动底部放到这边，但是不生效，原因是没有放在scroll监听中，只在页面加载时执行一次
</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>Document</title>
<style>
.backTop {
width: 50px;
height: 50px;
font-size: 17px;
background-color: orange;
border-radius: 10px;
color: white;
text-align: center;
position: fixed;
right: 50px;
bottom: 100px;
display: none;
cursor: pointer;
}
</style>
</head>
<body>
<div class="backTop">回到顶部</div>
<input type="text" class="ziti" placeholder="请输入字体大小">
<button id="btn1">字号+1</button>
<button id="btn2">字号-1</button>
<div class="ziti">
<h1>秦皇汉武</h1>
<p>秦皇即秦始皇帝(公元前259年-公元前210年)：俗称秦始皇。嬴姓，名政。世称“嬴政”。原为战国时秦国君主，秦庄襄王之子。公元前247年即王位，当时年仅十三岁。由于未行成人之礼，实际专权用事者为相邦吕不韦及太后宠信的假宦官嫪毐。公元前238年，秦王政开始亲政，当年镇压了嫪毐的叛乱，第二年又免去了吕不韦的职务。接着任用李斯为丞相，采纳其灭六国以成一统的建议，派大将王翦等人进行统一战争。
</p>
<p>统一全国后，秦王政认为自己功高三皇五帝，创立了“皇帝”的尊号，自称始皇帝。皇帝是国家最高统治者，可决定国家一切事物，直接任免重要的中央及地方官吏。此外，秦始皇又在全国实行郡县制，分全国为三十六郡，又南征百越、北伐匈奴，统一了货币、文字、度量衡等。他下令销毁民间兵器，将山东六国贵族迁移到关中，又焚毁儒学诸书，坑杀了四百六十多名术士，实行专制主义的中央集权统治。公元前210年，秦始皇于第五次出巡途中，在返回咸阳的路上病死于沙丘(在今河北邢台)。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
<p>汉武即汉武帝刘彻(公元前156年-公元前87年)：汉武帝十六岁登基，在位54年，占整个西汉存在时间的四分之一。采用董仲舒“罢黜百家，独尊儒术”的建议，统一思想，强调皇权；上位后，征伐四方，纵横天下，开疆拓土；对于匈奴的边境威胁，积极主战，于是出现了卫青、霍去病、李广等英雄人物。公元前119年，发生最大规模的战役，霍去病追击匈奴1000余里，从此汉转入战略反攻时期；派遣张骞通西域打通“丝绸之路”，依次令细君公主、解忧公主和亲乌孙，以图合击匈奴，在西域设使者校尉控制西域；加强中央集权，颁布“推恩令”，设刺史，削弱相权，进一步削弱藩王势力；设“太学”，积极推荐人才，官僚制度改革，儒士纷纷入朝，改进汉高祖刘邦的“察举制”创举孝廉；完善“乐府”机制，由朝廷乐府系统或相当于乐府职能的音乐管理机关搜集、保存而流传下来的汉代诗歌最终形成汉乐府。
</p>
</div>
<script>
var backTop = document.querySelector('.backTop')
//监听body滚动(两种方法：监听window或者body)
window.addEventListener('scroll', function () {
if (document.documentElement.scrollTop > 300) {
backTop.style.display = 'block'
}
else {
backTop.style.display = 'none'
}
//阅读隐私政策，滚动到底部才能点击确认,怎么知道滚到底部了？
// 获取滚动距离
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
// 获取页面总高度
var scrollHeight = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
// 获取视口高度
var clientHeight = window.innerHeight;
// 判断是否滚动到底部(已经滚动的高度+视图的高度 >= 页面总高度)
if (scrollTop + clientHeight >= scrollHeight) {
console.log("滚到底部了");
}
})
// document.body.onscroll = function () {
// console.log(document.documentElement.scrollTop);
// }
backTop.onclick = function () {
document.documentElement.scrollTop = 0
}
// 刚开始把滚动底部放到这边，但是不生效，原因是没有放在scroll监听中，只在页面加载时执行一次
var ziti = document.querySelector('.ziti')
var ps = document.getElementsByTagName('p')
ziti.onchange = function () {
for (let i = 0; i < ps.length; i++) {
ps[i].style.fontSize = ziti.value + 'px';
}
}
var btn1 = document.querySelector('#btn1')
var btn2 = document.querySelector('#btn2')
let init = 16
btn1.onclick = function () {
init++
for (let i = 0; i < ps.length; i++) {
ps[i].style.fontSize = init + 'px';
}
}
btn2.onclick = function () {
init--
for (let i = 0; i < ps.length; i++) {
ps[i].style.fontSize = init + 'px';
}
}
</script>
</body>
</html>
4399拍苍蝇
<!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>
body,
html {
width: 100%;
height: 100%;
cursor: url('img/苍蝇拍.png')30 30, auto;
}
.fly {
width: 60px;
position: absolute;
top: 100px;
left: 100px;
}
.pai {
width: 100px;
}
.died {
width: 60px;
position: absolute;
display: none;
left: 100px;
top: 100px;
}
</style>
</head>
<body>
<h1>分数：
<span class="score">0</span>
分
</h1>
<img src="img/苍蝇.png" class="fly" alt="">
<img src="img/被拍死.png" class="died" alt="">
<audio id="SwatSound" src="img/拍苍蝇声音.mp3"></audio>
<audio id="Succ" src="img/成功.mp3"></audio>
<script>
var fly = document.querySelector('.fly')
var score = document.querySelector('.score')
var died = document.querySelector('.died')
var swatSound = document.getElementById('SwatSound');
var Succ = document.getElementById('Succ')
let count = 0
fly.onclick = function () {
count++
score.textContent = `${count}`
if (count == 5) {
Succ.play()
}
died.style.top = this.style.top;
died.style.left = this.style.left;
died.style.display = 'block'
var X = Math.floor(Math.random() * 100)
var Y = Math.floor(Math.random() * 100)
this.style.display = 'none'
this.style.top = X + '%'
this.style.left = Y + '%'
swatSound.currentTime = 0;
SwatSound.play();
// died.style.display = 'none'
this.style.display = 'block'
}
</script>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
