NO1/学习记录/--HTML引入css+js并进行简单操作

最新推荐文章于 2024-02-17 18:46:21 发布

chen-10086

最新推荐文章于 2024-02-17 18:46:21 发布

阅读量112

点赞数

分类专栏： HTML+CSS 文章标签： html

本文链接：https://blog.csdn.net/m0_59771750/article/details/126934214

版权

HTML+CSS 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.HTML引入css文件

    <head>
        <!-- 按住CTRL鼠标移至css文件名可以打开即可 -->
        <link rel="stylesheet" href="css文件名称">
    </head>

1.1网页按钮点击添加弹窗，点击弹窗

    <!-- 给按钮添加id -->
    <button id="up">点击弹窗</button>
    <script>
        // id名称要加
        const btn = document.querySelector('#up')
        btn.onclick = function(){
            alert("我是小陈")
        }
    </script>

2.HTML引入js

    <!-- 引入js文件，要带链接如：./xx.js -->
    <script type="module" src="js文件名"></script>

2.1.js文件创建div+按钮（其他同理）

//打印在控制台
console.log('开始运行js')


// 通过js代码修改HTML页面内容，创建div+按钮，其他同理
const div = document.createElement('div')
document.body.appendChild( div )
const button = document.createElement('button')
document.body.appendChild( button )

2.2.js给div和button添加文字

div.innerText = 'chen'
button.innerText = '大帅哥'

2.3.js设置div+button属性，替换css功能

// 设置div+button属性，替换css功能
div.style.width='300px'
div.style.height='200px'
div.style.background='#FFFF00'

2.4.js利用随机数改变div背景颜色

div.onclick=function(){
    //利用随机数换div背景
    const red = Math.round ( Math.random() * 255 )
    console.log('开始随机',red)
    // 设置切换背景0.5s
    div.style.transition='all 0.5s'
    div.style.background=`red`
}

2.4.1.点击按钮改变div背景颜色

// 点击按钮随机变换div颜色
button.onclick = function(){
    const a = Math.round( Math.random() * 256 )
    const b = Math.round( Math.random() * 256 )
    const c = Math.round( Math.random() * 256 )
    console.log('开始随机',a,b,c)
// 注意这里是 `` 不是 ''
// 用斜引号声明字符串，可以用${  }写变量
    div.style.background = `rgb(${a},${b},${c})`
}