JS--代码整理

最新推荐文章于 2025-06-22 16:10:08 发布

@Herry

最新推荐文章于 2025-06-22 16:10:08 发布

阅读量401

点赞数

CC 4.0 BY-SA版权

分类专栏： # 【JavaScript】

本文链接：https://blog.youkuaiyun.com/aimin_com/article/details/89370601

【JavaScript】专栏收录该内容

6 篇文章

订阅专栏

本文详细介绍了如何使用JavaScript操作HTML文档，包括修改输出流、元素和属性，响应DOM事件，以及利用Window对象进行页面控制。同时，文章还探讨了不同类型的提示框应用，以及如何运用setTimeout和clearTimeout进行时间控制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

此篇博客是小编按照官网的学习进行总结的，过往的知识点要重新进行总结一遍，发现看完视频后官网直接给出了总结的知识点。

HTML里面的输出流

1） 改变HTML输出流，但是此代码不可在文档加载后使用，这会覆盖文档：

<script>
document.write(Date());
</script>

2) 改变HTML元素，我们利用ID的方法

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

3）改变HTML属性方法

<img id="image" src="smiley.gif">

<script>
document.getElementById("image").src="landscape.jpg";
</script>

DOM 事件实例:鼠标行动

<div onmouseover="mOver(this)" onmuouseout="mOut(this)" style="background-color:red; width:130px; height:20px;padding:20px;color:000000;">把鼠标移动到上面</div>

<script>
function mOver(obj)
{obj.innerHTML="谢谢"
}

function mOut(obj)
{
obj.innerHTML="把鼠标移动到上面"
}
</script>

Windows获取值域

1） 获取浏览器内部宽度和高度：
<script>
var w=window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var h=window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

x=document.getElementById("demo");
x.innerHTML="浏览器的内部窗口宽度：" + w + "，高度：" + h + "。"
</script>

Windows返回值(Location)

	1) 返回当前页面URL
	<script>
		document.write(location.href);
	</script>
	
	2) 返回当前属性URL
	<script>
		document.write(location.href);
	</script>

	3）网页中跳转到另一个网页
	<script>
	function newDoc()
	  {
	  window.location.assign("http://www.w3school.com.cn")
	  }
	</script>
	
	<body>
		<input type="button" value="加载新文档" onclick="newDoc()">
	</body>

**其他返回值：**
	document.write(location.hostname)  //返回 web 主机的域名
	document.write(location.pathname   //返回当前页面的路径和文件名
	document.write(location.port)     //返回 web 主机的端口 （80 或 443）
	document.write(location.protocol) //返回所使用的 web 协议（http:// 或 https://）

	 //上一页
	<script>
	function goBack()
	  {
	  window.history.back()
	  }
	</script>
	<body>
		<input type="button" value="Back" onclick="goBack()">
	</body>


  	//下一页
 	 window.history.forward()

三种提示框：警告、确认、提示(PopupAlert)

	//警告框： 出现后需按确定按钮才可执行。
	alert("文本"）;
	
	//确认框：学点击确定或者取消可执行
	confirm（"文本");
	
	//提示框：出现后需输入某些值然后确定/取消才可执行
	prompt("文本","默认值");

时间问题：setTimeout / clearTimeout

7.1 setTimeout(): var t=setTimeout(“javascript语句”,毫秒) ,其中js语句就是要显示的内容
7.2 clearTimeout(): clearTimeout(setTimeout_variable)

	1）.  倒计时5S弹出警告框方法：
	function timedMsg()
	{
	var t=setTimeout("alert('5 秒！')",5000)
	}


	2）.  从0开始的无限循环计时事件
	 function timedCount()
	{
	document.getElementById('txt').value=c
	c=c+1
	t=setTimeout("timedCount()",1000)
	}
	
	
	3）.  停止计时
	function stopCount()
	{
	c=0;
	setTimeout("document.getElementById('txt').value=0",0);
	clearTimeout(t);
	}
	
	
	4）.  显示当前时间并开始走
	function startTime()
	{
	var today=new Date()
	var h=today.getHours()
	var m=today.getMinutes()
	var s=today.getSeconds()
	// add a zero in front of numbers<10
	m=checkTime(m)
	s=checkTime(s)
	document.getElementById('txt').innerHTML=h+":"+m+":"+s
	t=setTimeout('startTime()',500)
	}
	
	function checkTime(i)
	{
	if (i<10) 
	  {i="0" + i}
	  return i
	}