javascript入门及进阶之综合实例_js 进阶综合案例-优快云博客

本文链接：https://blog.youkuaiyun.com/apollo_miracle/article/details/82119250

博客围绕JavaScript展开，包含网页换肤和打印名片两个实例，给出了相应的HTML代码，以及CSS文件夹下不同样式文件的代码，还提及了打印名片所需图片，最后提到JavaScript入门及进阶的查漏补缺。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

网页换肤

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>网页换肤</title>
    <link rel="stylesheet" href="css/skin02.css" id="link01">
    <script>
        window.onload = function(){
            var oLink = document.getElementById('link01');
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');

            oBtn01.onclick = function(){
                oLink.href = 'css/skin01.css';
            }

            oBtn02.onclick = function(){
                oLink.href = 'css/skin02.css';
            }
        }
    </script>
</head>
<body>
    <h1>网页标题</h1>
    <input type="button" value="皮肤一" id="btn01">
    <input type="button" value="皮肤二" id="btn02">
</body>
</html>

css 文件夹下的 skin01.css 代码：

body{
    background:#ddd;
}

input{
    width:200px;
    height:50px;
    background: pink;
    border:0px;
    /* 设置圆角 */
    border-radius:25px;
    font-size:20px;
}

css 文件夹下的 skin02.css 代码：

body{
    background:green;
}

input{
    width:200px;
    height:50px;
    background: gold;
    border:0px;
    font-size:20px;
}

打印名片

html 代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" type="text/css" href="css/main02.css">
    <script type="text/javascript">      
        window.onload = function(){
            var oInput01 = document.getElementById('input01'),
            oInput02 = document.getElementById('input02'),
            oInput03 = document.getElementById('input03'),
            oInput04 = document.getElementById('input04'),
            oInput05 = document.getElementById('input05'),
            oInput06 = document.getElementById('input06'),
            oInput07 = document.getElementById('input07'),
            oBtn = document.getElementById('setcard'),
            oCard = document.getElementById('card_wrap');

            oBtn.onclick = function(){
                // 获取input输入框的value属性值
                var sVal01 = oInput01.value,
                sVal02 = oInput02.value,
                sVal03 = oInput03.value,
                sVal04 = oInput04.value,
                sVal05 = oInput05.value,
                sVal06 = oInput06.value,
                sVal07 = oInput07.value;

                // 判断输入框是否为空
                if(sVal01==''||sVal02==''||sVal03==''||sVal04==''||sVal05==''||sVal06==''){
                    alert('输入框不能为空！');
                    return; // 在这一句结束函数的运行
                }

                // 拼接名片的机构
                var sTr = '<div class="p01">'+ sVal01 +'<em>'+ sVal02 +'</em></div>'
                    +'<div class="p02">'                    
                        +'<p class="company">'+ sVal03 +'</p>'
                        +'<p>手机：'+ sVal04 +'</p>'
                        +'<p>email：'+ sVal05 +'</p>'
                        +'<p>地址：'+ sVal06 +'</p>'
                    +'</div>';

                oCard.innerHTML = sTr;
                
                // 改变名片的风格
                if(sVal07==0)
                {
                    oCard.className = 'idcard01';
                }
                else if(sVal07==1)
                {
                    oCard.className = 'idcard02';
                }
                else{
                    oCard.className = 'idcard03';
                }  
            }
        }
    </script>
</head>
<body>
    <div class="set_con">
        <div class="left_set">
            <label>姓名：</label>
            <input type="text" id="input01">
            <label>职位：</label>
            <input type="text" id="input02">
            <label>公司名称：</label>
            <input type="text" id="input03">
            <label>手机：</label>
            <input type="text" id="input04">
            <label>email：</label>
            <input type="text" id="input05">
            <label>地址：</label>
            <input type="text" id="input06">
            <label>风格：</label>
            <select id="input07">
                <option value="0">风格一</option>
                <option value="1">风格二</option>
                <option value="2">风格三</option>
            </select>
            <input type="button" value="设 置" class="setbtn" id="setcard">
        </div>
        <div class="right_show">
            <div class="idcard01" id="card_wrap">
                <div class="p01">张大山<em>产品经理</em></div>
                <div class="p02">                    
                    <p class="company">银河科技信息技术有限公司</p>
                    <p>手机：1808888888</p>
                    <p>email：dasan@126.com</p>
                    <p>地址：中关村银河大厦B座2603</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

css 文件夹下 main02.css 的代码：

.set_con{
    width:900px;
    height:400px;
    border:1px solid #666;
    margin:50px auto 0;
}

.left_set{
    width:299px;
    float:left;
    height:380px;
    border-right:1px solid #666;
    padding-top:20px;
}

.left_set label{
    float:left;
    width:80px;
    height:30px;
    line-height:30px;
    text-align:left;
    text-indent:20px;
    margin-top:10px;
    font-size:12px;
}

.left_set input,.left_set select{
    padding:0px;
    width:198px;
    height:30px;
    border: 1px solid #999;
    float:left;
    margin-top:10px;
    text-indent:10px;
    outline:none;
    border-radius:5px;
    background:#fff;
}

.left_set select{
    height:32px;
}

.left_set .setbtn{
    width:99px;
    height:40px;
    border:0px;
    background:#0181cc;
    color:#fff;
    text-indent:0px;
    margin-left:80px;
    font-size:16px;
    margin-top:20px
}

.right_show{
    width:600px;
    height:400px;
    float:left;
    overflow:auto;
}

.idcard01,.idcard02,.idcard03{
    width:450px;
    height:270px;
    border: 1px solid #ddd;
    background:url(../images/bg01.jpg) no-repeat;
    margin:60px auto 0;
    position:relative;
}

.idcard02{
    background:url(../images/bg02.jpg) no-repeat;
}

.idcard03{
    background:url(../images/bg03.jpg) no-repeat;
}

.idcard01 .p01,.idcard02 .p01,.idcard03 .p01{
    position:absolute;
    right:40px;
    top:123px;
    font-size:22px;
    font-weight:bold;
    color:#666;
}

.idcard02 .p01{
    right:300px;
    top:200px;
}

.idcard03 .p01{
    right:auto;
    left:217px;
    top:149px;
}

.idcard01 .p01 em,.idcard02 .p01 em,.idcard03 .p01 em{
    font-size:14px;
    font-style:normal;
    font-weight:normal;
    margin-left:10px;
    color:#666;
}

.idcard01 .p02,.idcard02 .p02,.idcard03 .p02{
    position:absolute;
    right:40px;
    top:160px;   
}

.idcard03 .p02{
    right:auto;
    left:217px;
    top: 180px;
}

.idcard01 .p02 p,.idcard02 .p02 p,.idcard03 .p02 p{
    text-align:right;
    font-size:12px;
    line-height:24px;
    margin:0px;
    color:#666;
}

.idcard02 .p02 p,.idcard03 .p02 p{
    text-align:left;
}

.idcard03 .p02 p{
    line-height:18px;
}

.idcard01 .p02 .company,.idcard02 .p02 .company,.idcard03 .p02 .company{
    font-size:14px;
    font-weight:bold;
}

所需图片：