【JavaScript(demo)】_js demo-CSDN博客

本文链接：https://blog.csdn.net/mycsdn_first/article/details/124825755

一、常用的全局方法

 1.常用的全局方法
			 1.1   大部分都省略了window对象
			window.alert('你好');
			 1.2   var声明的全局变量，也可以通过window访问
			var a = 12;
			b = 777;
			alert(b);
			 alert(window.a);
			1.3   id命名的元素可以直接访问//innertext元素的文字内容
			alert(window.js_innertext.innerText);
			1.4    定时器也是全局方法 
			 var num = 1;
			 window.setInterval(function(){
				num++;
			 	console.log(num);
		   },1000)

二、screen的应用


		<script type="text/javascript">
	    1.屏幕的宽
		document.write("<br/>屏幕的宽"+screen.width);
		document.write("<br/>屏幕的高"+screen.height);
	    移除状态的高
		document.write("<br/>可用屏幕的宽"+screen.availWidth);
		document.write("<br/>可用屏幕的高"+screen.availHeight);
		document.write("<br/>可视屏幕的宽"+window.innerWidth);
		document.write("<br/>可视屏幕的高"+window.innerHeight);
		 单词：document（文档）、write（写入）、screen（屏幕）、width（宽）、height（高）

三、history历史记录的使用

<a href="demo2_screen.html">需要跳转的页面</a>
		<button type="button" onclick="goForward()">前进</button>//ps：onclick后面需要输入底下function的值！
		<button type="button" onclick="goBack()">返回</button>
		<script type="text/javascript">
		function goForward(){
			// 实现前进，浏览器记录向前一步
			history.go(1);
		}
		function goBack(){
			// back  后退
			history.go(-1);
		}

四、demo_location地址栏的解析

function reload(){
				location.reload()//普通刷新
				
			}
			// 解析地址栏信息
			document.write("</br>地址信息"+location.href)
			// 常见的协议： file://   http://    ftp://  mail://
			
			document.write("</br>协议"+location.protocol)
			
			document.write("</br>域名"+location.hostname)
			document.write("</br>路径"+location.pathname)
			document.write("</br>端口号"+location.port)
			document.write("</br>查询"+location.search)
			document.write("</br>哈希"+location.hash)

五、Navigator浏览器的解析

// 全局方法： alert 警告  confirm 确认  prompt 输入框 setInterval 间隔 setItimeout 延迟
			// history back(返回) forward（前进） go（跳转）
			// location reload刷新  href 地址 protocol 协议 hostname域名  oathname 路径 port 
            端口号 search 查询 hash 锚点
			// screen width 宽   height 高  availHeight 可用高  availwidth 可用宽
			// navigator  /*最重要的UA  浏览器的头信息 通常判断是什么浏览器
			var ua = navigator.userAgent;
			document.write("</br>"+ua)
			if(ua.includes("Mobile")){
				document.write("</br手机浏览器")
			}else{
				document.write("</br>PC浏览器")
			}

六、open(打开新窗口和关闭新窗口)

            var win;
			// width 打开窗口的宽
			// height 打开窗口的高
			// top 距离屏幕左上角的水平距离
			// left 与屏幕左上角角的水平距离
			 window.open（url，name，feature）
			// url 打开的地址，name 命令（窗口通信与查找）featrue特性，
			function openWin() {
				win = window.open("https://www.***.com", "***",       "width=400,height=400,top=200,left=250")
			}

			 function closeWin() {
				win.close()
			}

七、win事件（这个是可以先加载完body里面的内容在加载js的脚本命令）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			window.onload = function(){
				alert(window.myh.innerText);
			}
		</script>
	</head>
	<body>
		<h1 id="myh">win常用事件</h1>
		<p>onload，onscroll，onresize</p>
	</body>
</html>

八、scroll（滚动条事件）

    <body>
		<p>我是</p>
		<p>我是</p>
		<p>我是</p>
	 <script type="text/javascript">
	 	window.onscroll = function(){
			console.log('页面滚动了');
			var t = document.documentElement.scrollTop
			// 页面垂直滚动的距离  document 文档 documentElement 根节点 
			// scrollTop 垂直滚动距离 scrollLeft 水平滚动
			console.log(t);
		}
	 </script>
	</body>

九、resize（窗口发生变化能监听到）

            <h1>resize</h1>
			<script>
				// 当窗口发生大小变化时候，向页面写入窗口可视区域的宽高
				window.onresize = function(){
					console.log("窗口的大小发生了变化");
					console.log("宽："+window.innerWidth+",高:"+window.innerHeight)
				console.log("宽：1920，高：1080")
				
				}
				
			</script>

十、字符串编码（中文转字符串（utf-8）形式）

        <h1>字符串编码</h1>
		<p>utf-8，gb2312，xxxx</p>
		<script>
			// encodeURI默认不转义标点符号
			// encodeURIComponent 会转义标点符号
			// var str = '我爱你';
			// console.log(window.encodeURI(str));
			// console.log(decodeURI('%E6%88%91%E7%88%B1%E4%BD%A0'))
			var str = ",!"
			console.log(window.encodeURIComponent(str))
		</script>

十一、图片预览添加

        <h1>图片预览</h1>
		<input type="file" id="myf" onchange="preImg()"/>
		<img src="" width="50%" id="mypic">
		<script>
			function preImg(){
				// 拿到图片文件
				files选择的文件列表files[0] 只取列表的第0个
				var file = myf.files[0];
				// 把图片文件转换为base64字符串
				// create创建ovject对象URL字符串编码
				var src = window.URL.createObjectURL(file);
				// 定义图片的src
				mypic.src = src
			}
			
			
		</script>