下载文件后刷新页面

$('#status_server').modal({
        width:670,
        relatedTarget: this,
        onConfirm: function(e){
            var str1=location.href
            $('#status_server').modal('close');
            var export_reason=$('#tab_reason').val()
            if(!export_reason){
                return false;
            }
            
            $.ajaxSettings.async=false   //sync
            var str =("{:U('Admin/engagement/export_ppa',array('edid'=>'ed_id'))}".replace('ppaid',ppa_id));
            location.href=str
            
            sleep(800);
            location.href=str1
        },
        oncancel: function(e){
            window.location.reload();
        }                
    });

使用sleep的方式，实现了下载后并刷新

function sleep(time){
     var timeStamp = new Date().getTime();
     var endTime = timeStamp + time;
     while(true){
         if (new Date().getTime() > endTime){
          return;
         } 
     }
}

编辑完字段后，需要页面刷新来显示效果，刷新后有想要页面滚动轴保留在刷新前的位置。但自己刷新页面时，又想要回到开始位置

1.刷新后滚动轴不动

其中，page_top为1 刷新时页面滚动到最上边，其他情况下，滚动到page_top值对应的位置

在滚动轴生效的div上要加这个 id='content' onscroll="SetH(this)"

    var _h = 0;
    var page_top='{$page_top}'; //1:to top
    function SetH(o) {
            _h = $(o).scrollTop();
            <!-- console.log("h****************:",_h); -->
            SetCookie("a", _h)
    }
    window.onload = function () {
        if(!window.name){
           window.name = "reload"
        }
        else{
            if(page_top!=1){
                $("#content")[0].scrollTop=GetCookie("a")
                
                var url = document.URL   //获取当前页面的网址信息URL;
                var num = url.indexOf('/page_top');  //获取＃在的位置信息
                if (num){
                    URL = url.substring(0,num);  //截取网址信息
                    history.pushState(null,null,URL);  //将网址设置
                }
            }
        }
    }
    function SetCookie(sName, sValue) {
        document.cookie = sName + "=" + escape(sValue) + "; ";
    }
    function GetCookie(sName) {
        var aCookie = document.cookie.split("; ");
        for (var i = 0; i < aCookie.length; i++) {
            var aCrumb = aCookie[i].split("=");
            if (sName == aCrumb[0]){
                return unescape(aCrumb[1]);
            }
        }
        return 0;
    }

2.修改完值后，将page_top的值传到url上

这样赋值后，页面会刷新为指定的网址

location.href=str1.split('/page_top')[0]+'/page_top/'+_h

3.后台处理

if(isset($filter['page_top'])){
      $data['page_top']=$filter['page_top'];  ==>这个值会传到js中
}else{
     $data['page_top']='1'; #to top
}

4.在js中在将滚动轴滚动到指定位置后，将url中的page_top删除了，以防止手动刷新时不能回到最上边的情况

双击复制文本

function set_dbclickCopyText() {   //绑定
    $('.layui-table-cell').dblclick(function (e) {
        dbclickCopyText(this)
    })
}

function dbclickCopyText(obj){  //双击到粘贴板
    var copy_text=$(obj).text()
    if(copy_text){
        var copy_obj=document.createElement('input')
        document.body.appendChild(copy_obj)
        copy_obj.value=copy_text
        copy_obj.select()
        document.execCommand('copy')
        copy_obj.remove()
        alert('copy successfully')
    }
    
}

参考：https://hexingxing.cn/html-double-click-or-single-click-selection-to-copy-tag-content/

还有一个绑定的方式

// 绑定双击事件到p元素
document.getElementById('textToCopy').addEventListener('dblclick', function() {
  copyText('textToCopy');
});

jquery中find()和filter()

find(expr|obj|ele) 返回值:jQuery

概述

搜索所有与指定表达式匹配的元素。这个函数是找出正在处理的元素的后代元素的好方法。

所有搜索都依靠jQuery表达式来完成。这个表达式可以使用CSS1-3的选择器语法来写。

参数

expr String 用于查找的表达式
jQuery object object 一个用于匹配元素的jQuery对象
element DOMElement 一个DOM元素

filter(expr|obj|ele|fn)

概述

筛选出与指定表达式匹配的元素集合。

这个方法用于缩小匹配的范围。用逗号分隔多个表达式

参数

expr String 字符串值，包含供匹配当前元素集合的选择器表达式。
jQuery object object 现有的jQuery对象，以匹配当前的元素。
element Expression 一个用于匹配元素的DOM元素。
function(index) Function 一个函数用来作为测试元素的集合。它接受一个参数index，这是元素在jQuery集合的索引。在函数， this指的是当前的DOM元素。

https://www.php.cn/faq/374851.html

table设置am-table-hover 后，鼠标悬浮在该行时，背景颜色显示为#e9e9e9

如果该行有隐藏的白色图表，悬浮时能够看到，，这是需要设置如下样式：

tr:hover{
　　font[color="white"]{
　　color:#e9e9e9;
　　}
}

即可

无刷新更换页面url

window.history.pushState(state, title, url)

var url = document.URL   //获取当前页面的网址信息URL;
var num = url.indexOf('#');  //获取＃在的位置信息
if (num){
    URL = url.substring(0,num);  //截取网址信息
    history.pushState(null,null,URL);  //将网址设置
}

设置checkbox为只读(readOnly)的两种方式

css 加粗

font-weight 值从100到900，最常用font-weight的值为bold

normal : 正常的字体。相当于number为400。声明此值将取消之前任何设置
bold : 粗体。相当于number为700。也相当于b对象的作用

1、在html对对象直接加粗可以用<b>或<strong>对其加粗
2、使用CSS加粗对象可以使用font-weight:bold即可实现加粗。

JS判断输入值是否为正整数等

使用test方法进行正则匹配

if (!(/(^[1-9]\d*$)/.test(num))) { 
　　　alert(‘输入的不是正整数’); 
　　　return false; 
}

附判断数字、浮点的正则表达：
”^\\d+$” //非负整数（正整数 + 0）
“^[0-9]*[1-9][0-9]*$” //正整数
“^((-\\d+)|(0+))$” //非正整数（负整数 + 0）
“^-[0-9]*[1-9][0-9]*$” //负整数
“^-?\\d+$” //整数
“^\\d+(\\.\\d+)?$” //非负浮点数（正浮点数 + 0）
“^(([0-9]+\\.[0-9]*[1-9][0-9]*)|([0-9]*[1-9][0-9]*\\.[0-9]+)|([0-9]*[1-9][0-9]*))$” //正浮点数
“^((-\\d+(\\.\\d+)?)|(0+(\\.0+)?))$” //非正浮点数（负浮点数 + 0）
“^(-?\\d+)(\\.\\d+)?$” //浮点数

/^[1-9][0-9]*([.][0-9]+)?$/ 非零开头的整数或小数
非零开头的整数或两位小数

/^[1-9][0-9]*([.][0-9]{1,2})?$/

/^[1-9][0-9]*([.][0-9]{2})?$/

a:hover {text-decoration: underline;}

下载excel时不想要刷新页面

function httpPost(URL, PARAMS, target="") {
    var temp = document.createElement("form");
    temp.action = URL;
    temp.target = target;
//   temp.target = "_blank";
    temp.method = "post";
    temp.style.display = "none";

    for (var x in PARAMS) {
        var opt = document.createElement("textarea");
        opt.name = PARAMS[x]['name'];
        opt.value = PARAMS[x]['value'];
        temp.appendChild(opt);
    }

    document.body.appendChild(temp);
    temp.submit();
    return temp;
}
    

function export_data(){
    if(!$("#s_product_id").val()){
        alert("Product can't be null!");
        return false;
    }
    url = "{:U('Admin/Ppa/export_excel/')}";
    conversion_data=$("#convart_data_form_id").serializeArray();
    httpPost(url, conversion_data, target="")
}

table中的select 下拉框显示不出来

设置成默认值即可

js 计算7天后的日期

var weekly_start = new Date($('#end_time').val());
var weekly_end = new Date(weekly_start.getTime() + 7*24*60*60*1000);
$('#end_time').val($('#end_time').val()+' ~ '+formattedDate(weekly_end))

js 时间日期格式化

js 计算百分比

Number('0.5') 将数字字符串转为数字

parseInt('0.5') 转整数，返回0

day=day+Number(all_data.eq(i).val())

(4/5*100).toFixed(2)+'%' ‘80.00%’

js input 设置超链接

效果如下：

js 获取上传文件的文件名 input type=file

在浏览器端，JavaScript可以通过文件输入控件实现本地文件上传，但由于安全限制，无法直接获取本地文件的完整路径名。不过可以通过以下方式获取本地文件名：

通过文件输入控件获取文件对象

可以通过文件输入控件的 files 属性获取文件对象，文件对象中包含了文件名、大小等属性。示例代码如下：


<input type="file" id="fileInput">


const fileInput = document.getElementById('fileInput');
const file = fileInput.files[0]; // 获取第一个文件对象
const fileName = file.name; // 获取文件名
console.log(fileName);

在 JavaScript 中获取真实元素的宽度

要获得当前计算的实际尺寸，您有两种选择:

getComputedStyle(element,null).getPropertyValue("width")
element.getBoundingClientRect().width

第一个是一个以(px)为单位的 CSS 字符串，第二个是一个数字。

注意，getComputedStyle 是一个全局函数。旧的教程可能会告诉您使用 document.getDefaultView.getComputedStyle 等，这已不再是必需的。

亲试了第二种，非常好用，起先是使用$('#element').eq(0).outWidth()的方式获取宽度，但是明明宽度是99.5，获取出来的确实100，但使用上述的第二种，可以准确获取99.5

设置宽度的方式为 $('#element').css('width','500px')

https://www.coder.work/article/4137404

js with

个人的理解：with就是为了封装某个对象，减少某个对象的调用

比如：定义一个对象 var a={},a.name='张三';a.sex='女';

一般的调用方式 console.log(a.name); 或者 console.log(a.sex);

使用with之后的调用

with(a){　　

　　console.log(name);

　　console.log(sex);

}

js 校验16进制和百分数

百分数相加

select 触发两次

1. trigger会触发两次

2. data-am-validator会触发两次

页面上重新登录login

单行文本超出经常使用省略号，如何判断文本是否超出

<style type="text/css">  
#ellipsis{  
    width: 100px;  
    overflow: hidden;   /* 如果内容超出父级容器，超出部分将会被隐藏 */
    white-space: nowrap;   /* 禁止换行 */
    text-overflow: ellipsis;   /* 超出部分用省略号表示 */
}  
</style>  
<body>  
    <div id="ellipsis">今天是你的生日，我的祖国！！！</div>  
    <script>  
        var clientWidth = document.getElementById("ellipsis").clientWidth;  
        var scrollWidth = document.getElementById("ellipsis").scrollWidth;  
        if(clientWidth<scrollWidth){  
            alert("已省略……");  
        }  
    </script>  
</body>

overflow 属性用于当一个元素太大而无法适应父级容器的大小时需要做什么。该属性有四个常用的值：

visible: 默认值。内容不会回修剪，可以呈现在元素框之外。
hidden: 如果内容超出父级容器，超出部分将会被隐藏
scroll: 无论是否超出容器，都会出现一个滚动条。
auto: 如果没有超出容器的显示，将会正常显示，如果超出，将会出现一个滚动条。

white-space用来处理空格的，主要有五个取值(normal，nowrap，pre，pre-wrap，pre-line)

normal：默认，空白会被浏览器忽略。
nowrap：文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。
pre：空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。
pre-wrap：保留空白符序列，但是正常地进行换行。
pre-line：合并空白符序列，但是保留换行符。

form action

一种 action="{:U('Admin/Ipxact/update_cids')}"

一种 action='/Ipxact/ipxact_task'，这种可能会有问题

Form中button按钮的onclick事件失灵

最近做项目时，发现button的onclick事件在没有form时是正常工作的。如果把button放到form中，类似：

</form>

在网上找了下资料后，终于解决了，记录如下：

button中的type 属性规定了按钮的类型。Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。我用的是谷歌浏览器，默认也是“submit”，所以button的onclick事件会被form的action所取代。解决方法是指定button的type类型为button。类似如下：

</form>

js 获取传参this的值

onkeyup="getCustomerInfo(this)"

function getCustomerInfo(obj){
　　console.log(obj)
　　console.log(obj.value)
}

Js（DOM）和Jq 对象的相互转换

只有Dom对象才能使用Dom中的方法，JQuery对象才能使用 JQuery中的方法，两者不可以相互混用

jq--->dom

JQuery提供了两种方法来转换 [index] 和 get(index);

方法一

var $cr=$("#cr");  //jq对象
var cr = $cr[0];  //jq 转dom

方法二

var cr=$("#cr");  //jq对象
var cr=$cr.get(0); //jq转dom

dom-->jq

dom对象转为jq比较简单，

var cr=document.getElementById("cr");  //dom对象
var $cr=$(cf);  //dom转jq

通过以上的方法，可以在dom对象和jq对象中相互转换

js 删除指定元素

ps 变量名前不加var，设置的变量是全局变量，在哪里都可以用它的值

all_cids：

想要删掉的的cid_name是500000A5

js 移除required

if($('#pullram').val()=='Yes'){
    $('#format_obf_div').hide();
    $('#format_pullram_div').show();
    $('#formal_obf').removeAttr('required')
    $('#formal_pullram').attr('required','required')
}else{
    $('#format_obf_div').show();
    $('#format_pullram_div').hide();
    $('#formal_obf').attr('required','required')
    $('#formal_pullram').removeAttr('required')
}

html required属性

$('#source_type_div input[type=text],#source_type_div select,#released_pkg_div input[type=text],#released_pkg_div select').each(function() {
　　$(this).attr('required',true);
});

$('#source_type_div input[type=text],#source_type_div select,#released_pkg_div input[type=text],#released_pkg_div select').each(function() {
　　$(this).removeAttr('required');
});

设置readonly

$('input').attr('readonly','readonly')
$('select').selected('disable')
$('button.am-selected-btn').attr('disabled','disabled')
$('select').next().attr('style','width: 100%;!-- $(':button:disabled i').addClass('opacity4') //Fade select -->
if('{$edit_owners}'){
$('#release_owner').selected('enable')
$('#fpga_owner').selected('enable')
$('#release_owner').next().attr('style','width: 100%;')
$('#fpga_owner').next().attr('style','width: 100%;')

$('#release_owner').next().eq(0).find('button>i').removeClass('opacity4')
$('#fpga_owner').next().eq(0).find('button>i').removeClass('opacity4')

posted @ 2023-11-24 15:18 声声慢43 阅读(39) 评论(0) 编辑收藏举报

会员力量，点亮园子希望

刷新页面返回顶部

yuandian43

js 常用命令

下载文件后刷新页面

编辑完字段后，需要页面刷新来显示效果，刷新后有想要页面滚动轴保留在刷新前的位置。但自己刷新页面时，又想要回到开始位置

1.刷新后滚动轴不动

2.修改完值后，将page_top的值传到url上

3.后台处理

4.在js中在将滚动轴滚动到指定位置后，将url中的page_top删除了，以防止手动刷新时不能回到最上边的情况

双击复制文本

jquery中find()和filter()

无刷新更换页面url

设置checkbox为只读(readOnly)的两种方式

css 加粗

JS判断输入值是否为正整数等

下载excel时不想要刷新页面

table中的select 下拉框显示不出来

js 计算7天后的日期

js 时间日期格式化

js 计算百分比

js input 设置超链接

js 获取上传文件的文件名 input type=file

在 JavaScript 中获取真实元素的宽度

js with

js 校验16进制和百分数

百分数相加

select 触发两次

页面上重新登录login

单行文本超出经常使用省略号，如何判断文本是否超出

white-space用来处理空格的，主要有五个取值(normal，nowrap，pre，pre-wrap，pre-line)

form action

Form中button按钮的onclick事件失灵

js 获取传参this的值

Js（DOM）和Jq 对象的相互转换

js 删除指定元素

js 移除required

html required属性

设置readonly

公告

yuandian43

js 常用命令

下载文件后刷新页面

编辑完字段后，需要页面刷新来显示效果，刷新后有想要页面滚动轴保留在刷新前的位置。但自己刷新页面时，又想要回到开始位置

1.刷新后滚动轴不动

2.修改完值后，将page_top的值传到url上

3.后台处理

4.在js中在将滚动轴滚动到指定位置后，将url中的page_top删除了，以防止手动刷新时不能回到最上边的情况

双击复制文本

jquery中find()和filter()

无刷新更换页面url

设置checkbox为只读(readOnly)的两种方式

css 加粗

JS判断输入值是否为正整数等

下载excel时不想要刷新页面

table中的select 下拉框显示不出来

js 计算7天后的日期

js 时间日期格式化

js 计算百分比

js input 设置超链接

js 获取上传文件的文件名 input type=file

在 JavaScript 中获取真实元素的宽度

js with

js 校验16进制 和百分数

百分数相加

select 触发两次

页面上重新登录login

单行文本超出经常使用省略号，如何判断文本是否超出

white-space用来处理空格的，主要有五个取值(normal，nowrap，pre，pre-wrap，pre-line)

form action

Form中button按钮的onclick事件失灵

js 获取传参this的值

Js（DOM） 和Jq 对象的相互转换

js 删除指定元素

js 移除required

html required属性

设置readonly

公告

js 校验16进制和百分数

Js（DOM）和Jq 对象的相互转换