鱼C论坛

 找回密码
 立即注册
查看: 12419|回复: 47

[作品展示] Web*小电视

[复制链接]
发表于 2021-5-21 14:43:13 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能^_^

您需要 登录 才可以下载或查看,没有账号?立即注册

x
本帖最后由 小伤口 于 2021-5-21 14:43 编辑

小电视


介绍

可以实现在线观看经典老番
《黑之契约者》(一部有诗意的动漫呢~)
以及经典动漫
《你的名字》(蓝光)


界面

di_sh_ji.png
d_s_j.png

使用教程

电脑端

在文末找到下载地址下载电脑版文件,保存到你想要的位置
之后单机鼠标右键选择解压,解压后打开并双击
小电^o^.html

这个文件(记得要联网哟~)


手机端

在文末找到下载地址下载手机版文件
虽然一般的浏览器都可以打开,但是要去手机上找到路径
怕担心把大家搞混,所以这里介绍一个简单高效的方法
1 到应用商场下载 QQ 浏览器,安装完毕后打开 QQ 浏览器,按照下面的指示去做就好啦~

qq_pic_merged_1621563006921.jpg
qq_pic_merged_1621563022145.jpg
qq_pic_merged_1621563032074.jpg
qq_pic_merged_1621563040786.jpg
qq_pic_merged_1621563047174.jpg
qq_pic_merged_1621563066286.jpg
qq_pic_merged_1621563075440.jpg

图片里的文件名有点不一样和文件多出来一个是我之前测试的原因
大家不要管就好啦~
下面是手机版的运行效果(如果加载不出来,请过一会再试试)


Screenshot_20210521_090822_com.tencent.mtt.jpg
Screenshot_20210521_091032_com.tencent.mtt.jpg
Screenshot_20210521_090940_com.tencent.mtt.jpg

程序讲解

QQ截图20210521102833.png

关于作者

介绍

跟着小甲鱼老师的《零基础入门学习 Web 开发》学习,刚刚进入到 css 的学习中
想练习一下,所以就写了这个,由于本人的 JavaScript 仅仅只会基础语法甚至可能还搞忘了一些
css 也刚开始学所以代码会有一些臃肿,请见谅~


宣传

qrcode_for_gh_84f2ae00f655_258.jpg
欢迎各位关注小伤口的公众号~
代码清单

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.         <meta charset='utf-8'>
  6.         <meta name='viewport' content='width=device-width,initial-scale=1.0'>
  7.         <meta name='keywords' content='小伤口,童年,电视机'>
  8.         <meta name='author' content='小伤口'>
  9.     <title>电视机</title>
  10.         <style type="text/css">
  11.                
  12.                 div{
  13.                         position: absolute;
  14.                         left: 50%;
  15.                         top:50%;
  16.                         transform: translate(-50%,-50%);
  17.                         background: url("OIP.jpg") no-repeat ;
  18.                         background-position:center;
  19.                         width: 700px;
  20.                         height:700px;
  21.                 }
  22.                 video{
  23.                         border:2px hidden #778899;
  24.                         position: absolute;
  25.                         left: 50%;
  26.                         top:47%;
  27.                         transform: translate(-50%,-50%);
  28.                 }
  29.                 img {
  30.                         position:absolute;
  31.                         left: 75%;
  32.                         top:19%;
  33.                         transform: translate(-50%,-50%);
  34.                 }
  35.                        
  36.                 #last,#future{
  37.                         width:50px;
  38.                         height:50px;
  39.                         background:rgb(48, 140, 163);
  40.                         border-radius:50%;
  41.                         position:absolute;
  42.                         color:brown;
  43.                 }
  44.                 #last{
  45.                         top:85%;
  46.                         left: 35%;
  47.                 }
  48.                 #future{
  49.             top:85%;
  50.                         left: 55%;
  51.                 }
  52.                 span,p{
  53.                         position:absolute;
  54.             left:45%;
  55.                         top: 70%;
  56.                         font-size: 35px;
  57.                         color:palevioletred;
  58.                 }
  59.                
  60.                 #sun{
  61.                         position:absolute;
  62.             left:20%;
  63.                         top: 10%;
  64.                 }
  65.         </style>
  66.         <script type="text/javascript">
  67.                 var movies=[
  68.                         "http://edge.ivideo.sina.com.cn/110669066.mp4?KID=sina,viask&Expires=1621699200&ssig=ZwI25K57O3",
  69.                         "http://edge.ivideo.sina.com.cn/110171864.mp4?KID=sina,viask&Expires=1621699200&ssig=wNrZONh%2B6m",
  70.                         "http://edge.ivideo.sina.com.cn/110172560.mp4?KID=sina,viask&Expires=1621699200&ssig=zscdpHNKcb",
  71.                         "http://edge.ivideo.sina.com.cn/110175553.mp4?KID=sina,viask&Expires=1621699200&ssig=jOn32fkh5v",
  72.                         "http://edge.ivideo.sina.com.cn/110173750.mp4?KID=sina,viask&Expires=1621699200&ssig=oIt809dX2t",
  73.                         "http://edge.ivideo.sina.com.cn/110171615.mp4?KID=sina,viask&Expires=1621699200&ssig=0i4ESp1uzu",
  74.                         "http://edge.ivideo.sina.com.cn/110169762.mp4?KID=sina,viask&Expires=1621699200&ssig=LpcU2mAAQf",
  75.                         "http://edge.ivideo.sina.com.cn/110207736.mp4?KID=sina,viask&Expires=1621699200&ssig=ys%2FUWUqd2D",
  76.                         "http://edge.ivideo.sina.com.cn/110192507.mp4?KID=sina,viask&Expires=1621699200&ssig=2AclEnw6Mp",
  77.                         "http://edge.ivideo.sina.com.cn/110173267.mp4?KID=sina,viask&Expires=1621699200&ssig=5f1%2FBhc7XG",
  78.                         "http://edge.ivideo.sina.com.cn/110173803.mp4?KID=sina,viask&Expires=1621699200&ssig=ArD4gyZt2a",
  79.                         "http://edge.ivideo.sina.com.cn/110214581.mp4?KID=sina,viask&Expires=1621699200&ssig=eyk4yoP8X4",
  80.                         "http://edge.ivideo.sina.com.cn/110210696.mp4?KID=sina,viask&Expires=1621699200&ssig=VAk8mU%2BSo8",
  81.                         "http://edge.ivideo.sina.com.cn/110210848.mp4?KID=sina,viask&Expires=1621699200&ssig=f%2B%2FGSYWdLW",
  82.                         "http://edge.ivideo.sina.com.cn/110214539.mp4?KID=sina,viask&Expires=1621699200&ssig=03d1LUWlOc",
  83.                         "http://edge.ivideo.sina.com.cn/110209614.mp4?KID=sina,viask&Expires=1621699200&ssig=yvBUWeeGnz",
  84.                         "http://edge.ivideo.sina.com.cn/110223021.mp4?KID=sina,viask&Expires=1621699200&ssig=4syFrtsRDw",
  85.                         "http://edge.ivideo.sina.com.cn/110221499.mp4?KID=sina,viask&Expires=1621699200&ssig=eDIevPbbjn",
  86.                         "http://edge.ivideo.sina.com.cn/110218274.mp4?KID=sina,viask&Expires=1621699200&ssig=H0yT9uJ%2BNM",
  87.                         "http://edge.ivideo.sina.com.cn/110223063.mp4?KID=sina,viask&Expires=1621699200&ssig=idlWCVjV6c",
  88.                         "http://edge.ivideo.sina.com.cn/110218880.mp4?KID=sina,viask&Expires=1621699200&ssig=wKQz3cAylL",
  89.                         "http://edge.ivideo.sina.com.cn/110222695.mp4?KID=sina,viask&Expires=1621699200&ssig=VykTB0FKpJ",
  90.                         "http://edge.ivideo.sina.com.cn/110223131.mp4?KID=sina,viask&Expires=1621699200&ssig=odSxZKkN4%2B",
  91.                         "http://edge.ivideo.sina.com.cn/110219288.mp4?KID=sina,viask&Expires=1621699200&ssig=rEHA2ySwWf",
  92.                         "http://edge.ivideo.sina.com.cn/110220555.mp4?KID=sina,viask&Expires=1621699200&ssig=eE1BOi3U17",
  93.                         "http://edge.ivideo.sina.com.cn/110220865.mp4?KID=sina,viask&Expires=1621699200&ssig=drfFVhNstJ",
  94.                         "https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/94f32e8c5285890809401723394/A8GIonY3AzEA.mp4"

  95.                 ];
  96.                 var index=0;
  97.                 var wezh,jishu=0;
  98.                 window.onload = function(){
  99.                         document.getElementById("customer").controls=false;
  100.                         var sh_ji=document.getElementById("last");
  101.                         var xi_ji=document.getElementById("future");
  102.                         var number=document.getElementById("number");
  103.                         wezh=document.getElementById("customer");
  104.                         wezh.src=movies[index];
  105.                        
  106.                         sh_ji.onclick=function(){
  107.                                 if (jishu<1){
  108.                                         index=27;
  109.                                         jishu=--index%movies.length;
  110.                                 }
  111.                                 else{
  112.                                         jishu=--index%movies.length;
  113.                                 }
  114.                                 wezh.src=movies[jishu];
  115.                                 number.innerHTML=jishu;
  116.                                
  117.                         }
  118.                         xi_ji.onclick=function(){
  119.                                 jishu=++index%movies.length;
  120.                                 wezh.src=movies[jishu];
  121.                                 number.innerHTML=jishu;
  122.                         }
  123.                 }
  124.                
  125.         </script>
  126. </head>
  127. <body>
  128.    
  129.         <div>
  130.                 <img id="sun" src="OIP (1).jpg">
  131.                 <video id="customer"  autoplay  height="270px" width="383px" preload="metadata">非常抱歉,我就是不想给你看这个电视,略略略~</video>
  132.                 <input type="button" id="last" value="左">
  133.                 <p><span id="number">0</span>/26/</p>
  134.                 <input type="button" id="future" value="右">
  135.                 <img src="Rf70b286f76fecbf6b148e7275bdc10ee.gif">
  136.         </div>
  137.        
  138. </body>
  139. </html>
复制代码


下载地址

游客,如果您要查看本帖隐藏内容请回复

评分

参与人数 7荣誉 +15 鱼币 +19 贡献 +9 收起 理由
划句顾 + 5 + 5 + 3 感谢楼主无私奉献!
高山 + 1 鱼C有你更精彩^_^
不会起名字的我 + 2 鱼C有你更精彩^_^
allearn_Python + 5 + 5 + 3 鱼C有你更精彩^_^
yayc_zcyd + 2 + 2 无条件支持楼主!
Sungne_jer + 1 + 1 鱼C有你更精彩^_^
不二如是 + 2 + 3 + 3 鱼C有你更精彩^_^

查看全部评分

本帖被以下淘专辑推荐:

小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2021-5-21 14:47:13 | 显示全部楼层
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-5-22 22:15:09 | 显示全部楼层
害~没人吗
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-23 09:38:29 From FishC Mobile | 显示全部楼层

回帖奖励 +2 鱼币

看看
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2021-5-23 12:38:01 | 显示全部楼层

回帖奖励 +2 鱼币

牛的
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2021-5-23 13:14:16 | 显示全部楼层
太牛了!最近也在学web,感觉学的很混乱
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-23 13:15:21 | 显示全部楼层

回帖奖励 +2 鱼币

强烈支持楼主ing...
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-23 13:19:58 | 显示全部楼层

回帖奖励 +2 鱼币

这也太厉害了吧
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-5-23 13:24:04 | 显示全部楼层

谢谢支持
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-5-23 13:25:08 | 显示全部楼层

小巫见大巫了哈哈哈
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-5-23 13:26:13 | 显示全部楼层
Py与C。。。 发表于 2021-5-23 13:14
太牛了!最近也在学web,感觉学的很混乱

其实我也有这样的感觉
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-23 13:28:50 | 显示全部楼层

电脑版怎么放出电视
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-23 13:44:53 | 显示全部楼层

回帖奖励 +2 鱼币

小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-23 14:48:06 | 显示全部楼层

回帖奖励 +2 鱼币

wow
小甲鱼最新课程 -> https://ilovefishc.com
回复

使用道具 举报

发表于 2021-5-23 14:53:14 | 显示全部楼层

回帖奖励 +2 鱼币

给小伤口跪了,感觉我太弱了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-23 16:16:32 | 显示全部楼层
哇哇哇,我直接一键三连………………哦不,是关注
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-5-23 16:30:25 From FishC Mobile | 显示全部楼层
八戒253 发表于 2021-5-23 16:16
哇哇哇,我直接一键三连………………哦不,是关注

谢谢支持,感激不尽
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-5-23 16:30:56 From FishC Mobile | 显示全部楼层
Sungne_jer 发表于 2021-5-23 13:28
电脑版怎么放出电视

下载解压后双击html文件就好了,
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

 楼主| 发表于 2021-5-23 16:31:59 From FishC Mobile | 显示全部楼层
yayc_zcyd 发表于 2021-5-23 14:53
给小伤口跪了,感觉我太弱了

真的过奖了
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

发表于 2021-5-23 16:42:16 | 显示全部楼层

我新头像怎么样
小甲鱼最新课程 -> https://ilovefishc.com
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

小黑屋|手机版|Archiver|鱼C工作室 ( 粤ICP备18085999号-1 | 粤公网安备 44051102000585号)

GMT+8, 2025-4-24 09:13

Powered by Discuz! X3.4

© 2001-2023 Discuz! Team.

快速回复 返回顶部 返回列表