华为云弹性服务器网站备案转入教程,弹幕网站很复杂?教你10分钟在华为云鲲鹏弹性云服务器上部署好!...

本文主要是介绍华为云弹性服务器网站备案转入教程,弹幕网站很复杂?教你10分钟在华为云鲲鹏弹性云服务器上部署好!...,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

b76881bf3040f9032b5cd45244716e57.png

开发思路

首先是让弹幕的随机高度出现,这个计算方法是:最大高度=屏幕的高度-发送div的高度-弹幕本身的高度,范围就是 0-最大高度了,弹幕总是从右往左移动,所以出现最右侧的位置计算方法是:最右侧位置=屏幕的宽度-弹幕本身的宽度;接下来就是设置随机颜色,颜色按照‘#aabbcc’这种格式,利用Math.random()随机数生成;最后是弹幕的发送,首先是获取输入框中的值,然后新创建一个div,并设置随机颜色、位置等属性,调用init() 函数。

总结如下步骤:

1、获取弹幕对象:随机高度、初始化颜色

2、水平期间设置范围:浏览器宽度-弹幕对象的高度

3、移动功能函数:定时器 setInterval

4、实现用户发表弹幕

用到的知识点

1、首先页面搭建,就是这些东西是如何摆放的——html+css布局

2、弹幕字体的位置和样色设置——css样式

3、可以输入文字然后点击可以发送弹幕——按钮的点击事件

4、字体可以旋转——css动画

5、弹幕字体可以从右往左滑动——js控制字体对象的style属性

代码块

style代码

* {

margin: 0;

padding: 0;

}

.screen {

width: 100%;

height: 100%;

position: absolute;

top: 0;

left: 0;

}

.send {

width: 100%;

height: 76px;

background: #333;

position: absolute;

bottom: 0;

left: 0;

text-align: center;

line-height: 76px;

}

.send .s_txt {

width: 600px;

height: 36px;

border: 0;

border-radius: 3px 0 0 3px;

font-size: 16px;

line-height: 36px;

}

.send .s_sub {

width: 100px;

height: 37px;

background: #65c33d;

border: 0;

font-size: 14px;

color: #fff;

border-radius: 0 3px 3px 0;

cursor: pointer;

}

.send .s_sub:hover {

background: #3eaf0e;

}

.screen div {

position: absolute;

top: 76px;

left: 0;

font-size: 22px;

color: red;

}

.magictime {

animation-duration: 1s;

animation-name: magictime;

}

@keyframes magictime {

0% {

opacity: 0;

transform-origin: 100% 0;

transform: scale(0, 0) rotate(360deg) translateY(100%);

}

30% {

transform-origin: 100% 0;

transform: scale(0, 0) rotate(360deg) translateY(100%);

}

100% {

opacity: 1;

transform-origin: 0 0;

transform: scale(1, 1) rotate(0deg) translateY(0);

}

}

弹幕滚动div代码

这是一条弹幕!
这是另一条弹幕!
老黄最帅~~~
没错,这又是一条弹幕!
这里都是弹幕
前方高能!!!

发送弹幕div代码

javascript逻辑代码

var oShowList = document.querySelectorAll(".screen div")

var oShow = document.querySelector(".screen")

var oSend = document.querySelector(".send")

var oText = document.querySelector(".s_txt")

var oBtn = document.querySelector("#send_sub")

oBtn.onclick = function () {

var oDiv = document.createElement("div")

oDiv.innerHTML = oText.value;

oDiv.className = "magictime";

oShow.appendChild(oDiv)

init(oDiv)

oText.value = ""

}

for (var i = 0; i < oShowList.length; i++) {

init(oShowList);

}

function init(obj) {

var screenHeight = document.documentElement.clientHeight;//获取浏览器高度

var screenWidth = document.documentElement.clientWidth;//获取浏览器宽度

var sendHeight = oSend.clientHeight;

var maxTop = screenHeight - sendHeight - obj.clientHeight;

var maxLeft = screenWidth - obj.clientWidth;

obj.style.top = Math.random() * maxTop + "px"

obj.style.left = maxLeft + "px"

obj.style.color = randomColor()

move(obj, maxLeft)

}

function randomColor() {

var color = "#";

for (var i = 0; i < 6; i++) {

color += Math.floor(Math.random() * 16).toString(16)

}

return color;

}

function move(obj, maxLeft) {

maxLeft -= 3;

if (maxLeft > -obj.clientWidth) {

obj.style.left = maxLeft + "px"

requestAnimationFrame(function () {

move(obj, maxLeft)

});

} else {

oShow.removeChild(obj)

}

}

安装部署

首先领取一个月的免费服务器,如果通过我这里注册,还可以领取200元的代金券,可多购买两个月的服务器领取地址,然后系统选择Ubuntu 18.04 server 64bit,设置密码,领取后按照以下步骤初始化:

首先修改一下安全组,点击控制台-弹性云服务器,点击实例名字

b722b2acbee477a2ae2c6629479c5c3c.png

点击安全组-更改安全组

3f17ea0c03736da4b7528acac8841cb0.png

添加以下端口配置

9e7842dc73e658bd2602e91c047e7928.png

在网页上远程登录

7d7a6bf4d8d749af8d028f3a8a5fc414.png

也可以通过xshell登录,用户名为root,密码为之前设置的,如果忘了可以选择重置系统

21856bcc0f786d4495c8bd5287abcc1a.png

安装nginx

更新一下系统

apt-get update

# 安装:

apt-get install nginx

# 安装上传工具

apt install lrzsz

配置nginx

# 上传弹幕的文件

cd /var/www/htm/

rz # 选取弹幕网页文件 index.html,可在附件下载

# 启动:

nginx -c /etc/nginx/nginx.conf

# 访问

访问自己的公网IP即可,老黄的是 http://124.70.138.209/

开发视频

好啦,最后在附上相关素材,以上就是开发一个可以发送弹幕网站的完整过程了,怎么样学会了吗?没学会,那就重新再看一遍吧~~~~

大家还可以免费学习WEB前端全栈教程,各位小伙伴们一起来学习吧~,传送门--->WEB前端全栈成长计划

这篇关于华为云弹性服务器网站备案转入教程,弹幕网站很复杂?教你10分钟在华为云鲲鹏弹性云服务器上部署好!...的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:https://blog.csdn.net/weixin_39953244/article/details/119441797
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/188919

相关文章

如何在Ubuntu 24.04上部署Zabbix 7.0对服务器进行监控

《如何在Ubuntu24.04上部署Zabbix7.0对服务器进行监控》在Ubuntu24.04上部署Zabbix7.0监控阿里云ECS服务器,需配置MariaDB数据库、开放10050/1005... 目录软硬件信息部署步骤步骤 1:安装并配置mariadb步骤 2:安装Zabbix 7.0 Server

使用Docker构建Python Flask程序的详细教程

《使用Docker构建PythonFlask程序的详细教程》在当今的软件开发领域,容器化技术正变得越来越流行,而Docker无疑是其中的佼佼者,本文我们就来聊聊如何使用Docker构建一个简单的Py... 目录引言一、准备工作二、创建 Flask 应用程序三、创建 dockerfile四、构建 Docker

mysql中的服务器架构详解

《mysql中的服务器架构详解》:本文主要介绍mysql中的服务器架构,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1、背景2、mysql服务器架构解释3、总结1、背景简单理解一下mysqphpl的服务器架构。2、mysjsql服务器架构解释mysql的架

深度解析Spring AOP @Aspect 原理、实战与最佳实践教程

《深度解析SpringAOP@Aspect原理、实战与最佳实践教程》文章系统讲解了SpringAOP核心概念、实现方式及原理,涵盖横切关注点分离、代理机制(JDK/CGLIB)、切入点类型、性能... 目录1. @ASPect 核心概念1.1 AOP 编程范式1.2 @Aspect 关键特性2. 完整代码实

Linux如何快速检查服务器的硬件配置和性能指标

《Linux如何快速检查服务器的硬件配置和性能指标》在运维和开发工作中,我们经常需要快速检查Linux服务器的硬件配置和性能指标,本文将以CentOS为例,介绍如何通过命令行快速获取这些关键信息,... 目录引言一、查询CPU核心数编程(几C?)1. 使用 nproc(最简单)2. 使用 lscpu(详细信

Java Web实现类似Excel表格锁定功能实战教程

《JavaWeb实现类似Excel表格锁定功能实战教程》本文将详细介绍通过创建特定div元素并利用CSS布局和JavaScript事件监听来实现类似Excel的锁定行和列效果的方法,感兴趣的朋友跟随... 目录1. 模拟Excel表格锁定功能2. 创建3个div元素实现表格锁定2.1 div元素布局设计2.

SpringBoot连接Redis集群教程

《SpringBoot连接Redis集群教程》:本文主要介绍SpringBoot连接Redis集群教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录1. 依赖2. 修改配置文件3. 创建RedisClusterConfig4. 测试总结1. 依赖 <de

MySQL MCP 服务器安装配置最佳实践

《MySQLMCP服务器安装配置最佳实践》本文介绍MySQLMCP服务器的安装配置方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下... 目录mysql MCP 服务器安装配置指南简介功能特点安装方法数据库配置使用MCP Inspector进行调试开发指

在Windows上使用qemu安装ubuntu24.04服务器的详细指南

《在Windows上使用qemu安装ubuntu24.04服务器的详细指南》本文介绍了在Windows上使用QEMU安装Ubuntu24.04的全流程:安装QEMU、准备ISO镜像、创建虚拟磁盘、配置... 目录1. 安装QEMU环境2. 准备Ubuntu 24.04镜像3. 启动QEMU安装Ubuntu4

Nexus安装和启动的实现教程

《Nexus安装和启动的实现教程》:本文主要介绍Nexus安装和启动的实现教程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、Nexus下载二、Nexus安装和启动三、关闭Nexus总结一、Nexus下载官方下载链接:DownloadWindows系统根