JavaScript 一些基础练习

Posted 2020-08-09

javascript为网页添加动态效果并实现与用户交互的功能。改变颜色以及宽高,隐藏或显示内容,取消设置

<style type="text/css">
    body {
        font-size: 12px;
    }

    #txt {
        height: 200px;
        width: 350px;
        border: #333 solid 1px;
        padding: 5px;
        margin-bottom: 20px;
    }

    p {
        line-height: 18px;
        text-indent: 2em;
    }
</style>

<div id="txt">
    <h5>JavaScript为网页添加动态效果并实现与用户交互的功能。</h5>
    <p>111111111111111111111111111111111</p>
    <p>222222222222222222222222222222222</p>
    <p>333333333333333333333333333333333</p>
</div>
<form>
    <!--当点击相应按钮，执行相应操作，为按钮添加相应事件-->
    <input type="button" value="改变颜色" onClick="changecolor()" >
    <input type="button" value="改变宽高" onClick="changewidth()">
    <input type="button" value="隐藏内容" onClick="hidetext()">
    <input type="button" value="显示内容" onClick="showtext()">
    <input type="button" value="取消设置" onClick="queXiao()">
</form>

<script type="text/javascript">
    //定义"改变颜色"的函数
    function changecolor() {
        var mycolor = document.getElementById(‘txt‘);
        mycolor.style.color = ‘red‘;
        mycolor.style.backgroundColor = ‘gray‘;
    }

    //定义"改变宽高"的函数
    function changewidth() {
        var mywidth = document.getElementById(‘txt‘)
        mywidth.style.width = ‘280px‘
        mywidth.style.height = ‘280px‘
    }

    //定义"隐藏内容"的函数
    function hidetext() {
        var mychar = document.getElementById("txt");
        mychar.style.display = ‘none‘;
    }

    //定义"显示内容"的函数
    function showtext() {
        var mychars = document.getElementById("txt");
        mychars.style.display = ‘block‘;
    }

    //定义"取消设置"的函数
    function queXiao() {
        var queXiao = document.getElementById("txt");
        var qx = confirm("你确定取消吗？");
        if (qx == true) {
            queXiao.removeAttribute("style");
        }
    }
</script>

效果图：