Blogger Information
Blog 42
fans 3
comment 2
visits 40636
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
javascript 案例演示
虞者自愚的博客
Original
706 people have browsed it

javascript 

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>美女相册</title>
</head>
<style type="text/css">
    body {
        background:url('img/bg.jpg');
    }
    .box {
        width:1100px;
        margin:35px auto;
        text-align:center;
    }
    .left {
        width:550px;
        float:left;
        overflow:hidden;
        background-color:rgba(237, 237, 237, 0.4);
        border:1px solid #f9f9f9;
        /* box-shadow:0 0 1px 1px #d1d1d1; */
        border-radius:3%;

    }
    .left ul {
        height:700px;
        margin-bottom:15px;
    }
    .left ul li {
        float:left;
        width:150px;
        list-style: none;
        padding:10px 1px;

    }
    .left ul li img {
        width:140px;
        border-radius:3%;
        border:2px solid rgba(237, 237, 237, 0.8);
    }
    .right {
        width:500px;
        margin:auto;
        float:right;
    }
    .right img {
        width:472px;
        border-radius:3%;
        margin-top:3px;
        border:10px solid rgba(237, 237, 237, 0.8);
    }
</style>
<body>
<div class="box">
    <div class="left">
        <ul>
            <li><a href="img/11.jpg" onclick="changePic(this);return false" title="美腿私房写真1"><img src="img/11.jpg"  /></a></li>
            <li><a href="img/12.jpg" onclick="changePic(this);return false" title="美腿私房写真2"><img src="img/12.jpg"  /></a></li>
            <li><a href="img/13.jpg" onclick="changePic(this);return false" title="美腿私房写真3"><img src="img/13.jpg"  /></a></li>
            <li><a href="img/14.jpg" onclick="changePic(this);return false" title="美腿私房写真4"><img src="img/14.jpg"  /></a></li>
            <li><a href="img/15.jpg" onclick="changePic(this);return false" title="美腿私房写真5"><img src="img/15.jpg"  /></a></li>
            <li><a href="img/16.jpg" onclick="changePic(this);return false" title="美腿私房写真6"><img src="img/16.jpg"  /></a></li>
            <li><a href="img/17.jpg" onclick="changePic(this);return false" title="美腿私房写真7"><img src="img/17.jpg" " /></a></li>
            <li><a href="img/18.jpg" onclick="changePic(this);return false" title="美腿私房写真8"><img src="img/18.jpg"  /></a></li>
            <li><a href="img/19.jpg" onclick="changePic(this);return false" title="美腿私房写真9"><img src="img/19.jpg"  /></a></li>
        </ul>

    </div>
    <div class="right">
        <img src="img/11.jpg" alt="" id="img"/>
        <p id='info'></p>
    </div>
</div>
<script type="text/javascript">
function changePic(pic){
    var picUrl = pic.href
    var picInfo = pic.title

    var img = document.getElementById('img')
    var p = document.getElementById('info')

    img.src = picUrl
    p.innerHTML = picInfo



}
</script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例


实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8" />
    <title>计算</title>
    <style type="text/css">
        .box {
            width:500px;
            height:200px;
            background-color:#e2e2e2;
            border:1px solid #d6d6d6;
            border-radius:2% ;
            box-shadow:2px 2px 2px 2px  #bdbdbd;
            margin:20px auto;
            text-align:center;
        }


    </style>
</head>
<body>
    <div class="box">
    <h2>计算器</h2>
    <form>
        <table>
            <tr>
                <td><input type="text" name="num1" placeholder="数字一" /></td>
                <td><select name="caozuo">
                    <option value="null">选择操作</option>
                    <option value="jia">+</option>
                    <option value="jian">-</option>
                    <option value="cheng">*</option>
                    <option value="chu">/</option>
                </select></td>
                <td><input type="text" name="num2" placeholder="数字二" /></td>
                <td><button type="jsuan">计算</button></td>
            </tr>
            <tr>
                <td colspan="2">结果</td>
                <td colspan="2"><h3 id="jieguo"></h3></td>

            </tr>
        </table>
    </form>
    </div>
    <script type="text/javascript">
         var num1 = document.getElementsByName('num1')[0]
         var num2 = document.getElementsByName('num2')[0]
         var cz = document.getElementsByName('caozuo')[0]

         var jsuan = document.getElementsByTagName('button')[0]
         var jieguo = document.getElementById('jieguo')

         jsuan.onclick = function()
         {

            if (num1.value.length == 0){
                alert('第一个数不能为空')
                num1.focus()
                return false
            } else if (isNaN(num1.value)){
                alert('只能为数字')
                num1.focus()
                return false
            } else if (num2.value.length == 0){
                alert('第二个数字不能为空')
                num2.focus()
                return false
            } else if (isNaN(num2.value)){
                alert('只能为数字')
                num2.focus()
                return false
            } else {
               var data1 = parseFloat(num1.value)
               var data2 = parseFloat(num2.value)
            }

            var caozuo = cz.value
            var temp = 0
            var flag = ''
            var result = ''
            switch (caozuo){
                case 'null':
                alert('请选择操作类型')
                caozuo.focus()
                return false
                case 'jia':
                flag = '+'
                temp = data1 + data2
                break
                case 'jian':
                flag = '-'
                temp = data1 - data2
                break
                case 'cheng':
                flag = '*'
                temp = data1 * data2
                break
                case 'chu':
                flag = '/'
                if (data2 == 0){
                    alert('被除数不能为0,请重新输入')
                    num2.focus()
                    return false
                }else{
                    temp = data1 / data2
                }
                break
            }
            jieguo.innerHTML = data1+' '+ flag+' '+ data2+' = '+temp
         }


    </script>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

IMG_20180330_130720.jpg

不是很熟悉,需要多练习

Correction status:qualified

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post