WeUI如何设计登陆界面 10C

我用JS实现了登陆界面,如图所示(图片是GIF,若无法显示,点进去即可):
图片说明
但是移植到WeUI项目里去就不行了,烦请各位大神帮忙看一下,如何在WeUI里面实现相同的功能,账号密码不需要连数据库,使用字符串验证。
WeUI代码很简单,下载地址:https://pan.baidu.com/s/1ARGadPZS3o_LZeF_YPnVRw
不想下载的话我也把代码贴上来:

 <!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <title>智能大棚</title>
    <link rel="stylesheet" href="public/css/weui.css"/>
    <link rel="stylesheet" href="public/css/index.css"/>
</head>
<body ontouchstart>
    <div class="container" id="container"></div>

    <script type="text/html" id="tpl_home">
<div class="page">
    <div class="page__hd">
        <h1 class="page__title">
            <img src="public/images/logo.png" alt="logo" width="100%" />
        </h1>
        <p class="page__desc">用户登录</p>
    </div>
    <div class="page__bd page__bd_spacing">
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd">
                <label class="weui-label">账号</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input name" name="NAME" type="text" placeholder="请输入账号">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd">
                <label class="weui-label">密码</label>
                </div>
                <div class="weui-cell__bd">
                    <input class="weui-input pwd" name="PWD" type="password" placeholder="请输入密码">
                </div>
            </div>
        </div>
        <div class="hb_mar_top_40">
            <a href="javascript:;" class="weui-btn weui-btn_primary" id=submit_btn>登录</a>
        </div>
    </div>
    <!-- <div class="page__ft">
        <a href="javascript:home()"><img src="public/images/icon_footer.png" /></a>
    </div> -->

    <!--BEGIN toast-->
    <div id="toast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-success-no-circle weui-icon_toast"></i>
            <p class="weui-toast__content">登录成功</p>
        </div>
    </div>
    <!--end toast-->

    <!--BEGIN cancelToast-->
    <div id="cancelToast" style="display: none;" >
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-icon-cancel weui-icon_toast"></i>
            <p class="weui-toast__content">登录失败</p>
        </div>
    </div>
    <!--end cancelToast-->

    <!-- loading toast -->
    <div id="loadingToast" style="display:none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast">
            <i class="weui-loading weui-icon_toast"></i>
            <p class="weui-toast__content">Loading</p>
        </div>
    </div>
</div>

</script>
    <script src="public/js/zepto.min.js"></script>
    <script src="public/js/jweixin-1.0.0.js"></script>
    <script src="public/js/weui.min.js"></script>
    <script src="public/js/index.js"></script>

    <script type="text/javascript">
    $(function(){
        $("#submit_btn").click(function(){
            var username = $('.name').val();
            var pass = $('.pwd').val();
            if(username.value=="")
            {
                alert("请输入用户名");
                username.focus();
                return false;
            }
            else  if(pass.value=="")
            {
                alert("请输入密码");
                password.focus();
                return false;
            }
            else  if((pass.value=="admin")&&(username.value=="admin"))
            {
                window.location.href="www.baidu.com";
            }
            else
            {
                showToast({ title: '用户名和密码不能为空'})
                return false;
            }
            return false;
        });

        //登录成功
        function toast(){
            var $toast = $('#toast');
            if ($toast.css('display') != 'none') return;
            $toast.fadeIn(100);
            setTimeout(function () {
                $toast.fadeOut(100);
                location.href="http://39.105.24.124/18034#/layout/watch";  //成功后跳转
            }, 500);
        }

        //登录失败
        function canceltoast(){
            var $cancelToast = $('#cancelToast');
            if ($cancelToast.css('display') != 'none') return;
            $cancelToast.fadeIn(100);
            setTimeout(function () {
                $cancelToast.fadeOut(100);
            }, 500);
        }

        //Loading加载
        function loadingtoast(){
            var $loadingToast = $('#loadingToast');
            if ($loadingToast.css('display') != 'none') return;
            $loadingToast.fadeIn(100);
            setTimeout(function () {
                $loadingToast.fadeOut(100);
            }, 500);
        }
    });
    </script>
</body>
</html>

1个回答

var username = $('.name').val();你都取值过了,下面的if判断就不要调用.value属性了,而且就算不是val取值,zepto返回的也不是dom对象,没有value属性

还有用户名密码都错误的话你的showToast函数也没有定义

        $("#submit_btn").click(function(){
            var username = $('.name').val();
            var pass = $('.pwd').val();
        //  if(username.value=="")
                if(username=='')
            {
                alert("请输入用户名");
                username.focus();
                return false;
            }
        //  else  if(pass.value=="")
            else  if(pass=="")
            {
                alert("请输入密码");
                password.focus();
                return false;
            }
            else  if((pass.value=="admin")&&(username.value=="admin"))
            {
                window.location.href="www.baidu.com";
            }
            else
            {
                showToast({ title: '用户名和密码不能为空'})
                return false;
            }
            return false;
        });
caozhy
贵阳老马马善福专业维修游泳池堵漏防水工程 完全正确,如果lz问题解决了,记得采纳一个哦。
一年多之前 回复
Csdn user default icon
上传中...
上传图片
插入图片
抄袭、复制答案,以达到刷声望分或其他目的的行为,在CSDN问答是严格禁止的,一经发现立刻封号。是时候展现真正的技术了!
其他相关推荐
使用weui框架时开发微信公众号时,使用什么单位可以兼容不同分辨率?
使用weui框架开发微信公众号,自己添加的css样式应该采用什么单位呢?之前开发移动端都是用的rem转换的,但是这次好像用rem不能兼容不同手机的分辨率.哪位小伙伴用过weui,麻烦告知一下
WEUI中地址选择器初值设置的问题
各位大神好,为什么WEUI的地址选择器我设置了初值,但是点击input之后只是弹出了 省的选择,没有市和区,点击完成后也没有任何反应,急啊!!!
WEUI怎么表单提交?怎么在后台获取数据?
这样写的weui,应该怎么提交表单?直接在a标签里的href写上servlet吗?![图片说明](https://img-ask.csdn.net/upload/201705/11/1494468268_868412.jpg)
跪求 weui 这个里面的<script type="text/html> 这个东西什么时候执行
``` ``` <script type="text/html" id="tpl_button"> <div class="page"> <div class="page__hd"> <h1 class="page__title">Button</h1> <p class="page__desc">按钮</p> </div> <div class="page__bd page__bd_spacing"> <div class="button-sp-area"> <a href="javascript:;" class="weui-btn weui-btn_primary">页面主操作</a> <a href="javascript:;" class="weui-btn weui-btn_primary weui-btn_loading"><i class="weui-loading"></i>页面主操作</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_primary">页面主操作</a> <a href="javascript:;" class="weui-btn weui-btn_default">页面次要操作</a> <a href="javascript:;" class="weui-btn weui-btn_default weui-btn_loading"><i class="weui-loading"></i>页面次操作</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_default">页面次要操作</a> <a href="javascript:;" class="weui-btn weui-btn_warn">警告类操作</a> <a href="javascript:;" class="weui-btn weui-btn_warn weui-btn_loading"><i class="weui-loading"></i>警告类操作</a> <a href="javascript:;" class="weui-btn weui-btn_disabled weui-btn_warn">警告类操作</a> </div> <div class="button-sp-area"> <a href="javascript:;" class="weui-btn weui-btn_block weui-btn_primary">页面主操作</a> <a href="javascript:;" class="weui-btn weui-btn_block weui-btn_default">页面次要操作</a> <a href="javascript:;" class="weui-btn weui-btn_block weui-btn_warn">警告类操作</a> </div> <div class="button-sp-area cell"> <a href="javascript:;" class="weui-btn_cell weui-btn_cell-default">普通行按钮</a> <a href="javascript:;" class="weui-btn_cell weui-btn_cell-primary">强调行按钮</a> <a href="javascript:;" class="weui-btn_cell weui-btn_cell-primary"> <img class="weui-btn_cell__icon" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII="> 强调行按钮 </a> <a href="javascript:;" class="weui-btn_cell weui-btn_cell-warn">警告行按钮</a> </div> <div class="button-sp-area"> <a href="javascript:;" class="weui-btn weui-btn_plain-default">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-default weui-btn_plain-disabled">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-primary">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_plain-primary weui-btn_plain-disabled">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_primary">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_default">按钮</a> <a href="javascript:;" class="weui-btn weui-btn_mini weui-btn_warn">按钮</a> </div> </div> <div class="page__ft"> <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a> </div> </div> </script> <script type="text/html" id="tpl_list"> <div class="page"> <div class="page__hd"> <h1 class="page__title">List</h1> <p class="page__desc">列表</p> </div> <div class="page__bd"> <div class="weui-cells__title">带说明的列表项</div> <div class="weui-cells"> <div class="weui-cell"> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> <div class="weui-cell weui-cell_swiped"> <div class="weui-cell__bd" style="transform: translateX(-68px)"> <div class="weui-cell"> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> </div> <div class="weui-cell__ft"> <a class="weui-swiped-btn weui-swiped-btn_warn" href="javascript:">删除</a> </div> </div> </div> <div class="weui-cells__title">带图标、说明的列表项</div> <div class="weui-cells"> <div class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:16px;display:block"></div> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> <div class="weui-cell weui-cell_example"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:16px;display:block"></div> <div class="weui-cell__bd"> <p>标题文字</p> </div> <div class="weui-cell__ft">说明文字</div> </div> </div> <div class="weui-cells__title">带跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft"> </div> </a> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft"> </div> </a> </div> <div class="weui-cells__title">带说明、跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> <a class="weui-cell weui-cell_access" href="javascript:;"> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> </div> <div class="weui-cells__title">带图标、说明、跳转的列表项</div> <div class="weui-cells"> <a class="weui-cell weui-cell_access weui-cell_example" href="javascript:;"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:16px;display:block"></div> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> <a class="weui-cell weui-cell_access weui-cell_example" href="javascript:;"> <div class="weui-cell__hd"><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAC4AAAAuCAMAAABgZ9sFAAAAVFBMVEXx8fHMzMzr6+vn5+fv7+/t7e3d3d2+vr7W1tbHx8eysrKdnZ3p6enk5OTR0dG7u7u3t7ejo6PY2Njh4eHf39/T09PExMSvr6+goKCqqqqnp6e4uLgcLY/OAAAAnklEQVRIx+3RSRLDIAxE0QYhAbGZPNu5/z0zrXHiqiz5W72FqhqtVuuXAl3iOV7iPV/iSsAqZa9BS7YOmMXnNNX4TWGxRMn3R6SxRNgy0bzXOW8EBO8SAClsPdB3psqlvG+Lw7ONXg/pTld52BjgSSkA3PV2OOemjIDcZQWgVvONw60q7sIpR38EnHPSMDQ4MjDjLPozhAkGrVbr/z0ANjAF4AcbXmYAAAAASUVORK5CYII=" alt="" style="width:20px;margin-right:16px;display:block"></div> <div class="weui-cell__bd"> <p>cell standard</p> </div> <div class="weui-cell__ft">说明文字</div> </a> </div> </div> <div class="page__ft"> <a href="javascript:home()"><img src="./images/icon_footer_link.png" /></a> </div> </div> ``` ```
weui 中js 初始化空间,对控件上的自定义组件操作不起作用如何处理
``` var $dialogue = weui.dialog({ content: <div id="privacySelect"> <div class="weui-cell"> <div class="weui-cell__hd"> <input type="radio" name="ttl" id="s11" /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <label>abc</label> </div> </div> <div class ="weui-cell">' + <div class="weui-cell__hd">' + <input type="radio" name="1344" id="s12"/> </div> <div class="weui-cell__bd">' + <label>1234</label>' + </div> </div> <div class="weui-cell"> <div class="weui-cell__hd">' + <input type="radio" name="1234" id="s13"/>' + <i class="weui-icon-checked"></i>' </div> <div class="weui-cell__bd"> <label>5445433</label> </div> </div> <div class="weui-cell"> <div class="weui-cell__hd"> <input type="radio" name="1234" id="s14" checked /> <i class="weui-icon-checked"></i> </div> <div class="weui-cell__bd"> <label>全部</label> </div> </div> </div>, className: 'dialogueClass', buttons: [{ label: '取消234', type: 'default', onClick: function() { $dialogue.hide(); } }] }); $("#s14").on("click",function(){ }); ``` $("#s14").on("click",function(){ }); 事件代码不起作用
java 微信 jquery weui 插件
用ssh框架写微信,前端用的是微信weui插件,里面当我提交 的时候为什么木有submit按钮,就是说这个插件里面有木有像 jquery里面的submit控件一提交就跑到后台取数据![图片说明](https://img-ask.csdn.net/upload/201604/21/1461234075_251016.png)
微信weui问题 toast提示
就是Toast弹出后,只显示【已完成】,上面的勾勾不显示,有时又能显示。 icons中的各种图标也一样,时有时无,忘大神解答。 ![![图片说明](https://img-ask.csdn.net/upload/201605/29/1464491646_729840.png) ![图片说明](https://img-ask.csdn.net/upload/201605/29/1464491875_359644.png)
引入jQuery WeUI,当前时间不能取消
我引入的js和我写的代码 ``` <script src="/static/js/jquery-weui.js"></script> <script> jQuery(function(){ $("#my-input").calendar({ multiple:"ture", ##closeOnSelect:"false", onChange: function (p, values, displayValues) { console.log(values, displayValues); } }); }); </script> <div id="div1" class="form-group"> <label>可服务时间</label> <input class="form-control" type="text" id= "my-input" placeholder="可服务时间" value="" maxlength="50" /> </div> ``` 效果图如下 ![图片说明](https://img-ask.csdn.net/upload/201710/12/1507799802_988982.png) 第一次点击会出现两个,再次点击会消除一个,但是不能全部取消
weui中的datetimePicker在移动端和PC端的问题
在手机端的datepicker可以正常使用,如果用电脑上的浏览器打开却只能看到时间却不能够选择时间 如果我想在手机和电脑上都能够正常使用datepicker的功能,该如何做?
JQuery WEUI里的picker选择器使用
大神们帮忙看看这里为啥报错?是因为没引用JS文件?应该引用哪个JS啊?![图片说明](https://img-ask.csdn.net/upload/201705/19/1495168407_384810.png)
有谁使用过jquery weui 的地址选择器?急
地址选择器,不能初始化,第一次,获取能够选中,第二次获取就不能选中了,急,!具体看例子 http://gyjk.zjwcwl.com/letest/leAddress.html 就是不能JS动态赋值!急
用weui picker做一个省市区三级联动,从数据库读数据
数据格式如图![图片说明](https://img-ask.csdn.net/upload/201801/05/1515124486_540494.png)
微信小程序需不需要使用云开发
微信小程序如果要用云开发,weui-wxss样式在那里引入,为什么使用云开发,在app.wxss中引入weui-wxss会报错,不引入样式也感觉没什么问题啊
两重DIV里面怎么在嵌套的DIV里面点击一个按钮后删除当前div
![图片说明](https://img-ask.csdn.net/upload/201708/03/1501731636_195775.png) ``` <div class="weui-form-preview" style="margin-top:10px" id="d1"> <div class="weui-form-preview__bd" style="text-align:right;margin-right:50px"> <a id="show-delete" href="javascript:;" style="position:absolute;margin-top:20px;width:40px;color:#199ED8;font-size:18px;">作废</a> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="color:#666666">购货方名称:</label> <span class="weui-form-preview__value" style="text-align:left;color:#666666">海南省海口市XXX有限公司</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="color:#666666">金额:</label> <span class="weui-form-preview__value" style="text-align:left;color:#666666">1000.0元</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="font-size:10px">申请日期:</label> <span class="weui-form-preview__value" style="text-align:left;font-size:10px">2017-01-01</span> </div> </div> </div> <div class="weui-form-preview" style="margin-top:20px"> <div class="weui-form-preview__bd" style="text-align:right;margin-right:50px"> <a id="show-delete" href="javascript:;" style="position:absolute;margin-top:20px;width:40px;color:#199ED8;font-size:18px">作废</a> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="color:#666666">购货方名称:</label> <span class="weui-form-preview__value" style="text-align:left;color:#666666">海南省海口市XXX有限公司</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="color:#666666">金额:</label> <span class="weui-form-preview__value" style="text-align:left;color:#666666">1000.0元</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="font-size:10px">申请日期:</label> <span class="weui-form-preview__value" style="text-align:left;font-size:10px">2017-01-01</span> </div> </div> </div> <div class="weui-form-preview" style="margin-top:20px"> <div class="weui-form-preview__bd" style="text-align:right;margin-right:50px"> <a id="show-delete" href="javascript:;" style="position:absolute;margin-top:20px;width:40px;color:#199ED8;font-size:18px">作废</a> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="color:#666666">购货方名称:</label> <span class="weui-form-preview__value" style="text-align:left;color:#666666">海南省海口市XXX有限公司</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="color:#666666">金额:</label> <span class="weui-form-preview__value" style="text-align:left;color:#666666">1000.0元</span> </div> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" style="font-size:10px">申请日期:</label> <span class="weui-form-preview__value" style="text-align:left;font-size:10px">2017-01-01</span> </div> </div> </div> ``` 用了这种还是一样不行啊 ![图片说明](https://img-ask.csdn.net/upload/201708/03/1501735695_208769.png) ``` function deleteRegist(buttons){ var $f = $(buttons); var $parent = $f.parent("div"); $parent.empty(); } ```
如何在本页弹出一个dialog框
在使用weui写一个网页,网页上有一个超链接,想通过点击超链接,得到一个在本页面上弹出一个weui 的dialog对话框。求助,希望能够解答。
html页面实现list循环问题
<#if salaryMonths.keyBeanList?exists> <#list salaryMonths.keyBeanList as keyBean> <#if !keyBean_has_next> <div class="weui-form-preview__hd"> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" id="salaryKey">${(keyBean.key)!}</label> <em class="weui-form-preview__value" id="salaryValue"> ${(keyBean.value)!}元</em> </#if> </div> </div> <#else> <div class="weui-form-preview__hd"> <div class="weui-form-preview__item"> <label class="weui-form-preview__label" id="key">${(keyBean.key)!}</label> <em class="weui-form-preview__value" id="value"> ${(keyBean.value)!}元</em> </div> </div> </#if> </#list> <#else> 没有记录 </#if> </#list> </#if> $('.weui-navbar__item').on('click', function () { $(this).addClass('weui-bar__item_on').siblings('.weui-bar__item_on').removeClass('weui-bar__item_on'); var sMonth = $(this).attr("data-month"); for(var i=0;i<data.length;i++){ if(sMonth === data[i].salaryMonth){ if(data[i].keyBeanList.length > 0){ for(int j = 0;j < data[i].keyBeanList.length;j++){ $("#key").text(data[i].keyBeanList[j].salaryKey); $("#value").text(data[i].keyBeanList[j].salryValue); } } } 最前面还有月份的按钮没有添加,后台返回的数据是一个List里面放的是一个对象,分别有key,和value值,各位大神如何可以实现,当点击按钮时,可以将对应的值写进去显示出来,现在我是根据id写的,前面的都覆盖了,只显示最后一条记录,想要循环显示出list中所有的key和value值
关于一些前端框架ICON加载方式的疑惑
最近写项目 用的是微信的UI库 不过 在我看他们的css的源码的时候 发现 他们的ICON根本就没加载图片 但是 图片却活生生的显示了出来 在用F12 DEBUG的时候 也在网络里 根本看不到图片的引用 很奇异 这是怎么实现的呢 具体代码如下 ``` .weui_icon_download:before { content: "\EA02" } .weui_icon_info:before { content: "\EA03" } .weui_icon_safe_success:before { content: "\EA04" } .weui_icon_safe_warn:before { content: "\EA05" } .weui_icon_success:before { content: "\EA06" } .weui_icon_success_circle:before { content: "\EA07" } ```
微信公众号拍照上传多张图片接口
# 现在可以往数据库存储多张照片,但是调用不了拍照接口 ``` <div class="container"> <div class="weui_cells weui_cells_form"> <div class="weui_cell"> <div class="weui_cell_bd weui_cell_primary"> <div class="weui_uploader"> <div class="weui_uploader_hd weui_cell"> <img alt="img" src="/szgmjk/image/icon5.png"> &emsp; <div class="weui_cell_bd weui_cell_primary">现场拍照</div> <div class="weui_cell_ft js_counter">0/6</div> </div> <div class="weui_uploader_bd"> <ul class="weui_uploader_files js_previews"> <!-- 预览图插入到这 --> </ul> <div class="weui_uploader_input_wrp"> <input class="weui_uploader_input js_file" type="file" accept="image/jpg,image/jpeg,image/png,image/gif" multiple=""> </div> </div> </div> </div> </div> </div> </div> <div class="preview"> <div class="weui_mask"></div> <img src="" alt="" /> <a href="javascript:;" class="delete" id="delete">delete</a> </div> //拍照上传接口 // codepen 没办法直接在 body 标签加属性,所以用这里用 js 给 body 添加 ontouchstart 属性来触发 :active document.body.setAttribute('ontouchstart', ''); $(function () { // 允许上传的图片类型 var allowTypes = ['image/jpg', 'image/jpeg', 'image/png', 'image/gif']; //10MB var maxSize = 10 * 1024 * 1024; // 图片最大宽度 var maxWidth = 300; // 最大上传图片数量 var maxCount = 6; var images = []; $('.js_file').on('change', function (event) { var files = event.target.files; // 如果没有选中文件,直接返回 if (files.length === 0) { return; } for (var i = 0, len = files.length; i < len; i++) { var file = files[i]; var reader = new FileReader(); // 如果类型不在允许的类型范围内 if (allowTypes.indexOf(file.type) === -1) { $.weui.alert('该类型不允许上传'); continue; } if (file.size > maxSize) { $.weui.alert('图片太大,不允许上传'); continue; } if ($('.weui_uploader_file').length >= maxCount) { $.weui.alert('最多只能上传' + maxCount + '张图片'); return; } reader.onload = function (e) { var img = new Image(); img.onload = function () { // 不要超出最大宽度 var w = Math.min(maxWidth, img.width); // 高度按比例计算 var h = img.height * (w / img.width); var canvas = document.createElement('canvas'); var ctx = canvas.getContext('2d'); // 设置 canvas 的宽度和高度 canvas.width = w; canvas.height = h; ctx.drawImage(img, 0, 0, w, h); var base64 = canvas.toDataURL('image/png'); var base65 = canvas.toDataURL('image/png'); var base66 = canvas.toDataURL('image/png'); var base67 = canvas.toDataURL('image/png'); var base68 = canvas.toDataURL('image/png'); var base69 = canvas.toDataURL('image/png'); document.getElementById("picture").value = base64; document.getElementById("picture2").value = base65; document.getElementById("picture3").value = base66; document.getElementById("picture4").value = base67; document.getElementById("picture5").value = base68; document.getElementById("picture6").value = base69; // 插入到预览区 var $preview = $('<li class="weui_uploader_file weui_uploader_status" style="background-image:url(' + base64 + ')"><div class="weui_uploader_status_content">0%</div></li>'); $('.weui_uploader_files').append($preview); var num = $('.weui_uploader_file').length; $('.js_counter').text(num + '/' + maxCount); images.push(base64); // 然后假装在上传,可以post base64格式,也可以构造blob对象上传 var progress = 0; function uploading() { $preview.find('.weui_uploader_status_content').text(++progress + '%'); if (progress < 100) { setTimeout(uploading, 30); } else { // 如果是失败,塞一个失败图标 //$preview.find('.weui_uploader_status_content').html('<i class="weui_icon_warn"></i>'); $preview.removeClass('weui_uploader_status').find('.weui_uploader_status_content').remove(); } } setTimeout(uploading, 30); }; img.src = e.target.result; }; reader.readAsDataURL(file); } }); $('.js_previews').on('click', '.weui_uploader_file', function(event){ var index = $(this).index(); var img = images[index]; $('.preview').find('img').attr('src', img); $('.preview').show(); }); }); $(function() { var msg = $("#msg").val(); if (msg != "" && msg.length > 0) { $.alert(msg); } var max = 200; $('#textarea').on( 'input', function() { var text = $(this).val(); var len = text.length; $('#count').text(len); if (len > max) { $(this).closest('.weui_cell').addClass( 'weui_cell_warn'); } else { $(this).closest('.weui_cell').removeClass( 'weui_cell_warn'); } }); }); ``` 求解决,怎么在上传多张图片代码中和拍照接口结合, 如有解决,请留下支付方式,另有重谢。
php <form enctype="multipart/form-data"上传取值
<form enctype="multipart/form-data" method="POST" action="upload.php"> <br> <br> <div class="weui_cell password"> <div class="weui_cell_bd weui_cell_primary password"> <input class="weui_input" type="text" id ="dls" name="dls" placeholder="请输入代理商"> </div> </div> <input type='file' name='upfile' />上传图片 <input type='submit' /> <div class="button"> <div class="bd"> </div> </div> <br> <br> </form> 如何在UPLOAD.PHP中取到文本框dls的值呢
爬虫福利二 之 妹子图网MM批量下载
爬虫福利一:27报网MM批量下载    点击 看了本文,相信大家对爬虫一定会产生强烈的兴趣,激励自己去学习爬虫,在这里提前祝:大家学有所成! 目标网站:妹子图网 环境:Python3.x 相关第三方模块:requests、beautifulsoup4 Re:各位在测试时只需要将代码里的变量 path 指定为你当前系统要保存的路径,使用 python xxx.py 或IDE运行即可。
字节跳动视频编解码面经
三四月份投了字节跳动的实习(图形图像岗位),然后hr打电话过来问了一下会不会opengl,c++,shador,当时只会一点c++,其他两个都不会,也就直接被拒了。 七月初内推了字节跳动的提前批,因为内推没有具体的岗位,hr又打电话问要不要考虑一下图形图像岗,我说实习投过这个岗位不合适,不会opengl和shador,然后hr就说秋招更看重基础。我当时想着能进去就不错了,管他哪个岗呢,就同意了面试...
开源一个功能完整的SpringBoot项目框架
福利来了,给大家带来一个福利。 最近想了解一下有关Spring Boot的开源项目,看了很多开源的框架,大多是一些demo或者是一个未成形的项目,基本功能都不完整,尤其是用户权限和菜单方面几乎没有完整的。 想到我之前做的框架,里面通用模块有:用户模块,权限模块,菜单模块,功能模块也齐全了,每一个功能都是完整的。 打算把这个框架分享出来,供大家使用和学习。 为什么用框架? 框架可以学习整体...
Java学习的正确打开方式
在博主认为,对于入门级学习java的最佳学习方法莫过于视频+博客+书籍+总结,前三者博主将淋漓尽致地挥毫于这篇博客文章中,至于总结在于个人,实际上越到后面你会发现学习的最好方式就是阅读参考官方文档其次就是国内的书籍,博客次之,这又是一个层次了,这里暂时不提后面再谈。博主将为各位入门java保驾护航,各位只管冲鸭!!!上天是公平的,只要不辜负时间,时间自然不会辜负你。 何谓学习?博主所理解的学习,它是一个过程,是一个不断累积、不断沉淀、不断总结、善于传达自己的个人见解以及乐于分享的过程。
Spring Boot2 系列教程(十七)SpringBoot 整合 Swagger2
前后端分离后,维护接口文档基本上是必不可少的工作。 一个理想的状态是设计好后,接口文档发给前端和后端,大伙按照既定的规则各自开发,开发好了对接上了就可以上线了。当然这是一种非常理想的状态,实际开发中却很少遇到这样的情况,接口总是在不断的变化之中,有变化就要去维护,做过的小伙伴都知道这件事有多么头大!还好,有一些工具可以减轻我们的工作量,Swagger2 就是其中之一,至于其他类似功能但是却收费的软...
Python 基础(一):入门必备知识
目录1 标识符2 关键字3 引号4 编码5 输入输出6 缩进7 多行8 注释9 数据类型10 运算符10.1 常用运算符10.2 运算符优先级 1 标识符 标识符是编程时使用的名字,用于给变量、函数、语句块等命名,Python 中标识符由字母、数字、下划线组成,不能以数字开头,区分大小写。 以下划线开头的标识符有特殊含义,单下划线开头的标识符,如:_xxx ,表示不能直接访问的类属性,需通过类提供
天天学JAVA-JAVA基础(6)
如果觉得我写的还行,请关注我的博客并且点个赞哟。本文主要介绍JAVA 中最常使用字符串常量String相关知识。 1.String简介 2.创建字符串对象两种方式的区别 3.String常用的方法 4.String的不可变性 5.一道阿里面试题,你会做吗? 1.String简介 1.1String源码 首先看一段String源码,String主要实现了Serializable、Compar...
程序员接私活怎样防止做完了不给钱?
首先跟大家说明一点,我们做 IT 类的外包开发,是非标品开发,所以很有可能在开发过程中会有这样那样的需求修改,而这种需求修改很容易造成扯皮,进而影响到费用支付,甚至出现做完了项目收不到钱的情况。 那么,怎么保证自己的薪酬安全呢? 我们在开工前,一定要做好一些证据方面的准备(也就是“讨薪”的理论依据),这其中最重要的就是需求文档和验收标准。一定要让需求方提供这两个文档资料作为开发的基础。之后开发
Python十大装B语法
Python 是一种代表简单思想的语言,其语法相对简单,很容易上手。不过,如果就此小视 Python 语法的精妙和深邃,那就大错特错了。本文精心筛选了最能展现 Python 语法之精妙的十个知识点,并附上详细的实例代码。如能在实战中融会贯通、灵活使用,必将使代码更为精炼、高效,同时也会极大提升代码B格,使之看上去更老练,读起来更优雅。 1. for - else 什么?不是 if 和 else 才
数据库优化 - SQL优化
前面一篇文章从实例的角度进行数据库优化,通过配置一些参数让数据库性能达到最优。但是一些“不好”的SQL也会导致数据库查询变慢,影响业务流程。本文从SQL角度进行数据库优化,提升SQL运行效率。 判断问题SQL 判断SQL是否有问题时可以通过两个表象进行判断: 系统级别表象 CPU消耗严重 IO等待严重 页面响应时间过长
2019年11月中国大陆编程语言排行榜
2019年11月2日,我统计了某招聘网站,获得有效程序员招聘数据9万条。针对招聘信息,提取编程语言关键字,并统计如下: 编程语言比例 rank pl_ percentage 1 java 33.62% 2 c/c++ 16.42% 3 c_sharp 12.82% 4 javascript 12.31% 5 python 7.93% 6 go 7.25% 7
通俗易懂地给女朋友讲:线程池的内部原理
餐盘在灯光的照耀下格外晶莹洁白,女朋友拿起红酒杯轻轻地抿了一小口,对我说:“经常听你说线程池,到底线程池到底是个什么原理?”
经典算法(5)杨辉三角
写在前面: 我是 扬帆向海,这个昵称来源于我的名字以及女朋友的名字。我热爱技术、热爱开源、热爱编程。技术是开源的、知识是共享的。 这博客是对自己学习的一点点总结及记录,如果您对 Java、算法 感兴趣,可以关注我的动态,我们一起学习。 用知识改变命运,让我们的家人过上更好的生活。 目录一、杨辉三角的介绍二、杨辉三角的算法思想三、代码实现1.第一种写法2.第二种写法 一、杨辉三角的介绍 百度
腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹?
昨天,有网友私信我,说去阿里面试,彻底的被打击到了。问了为什么网上大量使用ThreadLocal的源码都会加上private static?他被难住了,因为他从来都没有考虑过这个问题。无独有偶,今天笔者又发现有网友吐槽了一道腾讯的面试题,我们一起来看看。 腾讯算法面试题:64匹马8个跑道需要多少轮才能选出最快的四匹? 在互联网职场论坛,一名程序员发帖求助到。二面腾讯,其中一个算法题:64匹
2020 网络课 智慧树自动刷课代码,自动跳转,自动答题并关闭弹窗,自动1.5倍速静音
刷课一时爽,一直刷课一直爽! 终于让我找到了这个黑客代码了,教程开始: 只限谷歌浏览器和火狐浏览器使用,如果第一次失败,请重新试一下次 将下面代码复制后,进入浏览器按F12键,先点击console 然后Ctrl+v复制代码 最后按回车键即可 var ti = $("body"); var video = $(".catalogue_ul1 li[id*=video-]"); var i = 1;...
面试官:你连RESTful都不知道我怎么敢要你?
面试官:了解RESTful吗? 我:听说过。 面试官:那什么是RESTful? 我:就是用起来很规范,挺好的 面试官:是RESTful挺好的,还是自我感觉挺好的 我:都挺好的。 面试官:… 把门关上。 我:… 要干嘛?先关上再说。 面试官:我说出去把门关上。 我:what ?,夺门而去 文章目录01 前言02 RESTful的来源03 RESTful6大原则1. C-S架构2. 无状态3.统一的接
为啥国人偏爱Mybatis,而老外喜欢Hibernate/JPA呢?
关于SQL和ORM的争论,永远都不会终止,我也一直在思考这个问题。昨天又跟群里的小伙伴进行了一番讨论,感触还是有一些,于是就有了今天这篇文。 声明:本文不会下关于Mybatis和JPA两个持久层框架哪个更好这样的结论。只是摆事实,讲道理,所以,请各位看官勿喷。 一、事件起因 关于Mybatis和JPA孰优孰劣的问题,争论已经很多年了。一直也没有结论,毕竟每个人的喜好和习惯是大不相同的。我也看
SQL-小白最佳入门sql查询一
一 说明 如果是初学者,建议去网上寻找安装Mysql的文章安装,以及使用navicat连接数据库,以后的示例基本是使用mysql数据库管理系统; 二 准备前提 需要建立一张学生表,列分别是id,名称,年龄,学生信息;本示例中文章篇幅原因SQL注释略; 建表语句: CREATE TABLE `student` ( `id` int(11) NOT NULL AUTO_INCREMENT, `
项目中的if else太多了,该怎么重构?
介绍 最近跟着公司的大佬开发了一款IM系统,类似QQ和微信哈,就是聊天软件。我们有一部分业务逻辑是这样的 if (msgType = "文本") { // dosomething } else if(msgType = "图片") { // doshomething } else if(msgType = "视频") { // doshomething } else { // dosho
致 Python 初学者
文章目录1. 前言2. 明确学习目标,不急于求成,不好高骛远3. 在开始学习 Python 之前,你需要做一些准备2.1 Python 的各种发行版2.2 安装 Python2.3 选择一款趁手的开发工具3. 习惯使用IDLE,这是学习python最好的方式4. 严格遵从编码规范5. 代码的运行、调试5. 模块管理5.1 同时安装了py2/py35.2 使用Anaconda,或者通过IDE来安装模
“狗屁不通文章生成器”登顶GitHub热榜,分分钟写出万字形式主义大作
一、垃圾文字生成器介绍 最近在浏览GitHub的时候,发现了这样一个骨骼清奇的雷人项目,而且热度还特别高。 项目中文名:狗屁不通文章生成器 项目英文名:BullshitGenerator 根据作者的介绍,他是偶尔需要一些中文文字用于GUI开发时测试文本渲染,因此开发了这个废话生成器。但由于生成的废话实在是太过富于哲理,所以最近已经被小伙伴们给玩坏了。 他的文风可能是这样的: 你发现,
程序员:我终于知道post和get的区别
IT界知名的程序员曾说:对于那些月薪三万以下,自称IT工程师的码农们,其实我们从来没有把他们归为我们IT工程师的队伍。他们虽然总是以IT工程师自居,但只是他们一厢情愿罢了。 此话一出,不知激起了多少(码农)程序员的愤怒,却又无可奈何,于是码农问程序员。 码农:你知道get和post请求到底有什么区别? 程序员:你看这篇就知道了。 码农:你月薪三万了? 程序员:嗯。 码农:你是怎么做到的? 程序员:
羞,Java 字符串拼接竟然有这么多姿势
二哥,我今年大二,看你分享的《阿里巴巴 Java 开发手册》上有一段内容说:“循环体内,拼接字符串最好使用 StringBuilder 的 append 方法,而不是 + 号操作符。”到底为什么啊,我平常一直就用的‘+’号操作符啊!二哥有空的时候能否写一篇文章分析一下呢? 就在昨天,一位叫小菜的读者微信我说了上面这段话。 我当时看到这条微信的第一感觉是:小菜你也太菜了吧,这都不知道为啥啊!我估...
写1行代码影响1000000000人,这是个什么项目?
不带钱不带卡,只带手机出门就能畅行无阻,这已是生活的常态。益普索发布的《2019第一季度第三方移动支付用户研究》报告显示,移动支付在手机网民中的渗透率高达95.1%,截至今年1月,支付宝全球用户数已经突破10亿。你或许每天都会打开支付宝,付款购物、领取权益、享受服务……但你或许不知道的是,在这个方便、快捷、智能化的APP背后,有一群年轻的技术人,用智慧和创新让它每天都变得更“聪明”一点。 ...
《程序人生》系列-这个程序员只用了20行代码就拿了冠军
你知道的越多,你不知道的越多 点赞再看,养成习惯GitHub上已经开源https://github.com/JavaFamily,有一线大厂面试点脑图,欢迎Star和完善 前言 这一期不算《吊打面试官》系列的,所有没前言我直接开始。 絮叨 本来应该是没有这期的,看过我上期的小伙伴应该是知道的嘛,双十一比较忙嘛,要值班又要去帮忙拍摄年会的视频素材,还得搞个程序员一天的Vlog,还要写BU
程序员把地府后台管理系统做出来了,还有3.0版本!12月7号最新消息:已在开发中有github地址
第一幕:缘起 听说阎王爷要做个生死簿后台管理系统,我们派去了一个程序员…… 996程序员做的梦: 第一场:团队招募 为了应对地府管理危机,阎王打算找“人”开发一套地府后台管理系统,于是就在地府总经办群中发了项目需求。 话说还是中国电信的信号好,地府都是满格,哈哈!!! 经常会有外行朋友问:看某网站做的不错,功能也简单,你帮忙做一下? 而这次,面对这样的需求,这个程序员
网易云6亿用户音乐推荐算法
网易云音乐是音乐爱好者的集聚地,云音乐推荐系统致力于通过 AI 算法的落地,实现用户千人千面的个性化推荐,为用户带来不一样的听歌体验。 本次分享重点介绍 AI 算法在音乐推荐中的应用实践,以及在算法落地过程中遇到的挑战和解决方案。 将从如下两个部分展开: AI 算法在音乐推荐中的应用 音乐场景下的 AI 思考 从 2013 年 4 月正式上线至今,网易云音乐平台持续提供着:乐屏社区、UGC
一点一滴记录 Java 8 stream 的使用
日常用到,一点一滴记录,不断丰富,知识积累,塑造自身价值。欢迎收藏 String 转 List String str = 1,2,3,4; List&lt;Long&gt; lists = Arrays.stream(str.split(",")).map(s -&gt; Long.parseLong(s.trim())).collect(Collectors.toList()); Lis...
8年经验面试官详解 Java 面试秘诀
    作者 | 胡书敏 责编 | 刘静 出品 | CSDN(ID:CSDNnews) 本人目前在一家知名外企担任架构师,而且最近八年来,在多家外企和互联网公司担任Java技术面试官,前后累计面试了有两三百位候选人。在本文里,就将结合本人的面试经验,针对Java初学者、Java初级开发和Java开发,给出若干准备简历和准备面试的建议。   Java程序员准备和投递简历的实
面试官如何考察你的思维方式?
1.两种思维方式在求职面试中,经常会考察这种问题:北京有多少量特斯拉汽车? 某胡同口的煎饼摊一年能卖出多少个煎饼? 深圳有多少个产品经理? 一辆公交车里能装下多少个乒乓球? 一
相关热词 c# 输入ip c# 乱码 报表 c#选择结构应用基本算法 c# 收到udp包后回包 c#oracle 头文件 c# 序列化对象 自定义 c# tcp 心跳 c# ice连接服务端 c# md5 解密 c# 文字导航控件
立即提问