信息管理创新实践第六周周记

最新推荐文章于 2024-07-08 18:01:35 发布

天国旅人

最新推荐文章于 2024-07-08 18:01:35 发布

阅读量99

点赞数 1

分类专栏：信息管理创新实践文章标签： javascript

本文链接：https://blog.csdn.net/weixin_48694265/article/details/115527136

版权

信息管理创新实践专栏收录该内容

10 篇文章 0 订阅

订阅专栏

JavaScript使用

学习内容：

一、JavaScript HTML DOM 事件

使用 HTML DOM 来分配事件

点击标题显示时间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>w1</title>
</head>
<head>
</head>
<body>

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

</body>
</html>

在这里插入图片描述

二、对事件做出反应

点击相应标题，显示文本

<html>
<head>
<meta charset="utf-8">
<title>w2</title>
</head>
<head>
<script>
	var text=["Innovation","practice"];
	function changetext(element){
	var el=document.getElementById(element);
	el.innerHTML=text[0];
}
</script>
</head>
<body>

<h1 onclick="changetext('p1')">翻译创新</h1>
<p id="p1"></p>
<h1 onclick="changetext('p2')">翻译实践</h1>
<p id="p2"></p>
</body>
</html>

在这里插入图片描述

三、JavaScript 表单

输入文本，点击标题，显示输入的文本

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

<input id="numb">
<h1 type="button" onclick="myFunction()">文本</h1>

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

<script>
function myFunction() {
    var text;
    text = document.getElementById("numb").value;
    document.getElementById("demo").innerHTML = text;
}
</script>

</body>
</html>

天国旅人

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
信息管理创新实践第六周周记

JavaScript使用学习内容：一、JavaScript HTML DOM 事件使用 HTML DOM 来分配事件点击标题显示时间<!DOCTYPE html><html><head><meta charset="utf-8"><title>w1</title></head><head></head><body><p>点击标题执行 <em&
复制链接

扫一扫