网页文档输出、对话框

最新推荐文章于 2023-07-31 12:48:56 发布

liu_g_d

最新推荐文章于 2023-07-31 12:48:56 发布

阅读量623

点赞数

CC 4.0 BY-SA版权

文章标签： javascript html 前端

本文链接：https://blog.youkuaiyun.com/liu_g_d/article/details/124866072

网页文档输出、对话框

1.1 网页文档输出document.write() ，标签元素输出.innerText .innerHTML .value

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur.</p>
<p>Blanditiis explicabo laboriosam nam nihil quasi!</p>
<p>Deleniti deserunt est et ipsum nam!</p>
<p>Aperiam ea mollitia optio quis tenetur?</p>
<p>Illo ipsum optio quia similique sit.</p>
<label>姓名：</label> <input type="text" id="uname">

<script>
    //将数据直接输入到网页中
    document.write('hello')
    document.writeln("javascript")

    //输出指定的标签元素上（此方法使用最多）  .innerHTML    .innerText
    //代表当前文档的第一个p标签
    let ps = document.getElementsByTagName('p')[0]
    ps.innerHTML = '<strong>文档段落标签</strong>'  //可以显示标签效果
    let p3 = document.getElementsByTagName('p')[2]
    p3.innerText = '<strong>文档段落标签</strong>'  //只能显示文本文字
    let p4 = document.getElementsByTagName('p')[3]
    //'javascript'.fontcolor('red') 其实是字符串<font color="red">javascript</font>
    p4.innerHTML = 'javascript'.fontcolor('red')
    let un = document.getElementById('uname')
    un.value = '请输入姓名'
    un.title = 'aaaaa'

    //控制网页标题
    document.title = Math.PI
</script>
</body>
</html>

1.2 网页对话框输出

artdialog element ui

1.2.1 提示框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>summerlex@126.com</title>
</head>
<body>
<h1>Hello, world!</h1>
<script>
    alert('hello') //提示框
    window.alert('欢迎')
    let s = alert
    s('hello world')
    //s(1 + 2)
</script>
</body>
</html>

1.2.2 确认框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>summerlex@126.com</title>
</head>
<body>
<h1>Hello, world!</h1>
<!--onclick单击事件，鼠标单击才执行-->
<a href="http://www.baidu.com" onclick="return confirm('是否访问百度？')">百度</a>
<p>姓名：李四 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="javascript:void(0)" id="del">删除</a></p>
<script>
    //确认框
    // let msg = confirm('yes')
    // console.log(msg,typeof (msg))
    let del = document.getElementById('del')
    del.onclick = function () {
        if(confirm('是否删除?')){
            let pp = document.getElementsByTagName('p')[0]
            pp.remove()
        }
    }
</script>

</body>
</html>

1.2.3 输入框

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>summerlex@126.com</title>
</head>
<body>
<h1>Hello, world!</h1>
<script>
let age = prompt('请输入你的年龄：',18)
if (age>18){
    alert('欢迎访问')
}else{
    alert('no go to baidu')
    //跳转到百度网址
    location.href = 'http://www.baidu.com'
}
</script>

</body>
</html>