标题:javascript练手 | 作者: catfish | 时间:2020年01月09日
暂无法显示图片

例题一:为了您的信息安全

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		div{
			width: 200px;
			height: 100px;
			background-color: #AAA;
			border: 1px solid black;
			display: none;
		}
	</style>
	<script type="text/javascript">
		window.onload = function(){    // 找不到文档对象,js是按顺序的,等加载完后再加载js代码
			var div = document.getElementById('div1')
			var input = document.getElementById('input1')
			input.onmouseover = function(){
				div.style.display = "block";             // 一次只能设置一个元素, innerHTML
			};
			input.onmouseout = function(){
				div.style.display = 'none';              // 点运算可以用中括号字符串来代替
			}
		}
	</script>
</head>
<body>
	<input id="input1" type="checkbox" name="">
	<div id="div1">
		为了您的信息安全 ... 
	</div>

	<!-- 获取方式,修改方式className -->
</body>
</html>

例题二:点击变红

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
</head>
<style type="text/css">
	div{
		border: 1px solid black;
		width: 200px;
		height: 100px;
	}
</style>
<script type="text/javascript">
	function toRed(){                             // 优先级:行间style > ID > className > 标签 > *  
		div1 = document.getElementById('div1')
		div1.style.backgroundColor = 'red'        // backgroundColor
	}                                      
</script>
<body>
<div id="div1"></div>
<button onclick="toRed()">点击变红</button>
</body>
</html>

例题三:多内容混牌

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title></title>
	<style type="text/css">
		.active{
			background-color: yellow;
		}
		div{
			width: 200px;
			height: 200px;
			background-color: #AAA;
			display: none;
		}
	</style>
	<script type="text/javascript">
		window.onload = function()
		{
			var aDiv = document.getElementsByTagName('div')
			var aBtn = document.getElementsByTagName('input')
			for(var i=0; i<aBtn.length; i++)
			{
				aBtn[i].onclick = function()
				{
					for(var i=0; i<aBtn.length; i++)
					{
						aBtn[i].index = i;                               
						aBtn[i].className = '';
						aDiv[i].style.display = 'none';
					}
					this.className = 'active'   ;              // this代表这个对象。如果没有对象指定就是全局window。
					aDiv[this.index].style.display = 'block';
				}                                                
			}
		}
	</script>
</head>
<body>
<input class="active" type="button" name="" value="教育">
<input type="button" name="" value="培训">
<input type="button" name="" value="招生">
<input type="button" name="" value="出国">
<div style="display: block;">1111111111</div>
<div>222222222222</div>
<div>3333333333</div>
<div>44444444444</div>
</body>
</html>

例题四:点击回到顶部

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>hello world!</title>
</head>
<style type="text/css">
    #aaa{
        width: 200px;
        height: 1000px;
        background-color: red;
    }
    #bbb{
        width: 100px;
        height: 100px;
        background-color: blue;
        position: fixed;
        bottom: 10px;
        right: 0;
        cursor: pointer;
        display: none;
    }
</style>
<body>
<div id="aaa">
    <p>asdfjasdkjfasdjflksdjflasdfjds</p>
    <p>aldfjsakljfqeiofjsdakfjsdklfj</p>
</div>
<div id="bbb">点击返回顶部</div>
</body>
<script type="text/javascript">
    window.onscroll = function(){
        oBdiv = document.getElementById('bbb')
        oBdiv.onclick = function(){
            document.documentElement.scrollTop = 0;
        }
        if(document.documentElement.scrollTop > 100)
        {
            oBdiv.style.display = 'block';
        }
        else
        {
            oBdiv.style.display = 'none';
        }
    }
</script>
</html>

例题5:翻转菜单

https://www.bilibili.com/video/av21212670?p=173

我要评论

没有登录?请先登录后再评论

最新评论

暂无人评论,来抢个沙发吧!