JS学习笔记--仿手机发送内容交互

学习JS笔记----记录上课中学习的知识点，分享下老师教的内容：

1.html内容

<div id="box">
    <div id="message">
        <!--<p class="left">
            <img src="img/136.jpg" />
            <span>这是第一句话</span>
        </p>
        <p class="right">
            <img src="img/137.jpg" />
            <span>这第二句这是第二句这是第二句话</span>
        </p>-->
    </div>
    <img id="small-pic" src="img/150.jpg" />
    <input id="text1" type="text" />
    <input id="btn1" type="button" value="提交" />
    <strong id="txt">0</strong>
    <a class="active" href="javascript:;" id="up">上</a>
    <a href="javascript:;" id="down">下</a>
</div>

2.JS效果

<script>
var oDiv = document.getElementById(‘message‘);
var oImg = document.getElementById(‘small-pic‘);
var oText = document.getElementById(‘text1‘);
var oBtn = document.getElementById(‘btn1‘);
var aUp = document.getElementById("up");
var aDown = document.getElementById("down");
var oTxt = document.getElementById("txt");
var onOff = true;
var dir = true;
var num = 0;

oDiv.onclick =function () {
    oDiv.innerHTML = ‘‘;
    oTxt.innerHTML = 0;
    num = 0;
}

oImg.onclick = function () {
    if ( onOff ) {
        oImg.src = ‘img/151.jpg‘;
        onOff = false;
    }
    else {
        oImg.src = ‘img/150.jpg‘;
        onOff = true;
    }
};

aUp.onclick = function () {
    aUp.className = ‘active‘;
    aDown.className = ‘‘;
    dir = true;
}
aDown.onclick = function () {
    aUp.className = ‘‘;
    aDown.className = ‘active‘;
    dir = false;
}

oBtn.onclick = function () {
    if ( oText.value == ‘‘ ) { //input值为空弹框
        alert(‘请输入内容‘);
    }
    else {

        // alert( onOff );    // true => ‘left‘
        // alert( onOff );    // false => ‘right‘
        var sClass = ‘‘;
        if ( onOff ) {
            sClass = ‘left‘;
        }
        else {
            sClass = ‘right‘;
        }

        if (dir) {  //添加内容在上
             oDiv.innerHTML = ‘<p class="‘ + sClass + ‘">‘ +
                    ‘<img src="‘ + oImg.src + ‘" />‘ +
                    ‘<span>‘ + oText.value + ‘</span>‘ +
                ‘</p>‘ + oDiv.innerHTML;
        }else{    //添加内容在下
            oDiv.innerHTML += ‘<p class="‘ + sClass + ‘">‘ +
                    ‘<img src="‘ + oImg.src + ‘" />‘ +
                    ‘<span>‘ + oText.value + ‘</span>‘ +
                ‘</p>‘ ;
        }

        oText.value = ‘‘; //提交时input值为空

        num++  //数字随着提交+1
        oTxt.innerHTML = num;
    }
};

</script>

3.效果图展示

JS学习笔记--仿手机发送内容交互