JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)

弹对话框

<script>
window.alert(5 + 6);
alert(5 + 6);
</script><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试实例</title>
<script>
function myFunction()
{alert("Hello World!");
}
</script>
</head><body>
<button onclick="myFunction()">点我</button>
</body>
</html>

确认框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p>点击按钮，显示确认框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){var x;var r=confirm("按下按钮!");if (r==true){x="你按下了\"确定\"按钮!";}else{x="你按下了\"取消\"按钮!";}document.getElementById("demo").innerHTML=x;
}
</script></body>
</html>

提示框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p>点击按钮查看输入的对话框。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){var x;var person=prompt("请输入你的名字","Harry Potter");if (person!=null && person!=""){x="你好 " + person + "! 今天感觉如何?";document.getElementById("demo").innerHTML=x;}
}
</script></body>
</html>

换行

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p>点击按钮在弹窗中使用换行。</p>
<button onclick="myFunction()">点我</button>
<p id="demo"></p>
<script>
function myFunction(){alert("Hello\nHow are you?");
}
</script></body>
</html>

操作HTML元素

如需从 JavaScript 访问某个 HTML 元素，您可以使用 document.getElementById(id) 方法。

请使用 "id" 属性来标识 HTML 元素，并 innerHTML 来获取或插入元素内容：

<!DOCTYPE html>
<html>
<body><p id="demo">我的第一个段落</p><script>
document.getElementById("demo").innerHTML = "段落已修改。";
</script></body>
</html>

写HTML文档

<!DOCTYPE html>
<html>
<body><button onclick="myFunction()">点我</button><script>
function myFunction() {document.write(Date());
}
</script></body>
</html>

写到控制台

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

通过 id 查找 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p id="intro">你好世界!</p>
<p>该实例展示了 <b>getElementById</b> 方法!</p>
<script>
x=document.getElementById("intro");
document.write("<p>文本来自 id 为 intro 段落: " + x.innerHTML + "</p>");
</script></body>
</html>

通过标签名查找 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p>你好世界!</p>
<div id="main">
<p> DOM 是非常有用的。</p>
<p>该实例展示了  <b>getElementsByTagName</b> 方法</p>
</div>
<script>
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
document.write('id="main"元素中的第一个段落为：' + y[0].innerHTML);
</script></body>
</html>

通过类名找到 HTML 元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p class="intro">你好世界!</p>
<p>该实例展示了 <b>getElementsByClassName</b> 方法!</p>
<script>
x=document.getElementsByClassName("intro");
document.write("<p>文本来自 class 为 intro 段落: " + x[0].innerHTML + "</p>");
</script>
<p><b>注意：</b>Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。</p>
</body>
</html>

元素插入内容

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
<p>以上段落通过脚本修改文本。</p></body>
</html>

改变HTML属性

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>阿西吧</title>
</head>
<body><img id="image" src="smiley.gif" width="160" height="120">
<script>
document.getElementById("image").src="landscape.jpg";
</script>
<p>原图片为 smiley.gif,脚本将图片修改为 landscape.jpg</p></body>
</html>

计时

setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
setTimeout() - 在指定的毫秒数后执行指定代码。

setInterval()

第一个参数是函数（function）
第二个参数间隔的毫秒数
clearInterval() 方法用于停止 setInterval() 方法执行的函数代码

实例：实时显示当前时间

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哎西吧</title>
</head>
<body><p>页面上显示时钟：</p>
<p id="demo"></p>
<button onclick="myStopFunction()">停止</button>
<script>
var myVar=setInterval(function(){myTimer()},1000);
function myTimer(){var d=new Date();var t=d.toLocaleTimeString();document.getElementById("demo").innerHTML=t;
}
function myStopFunction(){clearInterval(myVar);
}
</script></body>
</html>

setTimeout() 方法

setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 myVar 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
clearTimeout() 方法用于停止执行setTimeout()方法的函数代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>哎西吧</title>
</head>
<body><p>点击第一个按钮等待3秒后出现"Hello"弹框。</p>
<p>点击第二个按钮来阻止第一个函数运行。（你必须在3秒之前点击它）。</p>
<button onclick="myFunction()">点我</button>
<button onclick="myStopFunction()">停止弹框</button>
<script>
var myVar;
function myFunction(){myVar=setTimeout(function(){alert("Hello")},3000);
}
function myStopFunction(){clearTimeout(myVar);
}
</script></body>
</html>

JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)相关推荐

JS常用函数大全
转载: http://zhangbq168.blog.163.com/blog/static/2373530520086215149426/ 2007年08月05日星期日 15:50 Js常用函数 ...
prototype.js常用函数及其用法
prototype.js常用函数: 函数名解释举例 Element.toggle 交替隐藏或显示 Element.toggle(''div1'',''div2'') Element.h ...
如何操作 Office Open XML 格式文档
摘要: Office Open XML格式文件代替了早期的二进制Office系统文件.本文档向您介绍了包含在一个格式化文档中的组件以及展示这些文件功能的一些场景 . Frank Rice,微软公司适 ...
如何操作 Office Open XML 格式文档(转）
原文地址为: 如何操作 Office Open XML 格式文档(转) 摘要: Office Open XML格式文件代替了早期的二进制Office系统文件.本文档向您介绍了包含在一个格式化文档中的组 ...
R语言使用compareGroups包compareGroups函数生成表统计表、createTable函数创建二元表、并导出结果到文档（doc、csv、xlsx、pdf）
R语言使用compareGroups包compareGroups函数生成表统计表.createTable函数创建二元表.并导出结果到文档(doc.csv.xlsx.pdf) 目录 R语言使用compa ...
layui弹出层：皮肤扩展（文档解读）
layui弹出层:皮肤扩展(文档解读) layui弹出层:样式自定义官方文档:https://layer.layui.com/ 皮肤扩展 · 官方教程: 官方文档:https://layer.lay ...
【MOS】OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1)
[MOS]OCR/Vote disk 维护操作: (添加/删除/替换/移动) (文档 ID 1674859.1) 文档内容目标解决方案准备磁盘 1. 磁盘大小 2. 裸设备或者块设备 ...
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库
JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库 JAVA毕业设计Vue.js音乐播放器设计与实现计算机源码+lw文档+系统+调试部署+数据库本源码技术栈 ...
jquery和js常用函数
jquery函数大全转载 Jquery常用的函数,当作参考工具来用 Attribute: $("p").addClass(css中定义的样式类型); 给某个元素添加样式 $(&qu ...

JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)

弹对话框

确认框

提示框

换行

操作HTML元素

写HTML文档

写到控制台

通过 id 查找 HTML 元素

通过标签名查找 HTML 元素

通过类名找到 HTML 元素

元素插入内容

改变HTML属性

计时

JS 常用函数一(弹对话框、操作HTML元素、写HTML文档、写到控制台、查找元素、元素插入内容、改变HTML属性、计时)相关推荐

最新文章

热门文章