html+css+js完成代码弹出功能

布满荆棘的人生 2024-03-23 17:07 84阅读 0赞

## html+css+js完成代码弹出功能 ##

**简介**：本文讲解如何使用html+css+js实现代码在网页中弹射出来的功能。

### 效果展示 ###

代码会不断的在屏幕上弹出然后消失  
![在这里插入图片描述][5b9ea5fcdbc54d17b016724521ac4070.png]

### 完整代码 ###

下面是完整的代码和详细的解释。

<!DOCTYPE html>
    <html>
    <head>
    	<title>Code Effect</title>
    	<style>
    	
    	/* 设置#code元素的样式 */
    	#code {
          
    	    position: fixed; /* 元素固定在视口中 */
    	    top: 0;
    	    left: 0;
    	    width: 100%;
    	    height: 100%;
    	    background-color: transparent; /* 背景色透明 */
    	    overflow: hidden; /* 溢出隐藏 */
    	    color: rgb(0, 63, 150); /* 字体颜色 */
    	    font-size: 110px; /* 字体大小 */
    	    font-family: 'Courier New', monospace; /* 字体类型 */
    	}
    	</style>
    </head>
    <body>
    	<div id="code"></div>	
    	<script>
    		/* 生成随机字符串并返回 */
    		function getRandomString() {
          
    		    const stringList = [
    		        "#include<iostream>\nusing namespace std;\n\nint main()\n{\n\tcout << \"Hello, World!\" << endl;\n\treturn 0;\n}",
    		        "import math\n\nprint(math.sqrt(2))",
    		        "for i in range(10):\n    print(i)",
    		        "public class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println(\"Hello, World!\");\n    }\n}",
    		        "console.log(\"Hello, World!\");",
    		        "def hello():\n    print(\"Hello, World!\")\nhello()",
    		        "var s = \"Hello, World!\";\nconsole.log(s);",
    		        "using System;\n\nclass Program\n{\n    static void Main(string[] args)\n    {\n        Console.WriteLine(\"Hello, World!\");\n    }\n}"
    		    ];
    		    return stringList[Math.floor(Math.random() * stringList.length)];
    		}
    
    		/* 创建代码块元素 */
    		function createCodeElement() {
          
    		    const element = document.createElement("pre"); /* 用<pre>标签创建元素 */
    		    element.innerHTML = getRandomString(); /* 将随机字符串作为元素内容 */
    		    element.style.position = "absolute"; /* 元素的定位方式设为绝对定位 */
    		    element.style.top = Math.random() * 100 + "%"; /* 随机设置元素的上边距 */
    		    element.style.left = Math.random() * 100 + "%"; /* 随机设置元素的左边距 */
    		    element.style.transform = "translate(-50%, -50%)"; /* 将元素居中显示 */
    		    element.style.animation = "floatup 10s ease-out forwards"; /* 设置元素的动画效果 */
    		    document.getElementById("code").appendChild(element); /* 将元素添加到#code中 */
    		    setTimeout(() => {
          
    		        element.remove(); /* 在5秒后删除元素 */
    		    }, 5000);
    		}
    
    		setInterval(createCodeElement, 200); /* 每隔200毫秒调用createCodeElement函数来添加代码块 */
    	</script>
    
    </body>
    </html>

[5b9ea5fcdbc54d17b016724521ac4070.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/23/8cc9734062d34bb698c703a74391c9cf.png