- html方法
<h1 id = "msg"> Hello Word, Goog Bye!</h1>
<script>
function hideMsg() {
// 将要隐藏的字体直接置为空字符串
document.getElementById("msg").innerHTML = "";
}
// 当页面加载出来的时候就开始执行
$(document).ready(function() {
$(function () {
// 当页面页面加载出来两秒之后开始执行setInterval函数
setInterval(hideMsg, 2000);
});
});
</script>
注: 可以参考一下setInterval的详细用法 https://www.runoob.com/jsref/met-win-setinterval.html
- jquery方法
<h1 class= "msg"> Hello World, Good Bye!</h1>
<script>
$(document).ready(function() {
$(function () {
// 设置成3秒钟淡出
$(".msg").fadeOut(3000);
});
});
</script>
注: 可以参考一下jquery中淡入淡出的详细用法 http://www.w3school.com.cn/jquery/jquery_fade.asp
总结：
1. 从代码看jquery方法比html的方法看起来更加简洁
2. 从效果上看，jquery是淡出的效果(渐渐消失)， 而html是直接消失， 所以jquery的效果看起来更舒服
3. 格式上面两个种方法都可以修改为按钮的形式，点击按钮执行函数
4. 要注意html中是<h1 id = "msg"></h1>, jquery中的是<h1 class= "msg"></h1>
