// 获取可视区的宽度和高度
// 获取宽高的时候，要看有没有DTD的说明，如果有，使用documentElement，如果没有，使用body
var clientWidth = document.documentElement.clientWidth
var clientHeight = document.documentElement.clientHeight
1、吸顶条
// 可以直接获取到div的宽度和高度，而且是不带px， 并且样式无论在哪都可以获取到，这两个属性是只读属性
offsetWidth
offsetHeight
// 可以直接获取到div的距离浏览器上边的距离和距离浏览器左边的距离，而且是不带px， 并且样式无论在哪都可以获取到，这两个属性是只读属性
offsetTop
offsetLeft
2、自动播放选项卡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自动播放选项卡</title>
<style>
.box {
width: 1000px;
border: 1px solid gray;
margin: 0 auto;
}
button {
width: 170px;
height: 100px;
font-size: 20px;
background-color: pink;
margin-left: 55px;
display: inline-block;
}
.box > div {
width: 970px;
height: 600px;
font-size: 50px;
background-color: yellow;
margin-left: 15px;
margin-top: 50px;
display: none;
}
.box > .active {
font-size: 30px;
background-color: blue;
}
.box > .show {
display: block;
}
</style>
</head>
<body>
<div class="box">
<button class="active">国产电影</button>
<button>韩日电影</button>
<button>欧美电影</button>
<button>其他电影</button>
<div class="show">霸王别姬、卧虎藏龙、大话西游、东邪西毒、无间道、功夫</div>
<div>釜山行、汉江怪物、奥特曼、灌篮高手、热血高校、午夜凶铃</div>
<div>肖申克的救赎、阿甘正传、敢死队、泰坦尼克号、这个杀手不太冷、盗梦空间</div>
<div>三傻大闹宝莱坞、摔跤吧、小萝莉的猴神大叔、厕所英雄</div>
</div>
</body>
</html>
<script>
// 首先找到最外层的box
var obox = document.getElementsByClassName('box')[0]
// 找到所有的button
var abtns = obox.getElementsByTagName('button')
// 找到所有的div
var adivs = obox.getElementsByTagName('div')
// 记录要切换的div获取按钮的下标
var number = 0
// 循环给每一个button添加点击事件
for (var i = 0; i < abtns.length; i++) {
abtns[i].index = i
abtns[i].onclick = function () {
// 首先清空所有的class
for (var j = 0; j < abtns.length; j++) {
abtns[j].className = ''
adivs[j].className = ''
}
// 然后给指定的添加class
this.className = 'active'
adivs[this.index].className = 'show'
// 将number更新一下
number = this.index
}
}
// 自动播放代码
function next() {
// 显示下一个需要显示的button和div
number++
number %= 4
// 先清掉所有的样式
for (var j = 0; j < abtns.length; j++) {
abtns[j].className = ''
adivs[j].className = ''
}
abtns[number].className = 'active'
adivs[number].className = 'show'
}
var timer = setInterval(next, 1000)
// 如果鼠标放到box上面，将定时器销毁，鼠标离开box的时候，重新创建定时器自动播放
obox.onmouseover = function () {
clearInterval(timer)
}
obox.onmouseout = function () {
timer = setInterval(next, 1000)
}
</script>
3、jquery
jquery是什么？
jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
jQuery是一个快速、小型、功能丰富的JavaScript库。它使HTML文档遍历和操作、事件处理、动画和Ajax等工作变得更加简单，并且具有在多个浏览器之间工作的易于使用的API。结合了通用性和可扩展性，jQuery改变了数百万人编写JavaScript的方式。
版本要求：看版本.txt
压缩和非压缩
.min.js : 压缩版本，一行代码，没有了空格、缩进等
.js : 非压缩版本，正常的代码查看
使用方式
可以本地使用
<script src="jquery/jquery-1.11.3.min.js"></script>
可以引入网络文件使用
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
选择器
jquery通过选择器就可以找到指定的节点
id、class、标签、层级
基本
:first 第一个
:last 最后一个
:even 偶数下标
:odd 奇数下标
:eq() 等于哪个下标
:gt() 大于哪个下标
:lt() 小于哪个下标
作业
1.回到顶部.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
#box {
width: 100px;
height: 100px;
background: red;
position: fixed;
right: 0;
bottom: 0;
cursor: pointer;
display: none;
}
</style>
<script src="./../jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="box">回到顶部</div>
<a name="top"></a> # 设置书签
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
<p>窗外的麻雀在电线杆上多嘴 你说这一句很有夏天的感觉 手中的铅笔在纸上来来回回 我用几行字形容你是我的谁 秋刀鱼的滋味猫跟你都想了解 初恋的香味就这样被我们寻回 那温暖的阳光像刚摘的新鲜草莓 你说你舍不得吃掉这一种感觉 雨下整夜我的爱溢出就像雨水
院子落叶跟我的思念厚厚一叠 几句是非也无法将我的热情冷却 你出现在我诗的每一页 雨下整夜我的爱溢出就像雨水 窗台蝴蝶像诗里纷飞的美丽章节 我接着写把永远爱你写进诗的结尾 你是我唯一想要的了解 那饱满的稻穗幸福了这个季节 而你的脸颊像田里熟透的蕃茄
你突然对我说七里香的名字很美 我此刻却只想亲吻你倔强的嘴
</p>
</body>
<script>
window.onscroll = function () {
var scrolltop = document.documentElement.scrollTop # 检测滚动
if (scrolltop) { # 页面滚动则出现按钮
$("#box").css("display", "block")
} else { # 回到顶部 按钮消失
$("#box").css("display", "none")
}
}
$('#box').click(function () {
window.location.href = '#top' # 跳转到书签
})
</script>
</html>
2.图片切换.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td,
img {
width: 200px;
height: 150px;
}
</style>
<script src="./../jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<table border="1" id="table">
<tr>
<td><img src="images/11.jpg" /></td>
<td><img src="images/22.jpg" /></td>
<td><img src="images/33.jpg" /></td>
</tr>
</table>
<img src="images/11.jpg" id="showImg" />
</body>
<script>
$('td').eq(0).click(function () {
$('#showImg').attr('src', 'images/11.jpg')
})
$('td').eq(1).click(function () {
$('#showImg').attr('src', 'images/22.jpg')
})
$('td').eq(2).click(function () {
$('#showImg').attr('src', 'images/33.jpg')
})
</script>
</html>
3.快速划过没反应
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>快速划过</title>
<script src="./../jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<button class="selected">金都男</button>
<button>唱不完的副歌</button>
<button>说走就走</button>
<button>掌纹算命</button>
<div class="active">
<p>
[00:00.38]信 - 金都男 [00:08.38]作词：信 作曲：信 [00:25.38] [00:27.38]热血 热情 [00:34.38]留些疤给自己 容易 [00:41.08]嘴角 想撑起 [00:47.18]没完没了的岁月 痕迹
[00:54.38]漫山遍野在找寻 在找寻 [01:02.38]呐喊过的野性回音 [01:08.38]困在旧时代的心 想前进 [01:16.38]罹患了麻木的重病 [01:24.38] [01:52.00]天黑 跟随
[01:58.38]两公里外的酒精 回应 [02:06.08]大口吞下 喝完跪下 [02:11.38]沉重的不是身体 是清醒 [02:18.78]交换身体好不好 够时髦 [02:27.38]还是让鬼占据就好 [02:33.08]浸泡灵魂的温饱
[02:39.00]动也动不了 [02:46.38]被判决的我对天砍一刀 [02:51.88]下来 面对面别逃 [02:59.88]凭什么叫我吃草我就要 [03:05.38]亲爱的你凑什么热闹 [03:13.38] [03:43.38]痛快地对着遗憾砍一刀
[03:49.38]痛过 结痂了就好 [03:56.98]化成灰的狂妄还没折腰 [04:03.38]灰烬烧完还能往上飘 [04:10.38]蒸发掉做过的梦就大笑 [04:16.78]就狂到老看谁先死掉 [04:25.38]
[04:37.38]未来 不来 [04:44.38]走着走着终究会 过去 [04:56.38]Lrc made by S.K
</p>
</div>
<div>
<p>
[00:00.38]信 - 唱不完的副歌 [00:05.38]作词：信 作曲：信 [00:11.38] [00:13.38]总有人嘲笑爱会沉醉 [00:20.38]也有人坚定爱会熄灭 [00:26.78]总有人为爱难以入睡 [00:32.18]累积的灰
已无路可退 [00:40.38]摇晃DNA 爱无是非 [00:47.38]最怕给错觉不停轮回 [00:51.68]爱的温柔是爱了以后 [00:58.78]爱的勇敢是停在段落 [01:06.88]为你唱过的歌 [01:10.00]你记两句就够
[01:13.38]前奏唱不到副歌 [01:16.58]疲惫的心想放手 [01:20.38]风筝飘到远方 [01:23.78]剪掉线任它流浪 [01:26.68]我想要唱完副歌 [01:30.08]让决定能决定快乐 [01:50.00]你总说人有梦想要追
[01:56.38]这个理由我无言以对 [02:03.88]你想走我不会再靠北 [02:08.88]顶多唱歌 配合些泪水 [02:16.30]我说过可以一起撒野 [02:23.88]唱不完副歌不算干脆 [02:28.68]纠缠强留但自由更痛
[02:35.00]海水是天空的天空 [02:43.98]为你唱过的歌 [02:46.98]你记两句就够 [02:50.58]不为谁改变的我 [02:52.88]碎片满地还在执着 [02:56.88]幸福转身沉默 [03:00.38]我唱的都是解脱
[03:03.88]我终于唱完副歌 [03:07.38]只剩下我自己拍手 [03:16.38]Lrc made by S.K
</p>
</div>
<div>
<p>
[ver:v1.0] [ti:6335822] [00:00.23]说走就走 - 信 [00:05.24]作词：信 作曲：信 [00:23.55]低头在等 划着虚拟人生 [00:28.02]微信还没开始辩论 [00:31.13]阳光已经沸腾
[00:34.82]地铁开门 还是相同的人 [00:39.06]想起曾经多么天真 [00:42.03]想看巴黎的早晨 [00:45.38]向左走 向右走 [00:48.12]原地打转空气稀薄 [00:52.12]我一直努力工作
[00:57.02]想流浪 想辽阔 [01:00.65]久违不见的笑容 [01:02.95]一生一次的放纵 [01:07.04]我要说走就走 从伦敦到银座 [01:13.51]管他点菜只会说Yes Yes 晚安说成哦嗨优
[01:18.72]我是马可波罗 走到世界尽头 [01:24.33]人生的马拉松只要出发还要 [01:29.02]一瓶好的红酒 [01:34.89]就不会怕寂寞 [01:41.73]走世界 看精彩 [01:45.34]从十八岁讲到现在
[01:48.01]最后到巷口买菜 [01:53.12]姑娘哟 听人说 [01:56.22]莎士比亚的罗密欧 [01:59.40]就是现在会带你走 [02:03.73]我要说走就走 从伦敦到银座 [02:09.42]管他今天会碰到女王还是会看到女优
[02:15.00]我的存款不多 我的勇气像花朵 [02:20.74]就算会凋谢我还有灿烂的绽放过 [02:26.73]我们说走就走 让星星跟着走 [02:32.03]一张机票就能记录想要的洒脱 [02:37.82]我们说走就走
用青春去挥霍 [02:42.89]只要是天空很蓝我会拍拍手 [02:48.92]继续的往前走 [02:53.74]我会一直往前走 [02:59.99]Lrc made by S.K
</p>
</div>
<div>
<p>
[00:00.38]信 - 掌纹算命 [00:05.38]作词：信 作曲：信 [00:11.38] [00:23.38]早晨的身体功能只剩呼吸 [00:29.00]和自我的痊愈 [00:34.78]烟熏味很重的心需要酒精 [00:40.88]才能够慢慢唤醒
[00:46.38]划过手机 预约的微信 [00:52.00]我只想随便挑个名字 才能专心 [00:57.78]烧焦的蛋 窗外的乌云 [01:03.52]老天躲着我说帮帮你 [01:09.88]就这么说好了 今晚就是你
[01:15.70]你的味道 散发月桂的香气 [01:21.38]然后安抚 你说所谓的心灵 [01:27.88]要我盘旋在你的内心 告诉你 [01:33.58]你是傻-B 大师级作品 [01:47.48]你说云在沉默
[01:50.08]这句是在他-妈-的装什么犹豫 [01:59.08]悬崖边的小草 [02:02.00]看过太多太傻想不开的遭遇 [02:08.42]转过身来 让我看看你 [02:14.88]管你是病态牵挂星座归纳什么原因
[02:20.88]脸靠过来 用掌纹算命 [02:26.78]五道血痕 就能够清醒 [02:32.80]就这么说好了今晚 就是你 [02:38.68]头晕目眩 之后辛酸就忘记 [02:44.88]不愿放手的剧情 已懒得听
[02:50.40]我的手借给你 [02:53.88]免费的借给你 [02:57.68]就这么说好了 今晚没有你 [03:02.98]就这么说好了 永远没有你 [03:07.88]我还要留些时间补些酒精 [03:14.78]快给我滚出去
[03:17.48]我在等下个你 [03:20.38]欢迎光临 [03:25.88]刷卡也可以 [03:32.38]Lrc made by S.K
</p>
</div>
</body>
<style>
button {
height: 50px;
width: 160px;
font-size: 20px;
color: black;
background: rgba(74, 236, 248, 0.5)
}
.selected {
font-size: 25px;
color: chocolate;
}
div {
border: dashed black;
background: rgba(173, 252, 55, 0.4);
width: 660px;
font-size: 18px;
line-height: 26px;
display: none;
}
.active {
display: block;
}
</style>
<script>
var btns = $('button')
var divs = $('div')
var timer = null
flag = false # 设置标签
$('button').click(function () { # 点击事件
for (var i = 0; i < btns.length; i++) {
btns[i].className = '';
divs[i].className = '';
}
this.className = 'selected';
divs[btns.index(this)].className = 'active';
})
$('button').hover(function () {
flag = true
onweigt = btns.index(this) # 获取当前选中的标签的索引
timer = setTimeout(function () {
if (flag) { # 如果标签为true才继续执行 否则计时器很不好停止
for (var i = 0; i < btns.length; i++) {
if (onweigt == i) {
btns[onweigt].className = 'selected';
divs[onweigt].className = 'active';
} else {
btns[i].className = '';
divs[i].className = '';
}
}
}
}, 1000)
})
$('button').mouseout(function () {
flag = false; # 鼠标移出则标签状态设置为false,避免继续执行
clearTimeout(timer);
})
</script>
</html>
4.简易年历.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
* {
margin: 0;
padding: 0;
border: none
}
ul,
li {
list-style: none;
}
#box {
width: 220px;
height: 350px;
background: #ccc;
margin: 100px auto;
}
ul {
overflow: hidden;
}
li {
float: left;
width: 58px;
height: 53px;
border: 1px solid #aaa;
background: #444;
color: white;
margin-left: 10px;
margin-top: 10px;
text-align: center;
cursor: pointer;
}
#showInfo {
width: 200px;
height: 50px;
background: #aaa;
border: 1px solid white;
margin: 10px;
}
.active {
color: orange;
background: white;
border: 1px solid red;
}
</style>
<script src="./../jquery/jquery-1.11.3.min.js"></script>
</head>
<body>
<div id="box">
<ul>
<li class="active">
<h2>1</h2>
<p>Jan</p>
</li>
<li>
<h2>2</h2>
<p>Feb</p>
</li>
<li>
<h2>3</h2>
<p>Mar</p>
</li>
<li>
<h2>4</h2>
<p>Apr</p>
</li>
<li>
<h2>5</h2>
<p>May</p>
</li>
<li>
<h2>6</h2>
<p>Jun</p>
</li>
<li>
<h2>7</h2>
<p>Jul</p>
</li>
<li>
<h2>8</h2>
<p>Aug</p>
</li>
<li>
<h2>9</h2>
<p>Sep</p>
</li>
<li>
<h2>10</h2>
<p>Oct</p>
</li>
<li>
<h2>11</h2>
<p>Nov</p>
</li>
<li>
<h2>12</h2>
<p>Dec</p>
</li>
</ul>
<div id="showInfo">1月份好</div>
</div>
</body>
<script>
var lis = $('li')
for (var i = 0; i < lis.length; i++) {
$('li').eq(i).click(function () { # 直接遍历所有li标签 点击才执行对饮事件
for (j = 0; j < lis.length; j++) {
lis[j].className = ''
}
this.className = 'active'
$('#showInfo').html(($('li').index(this) + 1) + '月份好');
})
}
</script>
</html>
