立即注册
 找回密码
 立即注册

梦幻岛

搜索
热搜: 活动 交友
返回列表
查看: 283|回复: 0

一个简单的留言板实现(jquery)

[复制链接]

35

主题

35

帖子

304

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
304
发表于 2019-7-10 10:07:59 | 显示全部楼层 |阅读模式

先看一下效果图:

image.png

实现方式比较简单,一个按钮触发留言窗体,窗体默认不显示;

然后指定位置展示;

之后输入,该填的填该写的写。点发布先进行数据检查,检查通过提交服务端数据处理。

页面:

<button class="lybtn">留言</button>

<ul class="items"></ul>

<div class="lybwindow" style="display: none;">

    <input type="text" name="title" id="title" placeholder="请输入标题(1-60个字符)" maxlength="60" class="wenb">

    <input type="text" name="tel" id="tel" placeholder="请输入电话" maxlength="11" class="wenb">

    <textarea name="content" id="content" cols="30" rows="10" class="kk"></textarea>

    <button class="publish">发布</button>

</div>

image.png

JS部分:

<script type="text/javascript">

    //点击时使发帖界面显示

    $('.lybtn').click(function () {

        document.getElementsByClassName('lybwindow')[0].style.display = "block";

    })


    $('.publish').click(function () {

        var title = $('#title').val();

        var content = $('#content').val();

        var tel = $('#tel').val();

        if (checkparam(title, content, tel)) {

            alert('请求接口' + title + ' ' + content);

        }

    })


    function requestdb(title, content, tel) {

    }

    function checkparam(title, content, tel) {

        if (title == '') {

            alert('标题不能为空')

            return false;

        }

        if (title.length > 60) {

            alert('输入的标题过长!')

            return false;

        }

        if (content.length == 0) {

            alert('内容不能为空')

            return false;

        }

        if(!isphone(tel)){

            alert('请输出有效的电话号码!')

            return false;

        }

    }

    /*判断输入是否为合法的手机号码*/

    function isphone(inputString)

    {

        var partten = /^1[3,5,8]\d{9}$/;

        var fl=false;

        if(partten.test(inputString))

        {

            return true;

        }

        else

        {

            return false;

        }

    }

</script>

样式及头部:

    <script type="application/javascript" src="./jquery.1.4.2-min.js"></script>

    <style type="text/css">

        * {

            margin: 0px;

            padding: 0px;

            font-size: 12px;

        }


        .lybtn {

            width: 70px;

            height: 30px;

            border-radius: 20%;

            position: fixed;

            right: 10%;

        }


        .publish {

            width: 70px;

            height: 30px;

            border-radius: 10%;

            margin-bottom: 5px;

            margin-left: 72%;

        }


        .lybwindow {

            position: fixed;

            right: 10%;

            bottom: 10%;

            /* top: 0px; */

            border: 1px solid gray;

            width: 300px;

            border-radius: 20px;

        }


        .wenb {

            width: 92%;

            height: 25px;

            margin-top: 10px;

            margin-left: 10px;

            color: gray;

            border-radius: 20px;

            padding-left: 10px;

        }


        .kk {

            margin-top: 10px;

            margin-left: 10px;

            width: 92%;

            border-radius: 20px;

            padding: 15px;

        }


    </style>



OK,到这里一个简单的留言板出来了。

回复

使用道具 举报

返回列表
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

快速回复 返回顶部 返回列表