日韩性视频-久久久蜜桃-www中文字幕-在线中文字幕av-亚洲欧美一区二区三区四区-撸久久-香蕉视频一区-久久无码精品丰满人妻-国产高潮av-激情福利社-日韩av网址大全-国产精品久久999-日本五十路在线-性欧美在线-久久99精品波多结衣一区-男女午夜免费视频-黑人极品ⅴideos精品欧美棵-人人妻人人澡人人爽精品欧美一区-日韩一区在线看-欧美a级在线免费观看

歡迎訪問 生活随笔！

生活随笔

當前位置： 首頁 > 前端技术 > HTML >内容正文

HTML

弹幕网站开发（只有前端）

發布時間：2023/12/20 HTML 39 豆豆
生活随笔 收集整理的這篇文章主要介紹了 弹幕网站开发（只有前端） 小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
  • index.html
  • danmu.css
  • danmu.js


之前學習了一段時間 HTML,css，近期簡單看了一下 bootstrap,jQuery，JavaScript，于是做了彈幕網站練一下熟悉感覺。

原先的想法是有后端，看了一下LeanCloud感覺可以用，不過先跳票了，先把前端打完再說吧。

第一次開發 Web，主要以借鑒網上的代碼為主，看了一下各大彈幕網站的界面風格。這個樣子還是比較粗糙的，再慢慢該代碼添加功能。

項目地址：https://github.com/Joovo/Joovo.github.io

網站地址：https://joovo.xyz

最終結果如圖

index.html

說是用了bootstrap，只不過是用了一下12柵格和btn的css。

細節部分：

  • 本來引入cdn,本地速度很快，掛到服務器上速度太慢了。
  • js 和 jQuery代碼本來放在前面，發現有問題，因為標簽都沒有，沒辦法執行代碼。

代碼：

<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><title>彈幕啊</title><!-- 本來引入cdn，本地速度還可以，掛到服務器上速度就太慢了--><link rel="stylesheet" href="./bootstrap/bootstrap.min.css"><!-- jQuery文件。務必在bootstrap.min.js 之前引入 --><script src="./bootstrap/jquery.min.js"></script><!-- 最新的 Bootstrap 核心 JavaScript 文件 --><script src="./bootstrap/bootstrap.min.js"></script><link rel="stylesheet" type="text/css" href="danmu.css"> </head><body><div class="container"><div class="panel"><div class="dm"><div class="dm_screen" id="dm-screen"><div class="dm_mask"></div><div class="dm_show" id="dm-show"><!-- <div>test message</div> --><div>2333</div><div>6666666666</div><div>2333</div><div>2333</div><div>2333</div><div>2333</div><div>2333</div><div>盧本偉NB!</div><div>2333</div><div>2333</div><div>盧本偉NB!</div></div></div><br><div class="send"><div class="s_fiter"><div class="s_con"><div class="row"><div class="col-md-8 col-xs-8"><input id="dm-txt" placeholder="來一發彈幕吧～" type="text" class="s_txt" /></div><div class="col-md-2 col-xs-2"><button type="button" id="btn-send" class="btn btn-block btn-info" style="margin-right:10px;"> >發 射</button></div><div class="col-md-2 col-xs-2"><button id="btn-erase" class="btn btn-block s_sub" style="margin-right:10px;"> >清 屏</button></div></div></div></div></div></div></div></div><script src="danmu.js"></script> </body></html>

danmu.css

寫的有一點亂，有的地方弄不清直接在后面加 !important 了。

.s_txt {width: 100%;height: 34px;border-radius: 3px;border: 1px solid rgb(204, 204, 204);padding-left: 10px; }.s_sub {border: 1px solid rgb(230, 80, 30) !important;color: rgb(230, 80, 0);border-radius: 3px;text-align: center;padding: 0;height: 35px;line-height: 35px;font-size: 14px;width: 100%;background-color: white; }.s_del {border: 1px solid rgb(176, 168, 165);color: rgb(176, 168, 165);border-radius: 3px;text-align: center;padding: 0;height: 35px;line-height: 35px;font-size: 14px;width: 159px;background-color: white; }.dm {margin: 20px;text-align: center; }.dm_screen {border: 1px solid rgb(229, 229, 229); }.dm .dm_screen .dm_mask {width: 100%;height: 380px; }.dm .dm_screen .dm_show div {font-size: 22px;line-height: 36px;font-weight: 500;color: #fff;position: absolute;left: 0;top: 0; }.panel {margin: 50px;text-align: center; }body {background-image: url('ss.jpg') !important;background-size: cover; //只支持IE9+-webkit-background-size: cover; //webkit核心-moz-background-size: cover; //FF核心-o-background-size: cover; //Opera核心 }

danmu.js

按鈕的監聽，隨機顏色生成，動畫等。

用到了 jQuery 的添加標簽，刪除標簽功能
用 jQuery 的 animated() 方法寫一個動畫，從現在的 css 變形到設定的目標 css ，有點像以前玩過的一個 flash 。有很多參數可以選擇。
直接去看官方文檔。

細節部分：

  • 彈幕到左側后加了一個回調函數，把這個標簽（這條彈幕）直接刪掉了
  • 點擊發送按鈕后文本框應該清空，直接設 $("#xxx").val('') 就可以達到清空的效果了。
  • jQuery 里 offsetTop，offsetLeft等的用法，得到絕對的像素值。
$(function() {$("#btn-send").click(function() {var txt = $("#dm-txt").val();var div = " <div > " + txt + " </div>";$(".dm_show").append(div);$("#dm-txt").val("");init_screen();});$("#btn-erase").click(function(){$("#dm-show > div:nth-child(n)").remove();});init_screen(); });function init_screen() {var obj = document.getElementById("dm-screen");var _top = obj.offsetTop;$(".dm_show").find("div").show().each(function() {var _left = obj.offsetLeft + obj.offsetWidth - $(this).width();// $(this).css("color")=#FFF;$(this).css({left: _left,top: _top,color: getRandomColor()});_top = _top + $(this).height();if (_top > obj.offsetHeight + obj.offsetTop - $(this).width()) {_top = obj.offsetTop;}var time = 5000;if ($(this).index() % 2 == 0) time = 7000;$(this).animate({left: obj.offsetLeft + 'px'}, time, "linear", function() {$(this).remove();});}); } var getRandomColor = function() {return '#' +(function(color) {return (color += '0123456789abcdef' [Math.floor(Math.random() * 16)]) &&(color.length == 6) ? color : arguments.callee(color);})(''); }

總結

以上是生活随笔為你收集整理的弹幕网站开发（只有前端）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。