显示和隐藏div(注册页面用layui+idea)

在这里插入图片描述
点击
在这里插入图片描述
代码:
在这里插入图片描述

<div class="layui-form-item" style="position: relative; left: -10px; height: 32px;">
                                <input type="checkbox" name="agreement" lay-skin="primary" checked="">
                                <span  onClick="show();" >
                                    <div id="oDiv" style="display: none" class="layui-unselect layui-form-checkbox layui-form-checked" lay-skin="primary">
                                        <i class="layui-icon layui-icon-ok"></i>
                                    </div>
                                    <div id="nDiv" class="layui-unselect layui-form-checkbox" lay-skin="primary">
                                        <i class="layui-icon layui-icon-ok"></i>
                                    </div>
                                </span>
                                <a href="https://fly.layui.com/instructions/terms.html" target="_blank" style="position: relative; top: 4px; left: 5px; color: #999;">同意用户服务条款</a>
                            </div>

在这里插入图片描述

<script>
        function show(){
            //alert(document.getElementById("oDiv").value);
            var flag = document.getElementById("oDiv").value;
            if (flag=='false'||flag==''||flag==null){
                document.getElementById("oDiv").style.display="";
                document.getElementById("nDiv").style.display="none";
                document.getElementById("oDiv").value='true';
            }else{
                document.getElementById("oDiv").style.display="none";
                document.getElementById("nDiv").style.display="";
                document.getElementById("oDiv").value='false';
            } 
        }
    </script>
  • 0
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
要在前端显示导出进度条,可以使用layui的layer和jquery库来实现。在导出数据的过程中,可以通过计算已经导出的行数和总行数来计算出导出进度,并将其传递给前端页面。然后,利用ajax轮询的方式来获取导出进度,并更新进度条的显示。以下是示例代码: 1.前端页面代码: ```html <!-- 导出按钮 --> <button class="layui-btn layui-btn-normal" onclick="exportData()">导出数据</button> <!-- 进度条 --> <div class="layui-progress layui-progress-big" lay-showPercent="true" style="display:none; margin-top:15px;"> <div class="layui-progress-bar layui-bg-green" lay-percent="0%"></div> </div> <!-- 引入jquery和layui的layer库 --> <script src="https://cdn.bootcss.com/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdn.bootcss.com/layer/3.1.1/layer.min.js"></script> <script> // 导出数据 function exportData() { // 显示进度条 $('.layui-progress').show(); // 发送ajax请求导出数据 $.ajax({ type: 'post', url: '/index/export', dataType: 'json', success: function(res) { // 隐藏进度条 $('.layui-progress').hide(); // 下载导出的文件 window.location.href = res.fileUrl; }, error: function() { // 隐藏进度条 $('.layui-progress').hide(); // 弹出错误提示 layer.msg('导出数据失败,请稍后重试!', {icon: 2}); } }); // 定时获取导出进度 var timer = setInterval(function() { $.ajax({ type: 'get', url: '/index/getExportProgress', dataType: 'json', success: function(res) { // 更新进度条显示 $('.layui-progress-bar').attr('lay-percent', res.progress + '%'); $('.layui-progress-bar').css('width', res.progress + '%'); // 导出完成,清除定时器 if (res.progress == 100) { clearInterval(timer); } } }); }, 1000); } </script> ``` 2.控制器代码: ```php // 导出数据 public function export() { try { // 省略从数据库中获取数据的代码 // ... // 获取总行数 $totalCount = count($data); // 初始化PHPExcel和PHPExcel_IOFactory require_once 'PHPExcel/PHPExcel.php'; require_once 'PHPExcel/IOFactory.php'; // 创建PHPExcel对象 $objPHPExcel = new PHPExcel(); // 创建第一个工作表 $sheet = $objPHPExcel->getActiveSheet(); // 省略将数据写入PHPExcel对象中的代码 // ... // 开始导出 ob_start(); $objWriter = PHPExcel_IOFactory::createWriter($objPHPExcel, 'Excel2007'); $objWriter->save('php://output'); $excelData = ob_get_clean(); // 生成导出文件名 $fileName = date('YmdHis') . '.xlsx'; $fileUrl = 'public/export/' . $fileName; // 保存导出文件 file_put_contents($fileUrl, $excelData); // 返回导出结果 return json([ 'fileUrl' => $fileUrl, ]); } catch (Exception $e) { // 导出数据失败,返回错误提示 return json([ 'code' => -1, 'msg' => '导出数据失败,请稍后重试!', ]); } } // 获取导出进度 public function getExportProgress() { // 获取当前导出进度 $progress = session('export_progress'); // 计算导出进度百分比 if ($progress['current'] == 0) { $percent = 0; } else { $percent = floor($progress['current'] / $progress['total'] * 100); } // 返回导出进度百分比 return json([ 'progress' => $percent, ]); } ``` 在以上代码中,我们利用ajax发送导出数据的请求,并在前端页面上显示进度条。然后,我们在控制器中逐行导出数据,并计算出导出进度,并将导出进度存储到session中。最后,我们通过ajax轮询的方式来获取导出进度,并更新进度条的显示。当导出完成时,我们返回导出结果并清除轮询定时器。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

摘星_goddess

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值