首页 > 代码库 > JS学习笔记--仿手机发送内容交互
JS学习笔记--仿手机发送内容交互
学习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.效果图展示
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。