前端系列-JavaScript02

AIains

已于 2023-10-20 11:27:24 修改

阅读量51

点赞数

分类专栏：前端文章标签：前端

于 2023-10-17 08:44:35 首次发布

本文链接：https://blog.csdn.net/AIains/article/details/133875711

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

1、随机数公式

生成[m,n]范围内的随机数

公式：Math.floor ( Math.random( ) * ( (n-m) + 1 ) + m )

Math.floor(1.999)   //直接舍去小数部分 1
Math.ceil(1.9999)   //向前取整 2
Math.round(1.4)     //四舍五入 1
Math.round(1.5)     //四舍五入 2

过程举例分析如下：
// 生成3-8之间的随机数
var aa = Math.random() //最小值为0，最大值为0.99999...
var bb = Math.random()*5 //最小值为0，最大值为4.999...
var cc = Math.random()*(5 + 1) //最小值为0，最大值为5.999...
var dd = Math.random()*(5 + 1) + 3 //最小值为3，最大值为8.999...
var dd = Math.floor(Math.random()*(5 + 1) + 3) //最小值为3，最大值为8

// 需求：生成[m,n]范围内的随机数
// 公式：Math.floor(Math.random()*((n-m) + 1) + m)

二、js操控DOM

通过 id名.属性名获取到对应的属性值

通过 id名.innerHTML 获取到标签中间的内容

<body>
    <div id="box" style="border:1px solid red">
        李白
    </div>
    <input id="inp" type="text">

    <script>
        // 1、变量box的值是个对象，代表页面中id="box"的标签，下面添加的样式后，上面的边框样式会失效
        box.style = 'color:yellow'
        // 在操作DOM的时候，样式的属性是大驼峰的形式，不能出现横杠
        box.style.backgroundColor = 'green'
        box.style.transform = 'rotateZ(30deg)'

        //2、获取标签中间的内容
        console.log(box.innerHTML)
        // 修改标签中间的内容
        box.innerHTML = '杜甫'

        // 3、inp变量的值是input标签对象
        // 获取输入框中的值
        console.log(inp.value);
        // 修改输入框的值
        inp.value = '444'
        inp.style.color = 'pink'

        // 在box代表的标签上绑定点击事件
        box.onclick = function(){ //匿名函数（没有名字的函数）
            // 点击之后出发的代码
            box.stytle.backgroundColor = 'green'
        }
    </script> 
</body>

递归函数