用vue做网站的实例/web个人网站设计代码

一、JS相关

1.进制转换

（1）十进制转二进制

十进制数除2取余法：十进制数除2，余数为权位上的数，得到的商继续除2，直到商为0。最后余数从下往上取值。

（2）二进制转十进制

把二进制按权展开：从右到左 权值乘以2的0次方到N次方

（3）二进制转八进制

3位二进制数为一组：从右到左3位二进制数按权展开相加得到一位八进制数，不足补零

（4）八进制转二进制

八进制数除2取余法：除2取余，余数从下往上取值

（5）二进制转十六进制

4位二进制数为一组：从右到左4位二进制数按权展开相加得到一位十六进制数，不足补零

（6）十六进制转二进制

十六进制除2取余法：除2取余，余数从下往上取值

（7）十进制转八进制或十六进制

有2种方法：

一是：把十进制转为二进制后再转八进制或十六进制

二是：十进制除8或除16取余法，余数也是从下往上取值

（8）八进制或十六进制转十进制 

把八进制数或十六进制数按权展开相加得到十进制数：比如八进制226为 2*8^2+2*8^1+6*8^0

（9）八进制与十六进制转换

有2种方法：

一是：先转换为二进制再相互转换

二是：想转换为十进制再互相转换

（10）负数转换

先将负数写为补码形式，再根据二进制转换其他进制的方法进行：

比如将十进制数 -9 转为八进制：

-9的补码为1111 1111 1111 0111（先原码--再反码--再补码）

然后从右往左3位一划，不足补零，最后得到177767，即为-9的八进制形式

总结：

十进制（八进制、十六进制）转二进制：除2取余法

二进制转十进制：从右到左按权展开（2的n次方）

二进制转八进制：3位一划，从右到左按权展开，不足补零（2的n次方）

二进制转十六进制：4位一划，从右到左按权展开，不足补零（2的n次方）

十进制转八进制（十六进制）：除8（16）取余法

八进制（十六进制）转十进制：从右到左按权展开（8的n次方或16的n次方）

八进制与十六进制相互转换：可先转为二进制（十进制）再相互转换

十进制负数转八进制（十六进制）：先将负数写为补码再用二进制转换

2.js超出显示省略号

str = "开始时间,结束时间,span名称,应用名称,页面访问趋势"

需求：只显示字符串前3项，其余以省略号展示，并且鼠标悬浮时展示全部

newStr = str.split(',').slice(0,3).join(',') + ',...'

<div :title="str">

        newStr:{{newStr}}

</div>

3.call()、apply()、bind()用法

（1）都用来重定义this指向

var name = "小小" , age = 20

var obj = {

        name:"阿拙",

        objjAge:this.age,

        myFun:function(){

                // 此时取不到this.age值 因为this指向obj这个对象

                console.log(this.name + "年龄：" + this.age) 

        }

} 

var data = {

        name:'苏苏",

        age：19

}

obj.myFun.call(data)          //   苏苏年龄：19

obj.myFun.apply(data)       //   苏苏年龄：19

obj.myFun.bind(data)()      //   苏苏年龄：19

由以上代码可知：call、apply和bind都可以通过传参调用obj对象内的方法将值传递进去，bind返回的是一个新的函数，必须调用它才能被执行。

（2）对比call、apply、bind传参

var name = "小小" , age = 20

var obj = {

        name:"阿拙",

        objjAge:this.age,

        myFun:function(fm,to){

                // 此时取不到this.age值 因为this指向obj这个对象

                console.log(this.name + "年龄：" + this.age,"来自" + fm + "去往" + to) 

        }

} 

var data = {

        name:'苏苏",

        age：19

}

obj.myFun.call(data,'北京','上海')          //   苏苏年龄：19,来自北京去往上海

obj.myFun.apply(data,['北京','上海'])     //   苏苏年龄：19,来自北京去往上海

obj.myFun.bind(data,'北京','上海')()      //    苏苏年龄：19,来自北京去往上海

由以上代码可知：call、apply和bind三个函数的第一个参数都是this的指向对象 ，第二个参数传参有区别：call和bind都是直接放在第一个参数后，以逗号隔开；apply的第二个参数需要放在数组里。三者的参数不限定是 string 类型，允许是各种类型，包括函数 、 object 等。

4.js点击按钮复制文本

因为select()输入框只对input和textarea有效，对<p>无效，所以可以在p标签后添加textarea标签并将其隐藏，点击按钮时先把<textarea>的value改为<p>的innerText，然后复制<textarea>的内容。

<style type="text/css">

 .wrapper {position: relative;}

 #input {position: absolute;top: 0;left: 0;opacity: 0;z-index: -10;}

</style>

<div class="wrapper">

 <p id="text">被复制的内容</p>

 <textarea id="input">已隐藏</textarea>

 <button onclick="copyText()">复制</button>

</div>

<script type="text/javascript">

 function copyText() {

  var text = document.getElementById("text").innerText;

  var input = document.getElementById("input");

  input.value = text; // 修改文本框的内容

  input.select(); // 选中文本

  document.execCommand("copy"); // 执行浏览器复制命令

  alert("复制成功");

 }

</script>

5.js获取数组对象最大（小）值

list = [{ id: 1, name: 'jack' },
        { id: 2, name: 'may' },
        { id: 3, name: 'shawn' },
        { id: 4, name: 'tony' }]

需要获取list数组对象中id属性的最大值和最小值：

（1）Math方法

// 最大值 4
Math.max.apply(Math,this.list.map(item => { return item.id }))
// 最小值 1
Math.min.apply(Math,this.list.map(item => { return item.id }))

（2）sort排序（会使原数组元素位置发生变化）

// 最大值 4
this.list.sort((a, b) => { return b-a })[0].id  
// 最小值 1
this.list.sort((a, b) => { return a-b })[0].id 

6.for循环内异步操作

（1）实现每隔1秒打印0~4的值

function box(index){

        if(index <5){

                console.log("index is : ",index)

                setTimeout(function(){

                        box(index+1)

                },1000) 

        }

}

box(0)

（2）使用递归实现倒计时

function showTime(count){

        console.log("count is : ", count)

        if(count==0){

                console.log("All is Done !")

        }else{

                count -= 1

                setTimeout(function(){

                        showTime(count)

                },1000)

        }

}

showTime(10)

（3）async和await实现打印0~4

var asyncFunc = function(arr,i){

        return new Promise(resolve,reject){

                setTimeout(function(){

                        arr.push(i)

                        console.log("index is: " ,i)

                        resolve()

                },1000)

        }

}

var box1 = async function(){

        var arr = []

        for(var i=0;i<5;i++){

                await asyncFunc(arr,i)

        }

        console.log(arr)

}

box1()

（4）即时执行函数打印数值

function buildList(list){

        var result = []

        for(var i=0;i<list.length;i++){

                var item = 'item' + list[i]       // item6   item7  item8

                result.push(function(index,it){

                        return function(){

                                console.log(it + ' ' + list[index])

                        }

                }(i,item))

        }

        return result

}

function testList(){

        var fnList = buildList([6,7,8])

        for(j=0;j<fnList.length;j++){

                fnList[j]()

        }

}

testList()

7.js求n个数中的最大值

// 求n个数中的最大值
function getMax(arr) {
    var max = arr[0];
    for (var i = 1; i < arr.length; i++) {
        if (max < arr[i]) {
            max = arr[i];
        }
    }
    console.log(max);
}
var array = [12, 17, 9, 0, 90]

getMax(array)   // 90

8.js获取本周、本月时间区间

未完待续......