HTML+JavaScript+Css NOTE：1

最新推荐文章于 2024-08-11 18:40:36 发布

•Banana•

最新推荐文章于 2024-08-11 18:40:36 发布

阅读量229

点赞数

文章标签： javascript html css

本文链接：https://blog.csdn.net/qq_45853400/article/details/121185218

版权

1.按钮操作

1.1实时显示时间

<p id="demo">这个地方马上就要变成时间了</p>
<button type="button" onclick="document.getElementById('demo').innerHTML = Date()">
        点击这里来显示日期和时间
</button>

1.2内容变化

<p id="demo">这个地方马上就要变化内容了</p>
<button type="button" onclick='document.getElementById("demo").innerHTML = "Hello JavaScript!"'>
        点击我变化内容
</button>

1.3.变化内容

<p id="demo">这个地方马上就要变化大小了</p>
<button type="button" onclick="document.getElementById('demo').style.fontSize='35px'">
        点击变大小
</button>

1.4.隐藏内容与显示内容

<p id="demo">XXXXXXXXXXX</p>
<button type="button" onclick="document.getElementById('demo').style.display='none'">
        点击隐藏内容
</button>
<button type="button" onclick="document.getElementById('demo').style.display='block'">
        点击显示内容
</button>

1.5.变化图片

<button onclick="document.getElementById('myImage').src='picture1.jpg'">变化</button>
<button onclick="document.getElementById('myImage').src='picture2.jpg'">恢复</button>
<br/>
<img id="myImage" border="0" src="picture2.jpg" style="text-align:center;">

1.6.JavaScript函数变化内容

1.script在head中

<html>
<head>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML = "段落已被更改。";
        }
    </script>
</head>
<body>
    <p id="demo">变化内容</p>
    <button type="button" onclick="myFunction()">点击用函数变化内容</button>
</body>
</html>

2.script在body中

<html>
<body> 
    <h1>A Web Page</h1>
    <p id="demo">一个段落</p>
    <button type="button" onclick="myFunction()">试一试</button>
    <script>
        function myFunction() {
           document.getElementById("demo").innerHTML = "段落被更改。";    
        }
    </script>
</body>
</html>

•Banana•

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
HTML+JavaScript+Css NOTE：1

1.按钮操作目录1.按钮操作1.1实时显示时间<p id="demo">这个地方马上就要变成时间了</p><button type="button" onclick="document.getElementById('demo').innerHTML = Date()"> 点击这里来显示日期和时间</button>1.2内容变化<p id="demo">这个地方马上就要变化内容了</p&gt..
复制链接

扫一扫