一个简单的留言板实现（jquery）
<p>先看一下效果图：</p><p><img src="http://img.domystery.com/Mys/M00/07/B9/cxwu3l0lRzeAerA2AAA6zKf2uM8339.png" title="1562724151552478.png" alt="image.png"/></p><p>实现方式比较简单，一个按钮触发留言窗体，窗体默认不显示；</p><p>然后指定位置展示；</p><p>之后输入，该填的填该写的写。点发布先进行数据检查，检查通过提交服务端数据处理。</p><p>页面：<br/></p><p><button class="lybtn">留言</button></p><p><ul class="items"></ul></p><p><div class="lybwindow" style="display: none;"></p><p> <input type="text" name="title" id="title" placeholder="请输入标题(1-60个字符)" maxlength="60" class="wenb"></p><p> <input type="text" name="tel" id="tel" placeholder="请输入电话" maxlength="11" class="wenb"></p><p> <textarea name="content" id="content" cols="30" rows="10" class="kk"></textarea></p><p> <button class="publish">发布</button></p><p></div></p><p><img src="http://img.domystery.com/Mys/M00/07/B9/cxwu3l0lR7yAQqFwAABnKNuu9Ng714.png" title="1562724283265667.png" alt="image.png"/></p><p>JS部分：</p><p><script type="text/javascript"></p><p> //点击时使发帖界面显示</p><p> $('.lybtn').click(function () {</p><p> document.getElementsByClassName('lybwindow').style.display = "block";</p><p> })</p><p><br/></p><p> $('.publish').click(function () {</p><p> var title = $('#title').val();</p><p> var content = $('#content').val();</p><p> var tel = $('#tel').val();</p><p> if (checkparam(title, content, tel)) {</p><p> alert('请求接口' + title + ' ' + content);</p><p> }</p><p> })</p><p><br/></p><p> function requestdb(title, content, tel) {</p><p> }</p><p> function checkparam(title, content, tel) {</p><p> if (title == '') {</p><p> alert('标题不能为空')</p><p> return false;</p><p> }</p><p> if (title.length > 60) {</p><p> alert('输入的标题过长！')</p><p> return false;</p><p> }</p><p> if (content.length == 0) {</p><p> alert('内容不能为空')</p><p> return false;</p><p> }</p><p> if(!isphone(tel)){</p><p> alert('请输出有效的电话号码！')</p><p> return false;</p><p> }</p><p> }</p><p> /*判断输入是否为合法的手机号码*/</p><p> function isphone(inputString)</p><p> {</p><p> var partten = /^1\d{9}$/;</p><p> var fl=false;</p><p> if(partten.test(inputString))</p><p> {</p><p> return true;</p><p> }</p><p> else</p><p> {</p><p> return false;</p><p> }</p><p> }</p><p></script></p><p>样式及头部：</p><p> <script type="application/javascript" src="./jquery.1.4.2-min.js"></script></p><p> <style type="text/css"></p><p> * {</p><p> margin: 0px;</p><p> padding: 0px;</p><p> font-size: 12px;</p><p> }</p><p><br/></p><p> .lybtn {</p><p> width: 70px;</p><p> height: 30px;</p><p> border-radius: 20%;</p><p> position: fixed;</p><p> right: 10%;</p><p> }</p><p><br/></p><p> .publish {</p><p> width: 70px;</p><p> height: 30px;</p><p> border-radius: 10%;</p><p> margin-bottom: 5px;</p><p> margin-left: 72%;</p><p> }</p><p><br/></p><p> .lybwindow {</p><p> position: fixed;</p><p> right: 10%;</p><p> bottom: 10%;</p><p> /* top: 0px; */</p><p> border: 1px solid gray;</p><p> width: 300px;</p><p> border-radius: 20px;</p><p> }</p><p><br/></p><p> .wenb {</p><p> width: 92%;</p><p> height: 25px;</p><p> margin-top: 10px;</p><p> margin-left: 10px;</p><p> color: gray;</p><p> border-radius: 20px;</p><p> padding-left: 10px;</p><p> }</p><p><br/></p><p> .kk {</p><p> margin-top: 10px;</p><p> margin-left: 10px;</p><p> width: 92%;</p><p> border-radius: 20px;</p><p> padding: 15px;</p><p> }</p><p><br/></p><p> </style></p><p><br/></p><p><br/></p><p>OK，到这里一个简单的留言板出来了。</p>
页:
[1]