JavaScript实例第十七天

最新推荐文章于 2024-10-02 05:39:15 发布

APinBom

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量243

点赞数

分类专栏：前端Javascript实例文章标签： javascript 前端 css

本文链接：https://blog.csdn.net/qq_51649346/article/details/121191497

版权

前端Javascript实例专栏收录该内容

20 篇文章 0 订阅

订阅专栏

2021.11.7

实例一、定时关闭页面

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>定时关闭页面</title>
</head>

<body>
	<div>
	设定定时关闭窗口时间：
		<input type="text" id="id-input-time" value="">
		<input type="button" value="定时关闭网页" onClick="set_time_close()">
	</div>
</body>
	<script type="text/javascript">
	var timer=null;
		var win=null;
		function set_time_close(){
			var t=document.getElementById("id-input-time").value;
			var timerClose=t||-1;
			if(timerClose!=-1){
				timer=setTimeout(function(){
					win=window.open("","_self","")//在窗口本身打开一个空网页
					win.close();
					timer.clearTimeout();
					
				},timerClose)
			}
			
		}
	</script>
</html>

实例二、修改浏览器标题

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>修改浏览器标题</title>
</head>

<body>
	输入要修改的标题名字
	<input type="text" id="id-title-text" value="">
	<input type="button" value="点击修改" onClick="set_title()"
	</body>
	<script type="text/javascript">
	function set_title(){
		var title=document.getElementById("id-title-text").value;
		var ti=document.getElementsByTagName('title');
		ti[0].innerHTML=title;
		
		
	}
	</script>
</html>

DIV+CSS特效（很重要也很有趣）

实例三、同时改变多个DOM样式

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>同时改变多个DOM样式</title>
</head>

<body>
	<div id="id-div-center" style="">
	<p>第一段内容...</p>
		<p>第二段内容...</p>
		<p>第三段内容...</p>
		<input type="button" onClick="changFont(20)" value="大字体"/>
		<input type="button" onClick="changFont(14)" value="正常"/>
		<input type="button" onClick="changFont(8)" value="小字体"/>
	</div>
</body>
	<script type="text/javascript">
	function changFont(size){
		var p=document.getElementsByTagName("p");
		var font=size+"px"
		for(var i=0;i<p.length;i++){
			p[i].style.fontSize=font;
			
		}
		
	}
	
	</script>
</html>

另一个用css更改

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>同时改变多个DOM样式</title>
</head>
<style type="text/css">
	.content-small{
		font-style:italic;/**倾斜的效果*/
		font-size:small;
	}
	.content-medium{
		font-style:normal;
		font-size:medium;
	}
	.content-large{
		font-style:italic;
		font-size:large;
	}
	
	</style>
<body>
	<div id="id-div-center" style="">
	<p>第一段内容...</p>
		<p>第二段内容...</p>
		<p>第三段内容...</p>
		<input type="button" onClick="changFont('content-large')" value="大字体"/>
		<input type="button" onClick="changFont('content-medium')" value="正常"/>
		<input type="button" onClick="changFont('content-small')" value="小字体"/><!-- 里面得用'' -->
	</div>
</body>
	<script type="text/javascript">
	function changFont(s){
		var contents=document.getElementsByTagName("p");
		for(var i=0;i<contents.length;i++){
			contents[i].className=s;//改变标签元素的css类选择器，从而改变元素的样式
		}
		
	}
	
	</script>
</html>

实例四、弹出层

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>弹出层</title>
</head>
<style type="text/css">
	div#id-div-popup{
		display: none;/**设置元素使用框（盒）模型的类型*/
		width: 300px;
		height: 100px;
		border: 1px solid #ccc;/**边框，solid为实线*/
		text-align: center;
		font:normal 14px/1.2em "Microsoft Yahei",arial,sans-serif;
		
	}
	</style>
<body>
	<div id="id-div-popup">
		
		<p><input type="button" id="in-input-popupClose" value="close"></p>
		<p>这是一个弹出层！</p>
	</div>
	<input type="button" id="id-input-popupOpen" value="弹出">
</body>
	<script type="text/javascript">
	window.onload=function(){
		function setCss(_this,cssOption){
			if(!_this||this.nodeType==3||_this.nodeType==8||!this.style){
				return;
			}
			for(var cs in cssOption){
				_this.style[cs]=cssOption[cs]
			}
		}
		function setPopup(e,openPop,closePop){
			setCss(e,{
				"position":"absolute",
				"zIndex":100,
				"backgroundColor":"#eee"
			});
			openPop.onclick=function(){
				e.style.display="block";
				setCss(e,{
					"top":"50%",
					"left":"%50",
					"marginleft":-e.offsetWidth/2+"px"
					
				})
			}
			closePop.onclick=function(){
				e.style.display="none"
			}
		}
		var a=document.getElementById("id-div-popup");
		var b=document.getElementById("id-input-popupOpen");
		var c=document.getElementById("in-input-popupClose");
		setPopup(a,b,c)
	}
	</script>
</html>

实例五、弹出框

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
	<style type="text/css">
		#popLayer{
			display: none;
            background-color: #B3B3B3;
            position: absolute;/**绝对定位*/
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
            z-index: 10;
            -moz-opacity: 0.8;
            opacity:.80;
            filter: alpha(opacity=80);/* 只支持IE6、7、8、9 */

		}
		#popBox{
			display: none;
            background-color: #FFFFFF;
            z-index: 11;
            width: 200px;
            height: 200px;
            position:fixed;
            top:0;
            right:0;
            left:0;
            bottom:0;
            margin:auto;/**弹出框的大小*/

			
		}
		#popBox.close{
			 text-align: right;
            margin-right: 5px;
            background-color: #F8F8F8;

			
		}
		#popBox a.close{
			
			text-decoration: none;
            color: #2D2C3B;
		}
	
	</style>

<body>
	<input type="button" name="popBox" value="弹出框" onclick="popBox()">
<div id="popLayer"></div>
<div id="popBox">
    <div class="close">
        <a href="javascript:void(0)" onclick="closeBox()">关闭</a>
    </div>
    <div class="content">我是弹出层</div>
</div>
</body>
	<script>
    /*点击弹出按钮*/
    function popBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "block";
        popLayer.style.display = "block";
    };
 
    /*点击关闭按钮*/
    function closeBox() {
        var popBox = document.getElementById("popBox");
        var popLayer = document.getElementById("popLayer");
        popBox.style.display = "none";
        popLayer.style.display = "none";
    }
	</script>
</html>

讲解下原理
在这里插入图片描述

所谓的弹出框就是在原有的网页基础上添加一个显示框，并把遮盖布（弹出框以外的地方）设置成不同的颜色，然后把遮盖布设置成不可操作，也就完成了弹出框的操作，
首先在css中定义弹出框的样式，讲display设置成none为不可见，遮盖布同理。
然后在点击弹出框时就把弹出框和遮盖布的display值设置成可见，在弹出框的div里面写一个关闭的按钮，当点击按钮关闭时将值在调回去，就形成了我们所见的弹出框