day26-js基础二

2018-08-20  本文已影响0人  七一欧

0、js引入方式和打印方式

<script>
    alert('猥琐发育，别浪')
    document.write('<b>注意，我来抓人了</b>')
</script>

1、函数

<script>
    // var a = '李白'
    // b = '杜甫'
    // // alert(b)
    // function demo() {
    //     c = '白居易'
    //     alert(c)
    //     // alert(b)
    // }
    // demo()
    // alert(c)

    var m = 100
    var n = 200

    function demo() {
        // var m
        // var n
        var m = 300
        var n = 400
        console.log(m, n)
    }

    demo()
    console.log(m, n)
</script>

<script>
    // var a = function () {
    //     alert('天青色等烟雨，而我在等你')
    // }
    // a()

    // var a = function () {
    //     alert('这是一个函数')
    // }
    // a()
    // var b = a
    // b()

    // function demo() {
    //     alert('哈哈哈')
    // }
    // var a = demo
    // a()

    function add(m, n) {
        return m + n
    }
    function sub(m, n) {
        return m - n
    }

    function cacl(m, n, fn) {
        return fn(m, n)
    }

    // alert(cacl(100, 200, sub))
    alert(cacl(100, 200, function (m, n) {
        return m * n
    }))

    // (function (m, n) {
    //     alert('炊烟袅袅升起,隔江千万里===' + m + n)
    // })('周杰伦', '双节棍')
</script>

2、数组

<script>
var arr1 = [1, '周杰伦', 2, '王力宏']
arr1['name'] = '狗蛋'
arr1['height'] = 180
// var arr = []
// var arr2 = new Array()

// 通过下标进行访问，下标从0开始
// alert(arr1[1])
// alert(arr1)
// alert(arr1['name'])
// console.log(arr1[4])
// 遍历数组
// for (var i = 0; i < arr1.length; i++) {
//     console.log(arr1[i])
// }

// for (var i in arr1) {
//     console.log(arr1[i])
// }

string1 = '12345,上山打老虎'
for (var i = 0; i < string1.length; i++) {
    console.log(string1[i])
}
</script>

3、对象


function Person(name, age, height, weight) {
    this.name = name
    this.age = age
    this.height = height
    this.weight = weight
    this.say = function () {
        console.log('我的名字叫做' + this.name + '==我的年龄为' + this.age + '==我的身高为' + this.height + '==我的体重为' + this.weight)
    }
}
obj = new Person('黄晓明', 40, 150, 200)
obj.say()

（2）通过官方创建

   obj = new Object()
   obj.name = '黄晓明'
   obj.age = 40
   obj.height = 150
   obj.say = function () {
       alert('haha')
   }
   console.log(obj)

（3）直接写一个对象即可

obj = {name: '王宝强', age: '36', wife: '马蓉蓉'}

属性的引号可以添加也可以不添加，一般就不加了
使用时候
obj['name'] 或者 obj.name
在js中json格式字符串和js对象相互转化的函数
将js对象转化为json字符串

            string = JSON.stringify(obj)

            obj = JSON.parse(string)
            obj = eval('(' + string + ')')

4、常用对象和函数

var string = 'a100px'
var string2 = 'b200'
var num1 = parseInt(string)
var num2 = parseInt(string2)
if (num1 == NaN) {
    console.log('相等')
} else {
    console.log('不相等')
} 
 var num = parseInt(string) + 100
console.log(parseInt(string))
 var num = parseInt(string) + 100
 var string = num + 'px'



 var string = '3..14.15lalala'
 console.log(parseFloat(string))

 console.log(Math.abs(-200))
console.log(Math.ceil(3.14))
 console.log(Math.floor(3.14))
console.log(Math.max(1, 200, 900, 56))
console.log(Math.pow(2, 3))
 console.log(Math.random())

console.log(Math.round(3.54))


console.log(string.split(' '))

console.log(string.charAt(0))
console.log(string[0])

console.log(string.indexOf('love'))
console.log(string.lastIndexOf('love'))
 console.log(string.substr(2, 4))
 console.log(string.replace('love', 'hate'))

console.log(string.toLowerCase())

 console.log(String.fromCharCode(97))

var arr = ['柳岩', '高圆圆', '韩红', '赵丽颖', '杨幂']

console.log(arr.slice(1, 3))
console.log(arr.reverse())
console.log(arr.join('*'))
arr.shift()
arr.unshift('赵丽颖')


arr.push('李宇春')

console.log(arr)
console.log(arr.pop(2))
//console.log(arr)

 var arr = ['baby', 'curry', 'anglebaby', 'love', 'taikongyi', 'anglebaby']

var arr = [100, 15, 200, 29, 300, 56]

console.log(arr.sort(function (a, b) {
    return a > b
 }))

创建日期对象的方式
        // 创建当前时间的时间对象
        d = new Date()
        // 根据指定的时间戳创建时间对象
        d = new Date(1534750144520)
        // 根据时间字符串创建时间对象
        d = new Date('2018/8/20 15:29:04')
        // 根据年月日时分秒值创建对象
        d = new Date(2018, 7, 20, 15, 29, 4)
console.log(d.getDate())
console.log(d.getDay())
console.log(d.getMonth())
console.log(d.getFullYear())
console.log(d.getHours())
console.log(d.getMinutes())
console.log(d.getSeconds())
console.log(d.getTime())

5、js简单演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>测试</title>
    <link id="lk" rel="stylesheet" href="yellow.css">
</head>
<body>
    <button onclick="document.getElementById('lk').href = 'red.css'">点我变成红色</button>
    <button onclick="document.getElementById('lk').href = 'yellow.css'">点我变成黄色</button>
</body>
</html>

6、获取对象

<body>
    <div id="libai">日照香炉生紫烟,遥看瀑布挂前川</div>
    <div class="dufu">会当凌绝顶,一览众山小</div>
    <div class="dufu">安得广厦千万间,大庇天下寒士俱欢颜</div>
</body>
</html>
<script>
    // div1 = document.getElementById('libai')
    // console.log(typeof(div1))
    // div2 = document.getElementsByClassName('dufu')
    div3 = document.getElementsByTagName('div')
    console.log(div3[2])
</script>

7、常用事件

onmouseover ：鼠标移动上去触发
onmouseout : 鼠标离开的时候触发
onmouseup : 鼠标按下松开的时候触发
onmousedown : 鼠标按下的时候触发
onmousemove : 鼠标移动的时候触发
onclick : 点击的时候触发
ondblclick ： 双击的时候触发
如下两个用在input框中
onblur : 失去焦点
onfocus : 获取焦点

<body>
    <div style="width:200px; height:200px; background-color:red" onmouseover="alert('明天我要嫁给你啦')"></div>
    <div style="width:200px; height:200px; background-color:green" onmouseout="alert('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:blue" onmouseup="alert('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:gray" onmousedown="alert('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:pink" onmousemove="console.log('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:purple" onclick="alert('后天我们要结婚')"></div>
    <div style="width:200px; height:200px; background-color:orange" ondblclick="alert('后天我们要结婚')"></div>
    <input type="text" onblur="console.log('我失去了焦点，生活没有意义了')" onfocus="console.log('得到焦点，得到了全世界')"/>
</body>

8、获取、设置属性和内容

上一篇 下一篇

猜你喜欢

热点阅读