3

【JavaScript】html相关

 3 years ago
source link: https://www.guofei.site/2019/08/25/javascript_html.html
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
neoserver,ios ssh client

【JavaScript】html相关

2019年08月25日

Author: Guofei

文章归类: 语言，文章编号: 17003

版权声明：本文作者是郭飞。转载随意，但需要标明原文链接，并通知本人
原文链接：https://www.guofei.site/2019/08/25/javascript_html.html

Edit

JavaScript 代码嵌入html

3种方法:

  • head中引用
  • head中填入js
  • body中填入js
<html>
<head>
    <script src="test.js"></script> <!--引用js代码-->
    <script>
        <!--填入js代码-->
    </script>
</head>

<body>
<script>
    <!--填入js代码-->
</script>
</body>
</html>

demo

简洁版

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

<button type="button"
onclick="document.getElementById('demo').innerHTML = Date()">

复杂版

<!DOCTYPE html>
<html>
<head>
<script>
// 这一段代码可以放到head/引用/body中，都可以调用
function myFunction() {
    document.getElementById("demo").innerHTML = "段落被更改。";
}
</script>
</head>

<body>

<h1>一张网页</h1>
<p id="demo">一个段落</p>
<button type="button" onclick="myFunction()">试一试</button>

</body>
</html>

几种显示方式

  • 使用 window.alert() 写入警告框
  • 使用 document.write() 写入 HTML 输出（就是整个页面变了）
  • 使用 innerHTML 写入 HTML 元素
  • 使用 console.log() 写入浏览器控制台

html事件

  • onchange HTML 元素已被改变
  • onclick 用户点击了 HTML 元素
  • onmouseover 用户把鼠标移动到 HTML 元素上
  • onmouseout 用户把鼠标移开 HTML 元素
  • onkeydown 用户按下键盘按键
  • onload 浏览器已经完成页面加载

File

其实一知半解

<input type="file" id="file" accept="image/*">

window.onload=function(){
  let ofile=document.getElementById("file");
  file.onchange = function () {
    console.log(this.files[0]);
  }
}
您的支持将鼓励我继续创作！

report

Recommend

About Joyk


Aggregate valuable and interesting links.
Joyk means Joy of geeK