1.回到顶部
<!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;
}
#box a{
display: inline-block;
width: 100px;
height: 100px;
text-decoration: none;
color: black;
}
</style>
</head>
<script type="text/javascript">
window.onload=function(){
var odiv=document.getElementById('box')
// var client_height=document.documentElement.clientHeight
document.onscroll=function(){
var scroll_top=document.documentElement.scrollTop
if (scroll_top>10){
odiv.style.display='block'
odiv.style.right='20px'
odiv.style.bottom='20px'
odiv.onclick=function(){
document.write("<a href=''></a>")
}
}
else{
odiv.style.display='none'
}
}
}
</script>
<body>
<div id="box"><a href="">回到顶部</a></div>
<p>窗外的麻雀在电线杆上多嘴
你说这一句很有夏天的感觉
手
幸福了这个季节
在纸上来来回回
我用几行字形容你是我的谁
秋解
初恋的香味就这样被我们寻回
的爱溢出就像雨水
麻雀在电线杆上多嘴
香的名字很美
我此刻却只想亲吻你倔强的嘴</p>
</body>
</html>
2.简易年历
<!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>
</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>
</html>
<script type="text/javascript">
// var odiv1=document.getElementById('box')
var alis=document.getElementsByTagName('li')
var odiv1=document.getElementById('showInfo')
for(var i=0;i<alis.length;i++){
alis[i].onclick=function(){
for(var j=0;j<alis.length;j++){
alis[j].className=''
odiv1.innerHTML=''
}
this.className='active'
odiv1.innerHTML=parseInt(this.firstElementChild.innerHTML)+"月份好"
}
}
</script>
3切换图片
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
td, img {
width: 200px;
height: 150px;
}
</style>
</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>
</html>
<script type="text/javascript">
var otab=document.getElementById('table')
var oimgs=otab.getElementsByTagName('img')
var oimg=document.getElementById('showImg')
for (var i=0;i<oimgs.length;i++){
oimgs[i].onclick=function(){
oimg.src=''
oimg.src=this.src
console.log(oimg.src)
}
}
</script>
4.快速划过没反应
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<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'><img style="width: 970px;height: 600px;" src="images/q2.jpg"/></div>
<div><img style="width: 970px;height: 600px;" src="images/q3.jpg"/></div>
<div><img style="width: 970px;height: 600px;" src="images/q4.jpg"/></div>
<div><img style="width: 970px;height: 600px;" src="images/q5.jpg"/></div>
</div>
</body>
</html>
<script type="text/javascript">
var obox=document.getElementsByClassName('box')[0]
var obuttons=obox.getElementsByTagName('button')
var odivs=obox.getElementsByTagName('div')
var number=0
for(var i=0;i<obuttons.length;i++){
obuttons[i].index=i
// 创建移到事件
var ob_timer=null
obuttons[i].onmouseover=function(){
var mouse_index=this.index
flag=false
ob_timer=setInterval(function(){
if(flag){
for (var j=0;j<obuttons.length;j++){
obuttons[j].className=''
odivs[j].className=''
console.log(obuttons[j].className)
}
obuttons[mouse_index].className='active'
odivs[obuttons[mouse_index].index].className='show'
}
flag=true
},500)
number=this.index-1
}
obuttons[i].onmouseout=function(){
clearTimeout(ob_timer)
}
}
function method1(){
number++
number%=4
for (var i=0;i<obuttons.length;i++){
obuttons[i].className=''
odivs[i].className=''
}
obuttons[number].className='active'
odivs[number].className='show'
}
var timer=setInterval(method1,1000)
obox.onmouseover=function(){
clearInterval(timer)
}
obox.onmouseout=function(){
timer=setInterval(method1,1000)
}
网友评论