JS基础笔记之JS主要用途

最新推荐文章于 2023-09-13 17:31:51 发布

programmer_trip

最新推荐文章于 2023-09-13 17:31:51 发布

阅读量486

点赞数

分类专栏： JS基础笔记文章标签： JS主要用途 html js笔记 javascript

本文链接：https://blog.csdn.net/programmer_trip/article/details/103328552

版权

JS基础笔记专栏收录该内容

5 篇文章 1 订阅

订阅专栏

JS基础笔记之JS主要用途

js的主要用途介绍
1、写入HTML输出
2、对事件做出反应
3、改变HTML内容
4、改变HTML图像
5、改变HTML样式
6、验证输入
代码实践：
1、写入HTML输出

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</heaad>
<body>
<h1>JS输出HTML内容</h1>
<script>
   document.write("<h2>我是JS输出的内容</h2>")
</script>
</body>
</html>

浏览器运行该代码后，会显示h2标签中写的内容，实现了html代码内容的输出；
效果图
在这里插入图片描述
2、对事件做出反应

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</heaad>
<body>
<button type="button" οnclick="alert('你好！')">JS的按钮事件</button>
</body>
</html>

效果图
在这里插入图片描述
3、改变HTML内容

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</heaad>
<body>
<p id="demo">需要改变的HTML内容</p>
<script>
function myFunction()
{
    x=document.getElementById("demo");
    x.innerHTML="hello world!";
}
</script>
<button type="button" οnclick="myFunction()">JS改变HTML内容</button>
</body>
</html>

效果图（左图为点击前，右图为点击后）
在这里插入图片描述
4、改变HTML图像

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</heaad>
<body>
<script>
     function changeImg() {
     tupian = document.getElementById("myimg");
     if (tupian.src.match("on")) {// 判断点击图片的src字符串中是否存在"on"字符串，有则更换另外一张图
           tupian.src="D:/Documents/Desktop/light_off.jpg"
     } else {
           tupian.src="D:/Documents/Desktop/light_on.jpg"
     }
                                }
</script>
<img id="myimg" οnclick="changeImg()" src="D:/Documents/Desktop/light_on.jpg"/>
</body>
</html>

效果图（左图为点击前，右图为点击后）
在这里插入图片描述
5、改变HTML样式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</heaad>
<body>
<script>
function changeStyle()
 {
    x=document.getElementById("demo2");
    x.style.color="red";
}
</script>
<p id="demo2">需要改变的HTML样式</p>
<button type="button" οnclick="changeStyle()">改变HTML样式按钮</button>
</body>
</html>

效果图（左图为点击前，右图为点击后）
在这里插入图片描述
6、验证输入

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</heaad>
<body>
<script>
function toVerify()
 {
    x=document.getElementById("demo3");
  if(x=="" || isNaN(x)){
  alert("您输入的不是一个数字，请重新输入");
}
</script>
<input type="text" id="demo3"/>
<button type="button" οnclick="toVerify()">JS验证输入按钮</button>
</body>
</html>

效果图（第一张图为未输入状态下，点击按钮时，弹出警示框，第二张图为输入字符串，判断不是数字因此弹出警示框，第三张图为输入数字，未弹出警示框）
在这里插入图片描述

programmer_trip

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS基础笔记之JS主要用途

JS基础笔记之JS主要用途js的主要用途介绍1、写入HTML输出2、对事件做出反应3、改变HTML内容4、改变HTML图像5、改变HTML样式6、验证输入代码实践：1、写入HTML输出<!DOCTYPE html><html><head><meta charset="UTF-8"><title></tit...
复制链接

扫一扫

专栏目录