学子周记 Week8

Daisy47199390

于 2021-06-15 11:55:57 发布

阅读量183

点赞数

分类专栏：学习周记

本文链接：https://blog.csdn.net/weixin_47199390/article/details/117920265

版权

学习周记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

学子周记 Week8

1.学习目标
2.学习内容
2.1 对事件做出反应
- 2.2 HTML 事件属性
- 2.3 使用 HTML DOM 来分配事件
3.练习

1.学习目标

掌握DOM事件

2.学习内容

HTML DOM 允许我们通过触发事件来执行代码，比如以下事件：
元素被点击、页面加载完成、输入框被修改……

HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。

2.1 对事件做出反应

我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

onclick=JavaScript

HTML 事件的例子：

当用户点击鼠标时
当网页已加载时
当图像已加载时
当鼠标移动到元素上时
当输入字段被改变时
当提交 HTML 表单时
当用户触发按键时

例1：
当用户在 < h1> 元素上点击时，会改变其内容：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<body>

<h1 onclick="this.innerHTML='Ooops!'">点击文本!</h1>

</body>
</html>

运行前：
运行前1
运行后：
运行后1
例2：
本例从事件处理器调用一个函数：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

<h1 onclick="changetext(this)">点击文本!</h1>

</body>
</html>

2.2 HTML 事件属性

如需向 HTML 元素分配事件，您可以使用事件属性。

例：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button onclick="displayDate()">点这里</button>
<script>
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

运行结果：
运行结果2 在上面的例子中，名为 displayDate 的函数将在按钮被点击时执行。

2.3 使用 HTML DOM 来分配事件

HTML DOM 允许您使用 JavaScript 来向 HTML 元素分配事件：

例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title>
</head>
<head>
</head>
<body>

<p>点击按钮执行 <em>displayDate()</em> 函数.</p>
<button id="myBtn">点这里</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate(){
	document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>

</body>
</html>

运行结果：
运行结果4
在上面的例子中，名为 displayDate 的函数被分配给 id=“myBtn” 的 HTML 元素。

按钮点击时Javascript函数将会被执行。

3.练习

延时提示框

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>延迟提示框</title>
<style>
div{
    float:left;
    margin:10px;}
#div1{
    width:100px;
    height:100px;
    background:#0F3;}
#div2{
    width:400px;
    height:400px;
    background:#900;
    display:none;}
</style>
<script>
window.onload=function(){
    var div1=document.getElementById("div1");
    var div2=document.getElementById("div2");
    var timer=null;

/*  div1.οnmοuseοver=function(){
        clearTimeout(timer);
        div2.style.display='block';
    };
    div1.οnmοuseοut=function(){
        timer=setTimeout(function(){
            div2.style.display='none';},500);
    };
    div2.οnmοuseοver=function(){
        //div2.style.display='block';
        clearTimeout(timer);
    };
    div2.οnmοuseοut=function(){
        timer=setTimeout(function(){
            div2.style.display='none';},500);
    };
*/

    //将以上代码合并
    div1.onmouseout=div2.onmouseout=function(){
        timer=setTimeout(function(){
            div2.style.display='none';},500);
    };      
    div1.onmouseover=div2.onmouseover=function(){
        clearTimeout(timer);
        div2.style.display='block';
    };

}

</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
</body>
</html>

运行结果：

无缝滚动

<!DOCTYPE html>
<html>
 
	<head>
		<meta charset="utf-8">
		<title>无缝滚动</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			#div4 {
				height: 178px;
				width: 798px;
				/*算上边框长宽*/
				background-color: #D3D3D3;
				color: #ADD8E6;
				border: solid 1px black;
				overflow: hidden;
			}
			ul{
				position: absolute;
				margin-left: 0;
				
			}
			li {
				list-style: none;
				height: 100px;
				width: 60px;
				background: #F3F3F3;
				font-size: 50px;
				font-weight: 500;
				margin-top: 30px;
				text-align: center;
				line-height: 100px;
				float: left;
				color: #FFD700;
				border-right: solid 40px red;
				overflow: hidden;
				
			}
		</style>
	</head>
 
	<body>
		<div id="div4">
			<ul>
				<li>1</li>
				<li>2</li>
				<li>3</li>
				<li>4</li>
				
			</ul>
		</div>
		<script type="text/javascript">
			var d = document.getElementById("div4");
			var oUl = d.getElementsByTagName("ul")[0];
			var aLi = oUl.getElementsByTagName("li");
			oUl.style.left=0+"px";
			d.onclick = function() {
				var timer = null;
				timer = setInterval("move()", 30);
				oUl.innerHTML=oUl.innerHTML+oUl.innerHTML;
				oUl.style.width=aLi.length*aLi[0].offsetWidth;
			}
 
			function move() {
				oUl.style.left=parseInt(oUl.style.left)+3+"px";
					if(oUl.offsetLeft<-oUl.offsetWidth/2)
					{
						oUl.style.left=0;
					}
					else if(oUl.offsetLeft>0)
					{
						oUl.style.left=-oUl.offsetWidth/2+'px';
					}
			}
		</script>
	</body>
 
</html>

运行结果：
无缝滚动

Daisy47199390

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
4
评论
学子周记 Week8

学子周记 Week81.学习目标2.学习内容2.1 对事件做出反应2.2 HTML 事件属性2.3 使用 HTML DOM 来分配事件3.练习1.学习目标掌握DOM事件2.学习内容HTML DOM 允许我们通过触发事件来执行代码，比如以下事件：元素被点击、页面加载完成、输入框被修改……HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。2.1 对事件做出反应我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。如需在用户点击某个元素
复制链接

扫一扫