前端交互与动态计算实践-优快云博客

本文介绍了前端开发中实现输入框清空、按钮状态切换、动态预计到期时间计算等交互功能的方法。通过具体代码示例展示了如何使用JavaScript进行前端功能开发。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1,点击小×,文本框内容清空,并且[校验]按钮置灰

实现代码:

$partnerCode.inputclean({
        inputClearClass: 'inputClearBtn',
        deviationTop: 0,
        parentHoverClass: 'inputParentLi',
        clickCallback: function (e) {
            checkPartnerTrigger();
        }
    });

clickCallback表示点击小×时触发的事件回调方法

创建企业时也增加该效果:

 $orgFullName.inputclean({
        deviationTop: 3,
        clickCallback: function (e) {
            $createOrgBtn.removeClass('enable');
        }
    });

2,成功创建企业时,让原来的企业取消选中

/***
 * 取消选中企业
 */
var unSelectAllRadio = function () {
    var $choice_box = $('#orgListDiv li.selected');
    $choice_box.removeClass('selected').addClass('default');
};

新增的企业默认选中:

var html = '<ul class="company-list com-enable" data-orgid="' + json2.orgId + '" >' +
                    '<li class="choice-box selected"></li>' +
                    '<li class="company-name"><span>' + orgFullName_val + '</span></li>' +
                    '<li class="company-state"><span>未购买</span></li>' +
                    '</ul>';

3,查询服务商的结果校验

console.log(json2);
            var $partnerFullName = $('#partnerFullName');
            var $partnerError=$('#partnerError');
            if (json2.value) {
                window.partnerFullName = json2.value.orgFullName;
                window.partnerId = json2.value.partnerId;

                $partnerFullName.text('服务商：' + partnerFullName);
                $partnerError.text('');
                //$partnerFullName.removeClass('warning');
            } else {
                $partnerFullName.text('');
                $partnerError.text(error_message_partner_not_found);
                if (!$partnerError.hasClass('warning')) {
                    $partnerError.addClass('warning');
                }
            }

4,添加发票时默认选中第一个

 <script id="invoiceListDot" type="text/x-dot-template">
                {{? it.invoiceInfoDtos}}
                {{ for(var prop=0;prop
                <it.invoiceInfoDtos.length
                        ; prop++){ }}
                        {{? it.invoiceInfoDtos[prop]}}
                <div class="{{ if(prop==0 && it.create==true){}}invoice-infor {{ }else {}}no-invoice{{ }}}"
                     data-index="{{= prop }}">
                    <span class="no-ivoice-icon"></span>
                    <span>普通发票</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].content }}</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].title }}</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].address }}</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].receiver }}</span>
                    <span class="ivo-margin">{{= it.invoiceInfoDtos[prop].phone }}</span>
                </div>
                {{?}}
                {{ } }}
                {{?}}
            </script>

5,动态计算预计到期时间

 var d = new Date();
        d.setFullYear(Number(d.getFullYear()) + 1);
        productPrice.endTime = d.format('yyyy-MM-dd HH:mm:ss');//'预计到期时间' 是js动态生成的,会根据 default_userPeriod变化