JavaScript实战

一、获取多个选中值

1. 多选框

body代码：

js代码：

2. 多选下拉框

body代码：

js代码：

• 删除select元素里面的所有option

①$("#novel_notdownload_list").empty();
②$("#novel_notdownload_list").html("");
③$("#novel_notdownload_list").find("option").remove()

• 获得select被选中option的value和text

<select id="select">
    <option value="A" url="http://www.baidu.com">第一个option</option>
    <option value="B" url="http://www.qq.com">第二个option</option>
</select>

​ JavaScript原生的方法 ：

1:拿到select对象： `var myselect=document.getElementById("select");
2:拿到选中项的索引：var index=myselect.selectedIndex ; // selectedIndex代表的是你所选中项的index
3:拿到选中项options的value： myselect.options[index].value;
4:拿到选中项options的text： myselect.options[index].text;
5:拿到选中项的其他值，比如这里的url： myselect.options[index].getAttribute('url');

​ jQuery方法 ：

1:var options=$(“#select option:selected”); //获取选中的项
2:alert(options.val()); //拿到选中项的值
3:alert(options.text()); //拿到选中项的文本
4:alert(options.attr('url')); //拿到选中项的url值

二、改变style内的值

document.getElementById("id").style.width = "345px";

三、实现图片的旋转

1. 点击

# css代码：
 .plus{
    position: relative;
    z-index: 50000000000000000000;
    width: 40px;
    height: 40px;
    right:20px;
    top:15px;
    border-radius:50%;
    cursor:pointer;
    /*-webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;*/
    transition: transform 0.4s ease-out;
}

# js代码：
var a = 0;
$(".plus").click(function () {
    if (a === 0) {
        document.getElementById("plus").style.transform = "rotate(-180deg)";
        a = 1;
    } else if (a === 1) {
        document.getElementById("plus").style.transform = "rotate(0deg)";
        a = 0;
    }
});

2. 鼠标悬停旋转图片

# css代码：
 .plus{
    position: relative;
    z-index: 50000000000000000000;
    width: 40px;
    height: 40px;
    right:20px;
    top:15px;
    border-radius:50%;
    cursor:pointer;
    /*-webkit-transition: -webkit-transform 0.4s ease-out;
    -moz-transition: -moz-transform 0.4s ease-out;*/
    transition: transform 0.4s ease-out;
}
.plus:hover{
   transform: rotate(360deg);
}

参考博客：http://blog.csdn.net/u010297791/article/details/52609296

四、秒数转化为几天几时几分几秒

var second = 360000,minute=0,hour=0,day=0;
minute = parseInt(second/60); //算出一共有多少分钟
second%=60;//算出有多少秒
var aa = Math.round(second);
if(minute>60) { //如果分钟大于60，计算出小时和分钟
    hour = parseInt(minute/60);
    minute%=60;//算出有多分钟
}
if(hour>24){//如果小时大于24，计算出天和小时
    day = parseInt(hour/24);
    hour%=24;//算出有多分钟
}
console.log(day+"天"+hour+"小时"+minute+"分"+aa+"秒");

五、js小数转化为整数

1. 小数转化为整数：

• 下退：Math.floor(3.88888) = 3
  上进：Math.ceil(3.11) = 4
  四舍五入：Math.round(12.4) = 12

2. 小数位数控制

• 保留到整数：Math.round(12.1);
• 保留一位整数：Math.round(12.1 * 10) / 10;
• 保留两位整数：Math.round(12.1 * 100) / 100;

六、当前点击元素的序号

$(this).index()   来获取当前兄弟元素的序号
$(function(){
    var index;
    $('li').click(function(){
        index = $(this).index();
        console.log(index);
    });
});

七、跳转链接/页面

window.location.href="";     //当前页面跳转
window.open("");      //新页面跳转

八、解析处理浏览器地址

需求：解析地址栏中localhost:8080/testProject/login?username=admin&password=admin123的username和password的值

// 截取字符串
function GetQueryString(name) {
    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
    var r = window.location.search.substr(1).match(reg);
    if (r != null) return unescape(r[2]);
    return null;
}
var username = GetQueryString("username");
var password = GetQueryString("password");

九、时间戳与日期格式的相互转换

1. 时间戳转换为日期格式

var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()) + ':';
let s = (date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds());
return Y+M+D+h+m+s;

2. 日期格式转换为时间戳

Math.round(new Date() / 1000)

十、cookie操作

1. 设置Cookie，并指定路径

function setCookie(name,value,day){
    /*
    *--------------- setCookie(name,value,day) -----------------
    * setCookie(name,value,day)
    * 功能:设置得变量name的值
    * 参数:name,字符串;value,字符串;day,数值（天）
    * 实例:setCookie('username','baobao',1),此 cookie 将被保存 1 天
    *--------------- setCookie(name,value,day) -----------------
    */
    　　var exp　= new Date();
        exp.setTime(exp.getTime() + day*24*60*60*1000);
        document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString()+"; path=/";
};

2. 获取指定Cookie值

function getCookie(name){
	/*
	*--------------- getCookie(name) -----------------
	* getCookie(name)
	* 功能:取得变量name的值
	* 参数:name,字符串.
	* 实例:alert(getCookie("baobao"));
	*--------------- getCookie(name) -----------------
	*/
	var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
	if(arr !=null) 
	return unescape(arr[2]); 
} ;

3. 清除目录是”/“的所有cookie

function clearAllCookie() {  
	var keys = document.cookie.match(/[^ =;]+(?=\=)/g);  
	if(keys) {  
	for(var i = keys.length; i--;)  
	document.cookie = keys[i] + '=0;expires=' + new Date(0).toUTCString()+"; path=/";
	}  
} 
# Tip:
    Cookie不仅仅有名字和值两个属性，还有域（domain），过期时间（expires），路径（path）等属性。其中，不同的域、不同的路径下可以存在同样名字的cookie。
    一般我们删除cookie的方法是用一个同样名字、过期时间为过去某个时候的Cookie覆盖之。这时就一定要搞清楚你要删除的cookie的域和路径，Cookie域和路径要一样才能被覆盖。否则产生的效果就是那个想要被删除的Cookie具有神奇的生命力，无法被清除～～～

十一、处理map集合

目的：将value值里面的标点符号换成中文标点符号。

<script type="text/javascript" src="../statics/js/messages.js"></script>
# 局部内容
var messages = {
    'admin.stackVersions.version.upgrade.upgradeOptions.EU.description': "服务在执行升级时停止.导致停机时间,但升级速度更快."
}

# js内容
$(function () {
    for (var key in bb) {
        console.log(" '" + key + "' : '" + bb[key].replace(/\,/g, '，').replace(/\./g, '。') + "',");
    }
});

在浏览器的控制台上可以看到打印信息，将内容复制到一个文件内，然后整体替换一些多余东西，ok。

十二、数组去重

// 最简单数组去重法
/*
 * 新建一新数组，遍历传入数组，值不在新数组就push进该新数组中
 * IE8以下不支持数组的indexOf方法
 **/
function uniq(array){
    var temp = []; //一个新的临时数组
    for(var i = 0; i < array.length; i++){
        if(temp.indexOf(array[i]) == -1){
            temp.push(array[i]);
        }
    }
    return temp;
}

var aa = [1,2,2,4,9,6,7,5,2,3,5,6,5];
console.log(uniq(aa));

十三、获取dom元素的width值

javascript中获取dom元素高度和宽度的方法如下：

网页可见区域宽： document.body.clientWidth
网页可见区域高： document.body.clientHeight
网页可见区域宽： document.body.offsetWidth (包括边线的宽)
网页可见区域高： document.body.offsetHeight (包括边线的高)
网页正文全文宽： document.body.scrollWidth
网页正文全文高： document.body.scrollHeight
网页被卷去的高： document.body.scrollTop
网页被卷去的左： document.body.scrollLeft

对应的dom元素的宽高有以下几个常用的：

元素的实际高度：document.getElementById("div").offsetHeight
元素的实际宽度：document.getElementById("div").offsetWidth
元素的实际距离左边界的距离：document.getElementById("div").offsetLeft
元素的实际距离上边界的距离：document.getElementById("div").offsetTop

jquery也有获取元素高度、top、left的写法：

$("#rack").height();
x=$("p").offset();
$("#span1").text(x.left);
$("#span2").text(x.top);

十四、取数组中最大值或最小值

let arr = [0,1,2,8,96,56,47];
// 取最大值
max: function (arr) {
    let max = arr[0];
    arr.forEach(function (ele, index, arr) {
        if (ele > max) {
            max = ele;
        }
    });
    return max;
},
// 取最小值
min: function (arr) {
    let min = arr[0];
    arr.forEach(function (ele, index, arr) {
        if (ele < min) {
            min = ele;
        }
    });
    return min;
},

参考链接：https://www.w3cplus.com/javascript/calculate-the-max-min-value-from-an-array.html

十五、遍历数组

// demo
let rackItem = [{...},{...},{...}];
rackIdItem.forEach(function (ele, index, arr) {
    // ele 代表一个map
    // index 代表数组坐标序号
    // arr 代表整个数组  
    let rackId = ele["rackId"];
    let rackTotalHeight = ele["rackTotalHeight"];
    $("#rack" + rackId + "_view").css("margin-top", maxHeight - rackTotalHeight);                });

十六、比较大小

在js里面比较大小，需要使用Number函数，将对象转换成数值。

let screenWidth = Number(screen.width);

十七、判断分辨率大小

screen.width;
screen.height;

十八、jQuery用正则查找元素：jQuery选择器使用

$(“a[id^=abc]”) 选择a元素，id以abc开头
$(“a[id$=abc]”) 选择a元素，id以abc结尾
$(“a[href*=com]”) 选择a元素，href包含com

十九、bootstrap静态弹出展示

https://v2.bootcss.com/javascript.html#popovers

---