js用法、显示数据

最新推荐文章于 2022-03-04 16:28:23 发布

丽个啷个江

最新推荐文章于 2022-03-04 16:28:23 发布

阅读量730

点赞数

文章标签： js

本文链接：https://blog.csdn.net/lijiang_shen/article/details/108348561

版权

js学习笔记专栏收录该内容

12 篇文章 0 订阅

订阅专栏

文章目录

js用法

1. js改变html内容

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <h1>JavaScript</h1>
    <p id="demo">改变html元素内容</p>
    <button type="button" onclick="myFunction()">点击这里</button>
    <script>
        function myFunction() {
            x = document.getElementById("demo");
            x.innerHTML = "Hello js!";
        }
    </script>
</body>

</html>

document.getElementById(“some id”)
此方法定义在HTML DOM中。
DOM (Document Object Model)（文档对象模型）:用于访问 HTML 元素的正式 W3C 标准。

2. 改变html图像

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<script>
function changeImage()
{
	element=document.getElementById('myimage')
	if (element.src.match("bulbon"))
	{
		element.src="/images/pic_bulboff.gif";
	}
	else
	{
		element.src="/images/pic_bulbon.gif";
	}
}
</script>
<img id="myimage" onclick="changeImage()" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>
	
</body>
</html>

element.src.match(“bulbon”) 的作用意思是：检索 <img id=“myimage” οnclick=“changeImage()” /src="/images/pic_bulboff.gif" width=“100” height=“180”> 里面 src 属性的值有没有包含 bulbon 这个字符串，如果存在字符串 bulbon，图片 src 更新为 bulboff.gif，若匹配不到 bulbon 字符串，src 则更新为 bulbon.gif

较为简单的写法：

<script>
function changeImage(s){
    s.src = s.src.match('bulboff')?"/images/pic_bulbon.gif":"/images/pic_bulboff.gif";
}
</script>
<img id="myimage" onclick="changeImage(this)" src="/images/pic_bulboff.gif" width="100" height="180">
<p>点击灯泡就可以打开或关闭这盏灯</p>

3. 验证输入

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="F:\my.js"></script>
</head>
<body>
    <h1>js</h1>
    <p>输入</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">点击这里</button>
    <!-- <script>
        function myFunction(){
        var x  = document.getElementById("demo").value;
        if(x == "" || isNaN(x)){
            alert('不是数字');
        }
    }
    </script> -->
</body>
</html>

如果要在生产环境中使用，需要严格判断，如果输入的空格，或者连续空格 isNaN 是判别不出来的。可以添加正则来判断：
isNaN判断不了空格
if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
alert(“不是数字”);
}

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
	
<h1>我的第一段 JavaScript</h1>
<p>请输入数字。如果输入值不是数字，浏览器会弹出提示框。</p>
<input id="demo" type="text">
<script>
function myFunction()
{
	var x=document.getElementById("demo").value;
	if(isNaN(x)||x.replace(/(^\s*)|(\s*$)/g,"")==""){
		alert("不是数字");
	}
}
</script>
<button type="button" onclick="myFunction()">点击这里</button>
	
</body>
</html>

4. 引入外部js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>js</h1>
    <p>输入</p>
    <input id="demo" type="text">
    <button type="button" onclick="myFunction()">点击这里</button>
    <script src="F:\my.js"></script>
    <!-- <script>
        function myFunction(){
        var x  = document.getElementById("demo").value;
        if(x == "" || isNaN(x)){
            alert('不是数字');
        }
    }
    </script> -->
</body>
</html>

my.js代码如下:

 function myFunction(){
        var x  = document.getElementById("demo").value;
        if(x == "" || isNaN(x)){
            alert('不是数字');
        }
    }

注意：外部脚本不能包含 < script> 标签

5. HTML 输出流中使用 document.write

相当于添加在原有html代码中添加一串html代码。而如果在文档加载后使用（如使用函数），会覆盖整个文档。

使用函数来执行document.write代码如下：

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
</head>
<body>
<p >
您只能在 HTML 输出流中使用 <strong>document.write</strong>。
如果您在文档已加载后使用它（比如在函数中），会覆盖整个文档。
</p>
<button type="button" onclick="myfunction()">点击这里</button>
<script>
function myfunction(){
    document.write("使用函数来执行doucment.write，即在文档加载后再执行这个操作，会实现文档覆盖");
}
document.write("<h1>这是一个标题</h1>");
document.write("<p>这是一个段落。</p>");
</script>
</body>
</html>

js可以通过4种方式来显示数据

1. window.alert() 弹框

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个页面</h1>
<p>我的第一个段落。</p>

<script>
window.alert(5 + 6);
</script>

</body>
</html>

2.innerHTML 获取或修改元素内容

操作HTML元素，必须要先获取HTML元素，可以使用document.getElementById(“id”)的方法来访问某个有"id"属性标识的HTML元素。

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p id="demo">我的第一个段落</p>

<script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script>

</body>
</html>

去掉innerHTML后面的内容，可以获取到“我的第一个段落”

3.document.write(Date())

直接写在HTML文档

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<p>我的第一个段落。</p>

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

</body>
</html>

如果文档已经加载完成，在执行该方法，则整个HTML页面将被覆盖。

4. console.log()

输出到控制台

<!DOCTYPE html>
<html>
<body>

<h1>我的第一个 Web 页面</h1>

<script>
a = 5;
b = 6;
c = a + b;
console.log(c);
</script>

</body>
</html>

HTML 中的脚本必须位于 < script> 与 < /script> 标签之间。
脚本可被放置在 HTML 页面的 < body> 和 < head> 部分中，或者同时存在于两个部分中。
如需在 HTML 页面中插入 JavaScript，请使用 < script> 标签。
< script> 和 < /script> 会告诉 JavaScript 在何处开始和结束。
浏览器会解释并执行位于 < script> 和 < /script>之间的 JavaScript 代码
老旧的实例可能会在 < script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
通常的做法是把函数放入 < head> 部分中，或者放在页面底部。这样就可以把它们安置到同一处位置，不会干扰页面的内容。
在标签中填写 onclick 事件调用函数时，不是 οnclick=函数名，而是 οnclick=函数名+()

丽个啷个江

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
js用法、显示数据

js改变html内容<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title></head><body> .
复制链接

扫一扫