把CSS放到Javascript中去
let style = document.querySelector("#style");
setTimeout(()=>{
style.innerHTML =`
body{
color: red;
}
`;
},10)
正文
let html = document.querySelector("#demo")//找到HTML中的元素demo
let style = document.querySelector("#style");
let string = `
/*你好，我是小阿妍
*接下来展示一下我的前端功底
*首先我要准备一个div
*/
#div1{
border：1px solid red;
width:400px;
height:400px;
}
/*接下来我把div变成一个八卦图
*注意看好了
*首先，要把div变成一个圆
*/
#div1{
border-radius:50%;
box-shadow:0 0 3px rgba(0,0,0,0.5);
border:none;
body{
color:red;
}
`;
let string2 = "";
let n = 0;
let step = () => {
setTimeout(() => {
if (string[n] === "\n"){
string2 += "<br>";
}else if (string[n]===""){
string2 +=" ；"；
}else{
string2 += string[n];
}
html.innerHTML = string2;
style.innerHTML = string.substring(0,n);
if (n < string.length - 1) {
n += 1;
step();
}
}, 100);//设置时间为多少毫秒之后的结果
};
step();
怎么把样式应用到JS网页中
第一步，先在HTML中
<style id ="style"></style>
第二步，在js中写入
let style = document.querySelector ("#style");
setTimeout(()=>{
style.innerHTML=`
body{
color：red;
}
`;
},3000);
完整版代码HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>会动的简历</title>
</head>
<body>
<span id="demo"></span>
<div id="div1"> </div>
<style id="style"></style>
<script src="main.js"> </script>
<style>
#div1 {
position: fixed;
right: 20px;
top: 20px;
}
#div1::before {
content: '';
display: block;
/*横着排序的可以改成竖着排序*/
position: absolute;
}
#div1::after {
content: '';
display: block;
position: absolute;
}
</style>
</body>
</html>
完整版代码JS
let html = document.querySelector("#demo")//找到HTML中的元素demo
let style = document.querySelector("#style");
let string = `
/*你好，我是一名前端新人
*接下来我演示我的前端功底
*首先我要准备一个div
*/
#div1{
border:1px solid red;
width:400px;
height:400px;
}
/*接下来我把div变成一个八卦图
*首先把div变成一个圆圈
*/
#div1{
border-radius:50%;
box-shadow:0 0 3px rgba(0,0,0,0.5);
border:none;
}
/*八卦是阴阳形成的
*一黑一白，用背景界面进行写
*在谷歌中搜索css gradient background generator
*点击第一个结果
*/
#div1{
background: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 50%, rgba(0,0,0,1) 50%, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%);
}
/*
用伪元素在上面放一个黑色的圆圈
*在下面放一个白色的圆圈
*加两个神秘的小球*/
#div1::before{
width:200px;
height:200px;
left:0;
top:0;
left:50%;
transform:translateX(-50%);
background:#000;
border-radius:50%;
background: radial-gradient(circle, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 25%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 75%, rgba(50,31,31,1) 75%, rgba(0,0,0,1) 100%, rgba(0,0,0,1) 100%);
}
#div1::after{
width:200px;
height:200px;
left:0;
bottom:0;
left:50%;
transform:translateX(-50%);
background:#fff;
border-radius:50%;
background: radial-gradient(circle, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 25%, rgba(0,0,0,1) 25%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 100%, rgba(255,255,255,1) 100%);
}
/*需要在扣出两个圆洞，但是伪元素里面，不能再放伪元素的。
还是用渐变的方式在谷歌中搜索css gradient background generator*/
`;
let string2 = "";
let n = 0;
let step = () => {
setTimeout(() => {
if (string[n] === "\n") {
string2 += "<br>";
} else if (string[n] === " ") {
string2 += " ";
} else {
string2 += string[n];
}
html.innerHTML = string2;
style.innerHTML = string.substring(0, n);
if (n < string.length - 1) {
n += 1;
step();
}
}, 0);//设置时间为多少毫秒之后的结果
};
step();
