第六周周记

_PiPi_

于 2021-04-08 17:51:54 发布

阅读量67

点赞数

文章标签： js dom

本文链接：https://blog.csdn.net/YX010831/article/details/115524739

版权

第六周周记

知识点复习
代码的实现

知识点复习

1.JavaScript HTML DOM 事件
2.使用 HTML DOM 来分配事件
3.JavaScript 表单

代码的实现

1.从事件处理器中调用一个函数

<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="Ooops!";
}
</script>
</head>
<body>

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

</body>
</html>

2.向 button 元素分配 onclick 事件
名为 displayDate 的函数将在按钮被点击时执行：

<html>
<head> 
<meta charset="utf-8"> 
</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>

3.简易背单词程序

<html>
<head>
<meta charset="utf-8">
</head>
<head>
<script>
function changetext(id){
	id.innerHTML="happy";
}
function changetext2(id){
	id.innerHTML="well";
}

</script>
</head>
<body>

<h1 onclick="changetext(appear)">翻译1</h1>
	<p id="appear">
	</p>
<h1 onclick="changetext2(appear2)">翻译2</h1>
	<p id="appear2">
	</p>
</body>
</html>

4.简易英语词典

<html>
<head>
<meta charset="utf-8">
</head>
<body>

<h1>简易英语词典</h1>

<p>请输入英语单词：</p>

<input id="numb">

<button type="button" onclick="myFunction()">提交</button>

<p id="demo"></p>

<script>
function myFunction() {
    var x, text;

    // 获取 id="numb" 的值
    x = document.getElementById("numb").value;

   
   
    document.getElementById("demo").innerHTML = x;
}
</script>

</body>
</html>

_PiPi_

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
第六周周记

第六周周记知识点复习代码的实现知识点复习1.JavaScript HTML DOM 事件2.使用 HTML DOM 来分配事件3.JavaScript 表单代码的实现1.从事件处理器中调用一个函数<html><head><meta charset="utf-8"></head><head><script>function changetext(id){ id.innerHTML="Ooops!";}&lt
复制链接

扫一扫