😲 零 CSS，仅需一张图片，就能构建一个完全可交互的 SPA？？？？？😱 又一次滥用互联网！[极致 SSR！]

我又回来了，滥用互联网，这一次真的会让你大吃一惊。

这次我确实认为我已经超越了自己。

我向你介绍：

一个包含 3 页的 SPA，包含一个交互式投票和一个联系表单，无需 CSS，只有一个 DOM 元素 - 仅需一张图片！（来，检查一下页面！）

我称之为“极限服务器端渲染（SSR）”🤣

请注意： - 如果使用手机，您将无法使用联系表单，恐怕我找不到没有密码就能打开键盘的方法<input>！请在电脑上试试！

最后一件事：由于往返服务器的时间，页面感觉“滞后”，如果您使用的是 3G 连接，则可能无法使用，因此请等到连接状况更好后再尝试！

> > > >点击此处试用单张图片 SPA！（最佳 PC 浏览体验） < < < <

在SPA里可以做什么？

有一些有趣的东西供您尝试：

它有点像键盘

嗯，你可以使用 Tab 键选中元素来高亮显示它们。你甚至可以按 Enter 键激活它们。

只是不要期望有流畅的体验（而且我只在 Chrome 中测试过它，所以它可能无法在其他浏览器中运行！）

主页具有响应能力

是的，如果您在手机上尝试，主页实际上有两个不同的版本：移动版和桌面版。

在移动设备上，您甚至可以打开和关闭菜单！

遗憾的是，我没有时间让另外两个页面响应（这个愚蠢的项目已经花了很长时间！）。

民意调查确实有效！

在 SPA 上投票，看看您对我的愚蠢实验有何看法！

目前结果如下：

这绝对是我见过最蠢的东西——我太喜欢了！
62%

真够傻的，不过被 ASCII 码文字吓到更傻！
20%

这太傻了吧？我以为服务器端渲染就是这样的！
18%

联系表格“有效”

这绝对是您在网络上遇到的最糟糕的经历之一，但它确实有效！

事实上，您可以在最后一部分看到人们通过 SPA 发布的消息！

这里到底发生了什么？

噢，很多！

基本上，与页面的每次交互都会通过 JavaScript 和 cookie 进行跟踪。

然后，我会将其发送到服务器上的一个脚本，该脚本会根据鼠标位置、当前焦点项目、按下的按键等信息渲染图像。之后，我会将构建好的图像发回给您，以便您查看！

不用说，我现在对浏览器开发人员有了更多的欣赏，因为有很多小事我都视为理所当然！

为了让你了解这有多难，我根据鼠标的 X 和 Y 坐标来计算某个项目是否处于悬停状态。为此，我需要知道页面上每个项目的 X、Y、宽度和高度。我还需要知道该按钮应处于什么状态。

现在，如果您单击，我必须检查单击是否在按钮的范围内以及应该执行什么操作！

将其乘以 3 页的按钮和输入以及一些其他功能，我必须将很多东西拼凑在一起！

评论前的最后几句话

正如我所有的愚蠢实验一样，这没有什么实际意义，只是在星期五给你带来一点乐趣！

祝您周末愉快！

通过联系页面提交的用户评论（如果人们不能表现好的话可能会被禁用😋）

以下是人们通过单张图片 SPA 添加的一些评论！

InHuOfficial - 2021年5月21日 17:11
期待看到大家的留言！别忘了，你需要等一分钟才能刷新页面查看评论！

asdfsadf - 17:40 21/05/2021
asdfasdfasdfasdfsaf

testt - 2021年5月21日 17:41
东部标准时间

55 - 18:30 2021年5月21日
55

dakujem - 18:38 21/05/2021
血清

gghh - 2021年5月21日 19:08

yyyyyyyy - 19:37 21/05/2021
yyyyyyyy

这是一次测试- 20:19 21/05/2021
哇哦

gwdsdg - 20:25 21/05/2021
gggewgg sd mdgkgj sdkjgsodj g12 jr128 jdg sdg sdg jo sdjgojidsgdsg sodj g

sdg - 20:25 21/05/2021
dsgsdgsdgdgsdg

fhfjfjgjj - 21:28 21/05/2021
fgjfgjfgjfgjgj

DEVusedToBeGoodNowItSucks - 21:45 2021年5月21日
这太糟糕了 DEV 在过去的一年里真是浪费时间

你好- 22:46 21/05/2021
这是一些文字

fds - 00:56 22/05/2021
sdfhg dgdrfg dfg

Losh531 - 03:23 22/05/2021
嗯你好

呵呵- 03:25 22/05/2021
g

kkklmmm - 04:07 22/05/2021
nnnnnn

F5 - 09:55 22/05/2021
哈哈，这太乱了，但 idea 也太乱了，速度不快，而且无法访问

Arkentias - 14:47 2021年5月22日
干得好！

bingus - 16:43 2021年5月22日
哈哈，是的

dqsqsqds - 17:05 22/05/2021
qsd

dillir07 - 17:25 22/05/2021
哇！！！

JulCzar - 18:35 2021年5月22日
let tringSomthingNew eq true semicolumn while (tryingSomthingNew) learn() semicolumn

尼古拉斯- 2021年5月22日 21:22
测试

3321321321 - 06:54 2021年5月23日
321321321321321

xczxcxcvxvxvxvxcv - 07:34 23/05/2021
xcvxcvxcvxcvxcv

bcrypt - 01:51 2021年5月24日
这是一件艺术品

**** - 04:09 24/05/2021
秒

测试- 2021年5月24日 10:51
哈哈

ffghfghfghfg - 11:13 24/05/2021
hfgh

gggggggggggggggggg - 11:48 24/05/2021
gggggggggggggggggggggggg

达达达德- 13:59
25/05/2021

# Foobar - 14:38 25/05/2021
这很漂亮，我知道它说的是字母、数字和空格，但是表情符号呢，虽然我猜如果你不能在这里使用键盘，那些就不会起作用

jumanji - 18:32 2021年5月25日
布布巴普！

sidchaudhary04 - 21:04 2021年5月25日
嗨，这是巫术哇

crycx - 07:24 2021年5月26日
喜欢它！

piyush - 17:03 26/05/2021
你好，世界

**** - 08:09 27/05/2021
hfhfghgf

**** - 2021年5月27日 15:46

**** - 16:31 27/05/2021
这也许有效

测试一二三- 01:28 2021年5月28日
我喜欢鸡肉我喜欢肝喵喵混合喵喵混合请送货

sdsdsdd232322 - 13:53 28/05/2021
ddddddd

Collegewap - 15:15 28/05/2021
你好

pelayo - 2021年1月6日 20:20
太棒了

fsdkfdskjfksdjfaksda - 2021年6月11日 10:28

汉堡和薯条！！！ - 19:23 17/09/2021
trololololo hehheheheHOhohoho 我是个傻瓜！！！

Ahmed Magdy - 14:35 31/12/2021
嘿，哥们，怎么样

这是一个测试- 11:52 14/01/2022
这个网站太慢了

**** - 2022年2月22日 08:57

**** - 2022年2月22日 12:37

**** - 2022年2月22日 17:49

**** - 2022年2月22日 17:49
您的消息已发送！1分钟后返回文章并刷新页面即可查看文章中的评论！

125 - 19:45 22/02/2022
22515

嗯- 03:25 23/02/2022
哦天哪你居然实现了用 Tab 键导航输入，太搞笑了我喜欢

**** - 2022年2月23日 03:35

**** - 2022年2月23日 03:35
您的消息已发送！1分钟后返回文章并刷新页面即可查看文章中的评论！

**** - 2022年2月23日 07:24

inhu - 08:13 23/02/2022
嘿，测试

qwe - 13:01 23/02/2022
qweqweqw

u - 13:21 23/02/2022
u

**** - 2022年2月23日 16:27

!!!!@@S - 17:16 23/02/2022
!!!!SQ@S@SW@@S@W@ @

**** - 2022年2月23日 20:23

**** - 2022年2月24日 05:48

**** - 2022年2月25日 08:31

**** - 2022年2月25日 08:31
您的消息已发送！1分钟后返回文章并刷新页面即可查看文章中的评论！

**** - 2022年2月25日 11:30

**** - 2022年2月25日 23:24

nmfdhdfgh - 14:20 28/02/2022
dgfddfff

**** - 2022年2月28日 22:06

**** - 2022年1月3日 13:27

性别- 12:29 02/03/2022
性别性别性别性别性别性别性别

lkjll - 12:48 03/03/2022
kjljljlmkjmlj

**** - 2022年3月3日 12:48
您的消息已发送！1分钟后返回文章并刷新页面即可查看文章中的评论！

**** - 2022年3月3日 21:30

哇- 03:43 04/03/2022
这太不可思议了

kijiihu
- 10:12 04/03/2022

CapitaineToinon - 14:11 17/03/2022
动漫很垃圾，我也是

太平洋- 23:21 04/06/2022
太平洋海洋

**** - 2022年4月6日 23:22
您的消息已发送！1分钟后返回文章并刷新页面即可查看文章中的评论！

gdxg - 11:09 27/06/2022
fff

Vercte - 00:50 05/10/2022
嗨，我花了一段时间才发现它很整洁，而且非常不卡

**** - 2023年3月14日 21:47

**** - 2023年3月14日 21:47
您的消息已发送！1分钟后返回文章并刷新页面即可查看文章中的评论！

**** - 2023年3月17日 04:01

GrahamTheDev - 2023年4月26日 22:26
仍然有效

你好- 2023 年 4 月 26 日 22:34
世界！

为了算法！

如果您喜欢这篇文章，请给它一个❤🦄，别忘了：

为算法留下评论吧！（即使只是说我有多傻😋！）

链接链接：https://dev.to/grahamthedev/i-built-a-3-page-interactive-spa-with-a-single-image-element-and-no-css-extreme-ssr-4knk