首页 > 代码库 > JS学习笔记--仿手机发送内容交互

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

2024-07-13 11:33:18   217人阅读

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

 

1.html内容

<div id="box">    <div id="message">        <!--<p class="left">            <img src="http://www.mamicode.com/img/136.jpg" />            <span>这是第一句话</span>        </p>        <p class="right">            <img src="http://www.mamicode.com/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 =http://www.mamicode.com/= ‘‘ ) { //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="http://www.mamicode.com/‘ + oImg.src + ‘" />‘ +                    ‘<span>‘ + oText.value + ‘</span>‘ +                ‘</p>‘ + oDiv.innerHTML;           }else{    //添加内容在下            oDiv.innerHTML += ‘<p class="‘ + sClass + ‘">‘ +                    ‘<img src="http://www.mamicode.com/‘ + oImg.src + ‘" />‘ +                    ‘<span>‘ + oText.value + ‘</span>‘ +                ‘</p>‘ ;            }                oText.value = ‘‘; //提交时input值为空                num++  //数字随着提交+1        oTxt.innerHTML = num;     } };</script>

 

3.效果图展示


联系
我们