Web*小电视

小伤口 · 发表于 2021-5-21 14:43:13

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

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

x

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

小电视

介绍

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

界面

使用教程

电脑端

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

这个文件（记得要联网哟~）

手机端

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

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

Screenshot_20210521_090822_com.tencent.mtt.jpg

Screenshot_20210521_091032_com.tencent.mtt.jpg

Screenshot_20210521_090940_com.tencent.mtt.jpg

程序讲解

关于作者

介绍

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

宣传

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

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<meta charset='utf-8'>

<meta name='viewport' content='width=device-width,initial-scale=1.0'>

<meta name='keywords' content='小伤口,童年,电视机'>

<meta name='author' content='小伤口'>

<title>电视机</title>

<style type="text/css">

div{

position: absolute;

left: 50%;

top:50%;

transform: translate(-50%,-50%);

background: url("OIP.jpg") no-repeat ;

background-position:center;

width: 700px;

height:700px;

}

video{

border:2px hidden #778899;

position: absolute;

left: 50%;

top:47%;

transform: translate(-50%,-50%);

}

img {

position:absolute;

left: 75%;

top:19%;

transform: translate(-50%,-50%);

}

#last,#future{

width:50px;

height:50px;

background:rgb(48, 140, 163);

border-radius:50%;

position:absolute;

color:brown;

}

#last{

top:85%;

left: 35%;

}

#future{

         top:85%;

left: 55%;

}

span,p{

position:absolute;

         left:45%;

top: 70%;

font-size: 35px;

color:palevioletred;

}

#sun{

position:absolute;

         left:20%;

top: 10%;

}

</style>

<script type="text/javascript">

var movies=[

"http://edge.ivideo.sina.com.cn/110669066.mp4?KID=sina,viask&Expires=1621699200&ssig=ZwI25K57O3",

"http://edge.ivideo.sina.com.cn/110171864.mp4?KID=sina,viask&Expires=1621699200&ssig=wNrZONh%2B6m",

"http://edge.ivideo.sina.com.cn/110172560.mp4?KID=sina,viask&Expires=1621699200&ssig=zscdpHNKcb",

"http://edge.ivideo.sina.com.cn/110175553.mp4?KID=sina,viask&Expires=1621699200&ssig=jOn32fkh5v",

"http://edge.ivideo.sina.com.cn/110173750.mp4?KID=sina,viask&Expires=1621699200&ssig=oIt809dX2t",

"http://edge.ivideo.sina.com.cn/110171615.mp4?KID=sina,viask&Expires=1621699200&ssig=0i4ESp1uzu",

"http://edge.ivideo.sina.com.cn/110169762.mp4?KID=sina,viask&Expires=1621699200&ssig=LpcU2mAAQf",

"http://edge.ivideo.sina.com.cn/110207736.mp4?KID=sina,viask&Expires=1621699200&ssig=ys%2FUWUqd2D",

"http://edge.ivideo.sina.com.cn/110192507.mp4?KID=sina,viask&Expires=1621699200&ssig=2AclEnw6Mp",

"http://edge.ivideo.sina.com.cn/110173267.mp4?KID=sina,viask&Expires=1621699200&ssig=5f1%2FBhc7XG",

"http://edge.ivideo.sina.com.cn/110173803.mp4?KID=sina,viask&Expires=1621699200&ssig=ArD4gyZt2a",

"http://edge.ivideo.sina.com.cn/110214581.mp4?KID=sina,viask&Expires=1621699200&ssig=eyk4yoP8X4",

"http://edge.ivideo.sina.com.cn/110210696.mp4?KID=sina,viask&Expires=1621699200&ssig=VAk8mU%2BSo8",

"http://edge.ivideo.sina.com.cn/110210848.mp4?KID=sina,viask&Expires=1621699200&ssig=f%2B%2FGSYWdLW",

"http://edge.ivideo.sina.com.cn/110214539.mp4?KID=sina,viask&Expires=1621699200&ssig=03d1LUWlOc",

"http://edge.ivideo.sina.com.cn/110209614.mp4?KID=sina,viask&Expires=1621699200&ssig=yvBUWeeGnz",

"http://edge.ivideo.sina.com.cn/110223021.mp4?KID=sina,viask&Expires=1621699200&ssig=4syFrtsRDw",

"http://edge.ivideo.sina.com.cn/110221499.mp4?KID=sina,viask&Expires=1621699200&ssig=eDIevPbbjn",

"http://edge.ivideo.sina.com.cn/110218274.mp4?KID=sina,viask&Expires=1621699200&ssig=H0yT9uJ%2BNM",

"http://edge.ivideo.sina.com.cn/110223063.mp4?KID=sina,viask&Expires=1621699200&ssig=idlWCVjV6c",

"http://edge.ivideo.sina.com.cn/110218880.mp4?KID=sina,viask&Expires=1621699200&ssig=wKQz3cAylL",

"http://edge.ivideo.sina.com.cn/110222695.mp4?KID=sina,viask&Expires=1621699200&ssig=VykTB0FKpJ",

"http://edge.ivideo.sina.com.cn/110223131.mp4?KID=sina,viask&Expires=1621699200&ssig=odSxZKkN4%2B",

"http://edge.ivideo.sina.com.cn/110219288.mp4?KID=sina,viask&Expires=1621699200&ssig=rEHA2ySwWf",

"http://edge.ivideo.sina.com.cn/110220555.mp4?KID=sina,viask&Expires=1621699200&ssig=eE1BOi3U17",

"http://edge.ivideo.sina.com.cn/110220865.mp4?KID=sina,viask&Expires=1621699200&ssig=drfFVhNstJ",

"https://1251316161.vod2.myqcloud.com/007a649dvodcq1251316161/94f32e8c5285890809401723394/A8GIonY3AzEA.mp4"

];

var index=0;

var wezh,jishu=0;

window.onload = function(){

document.getElementById("customer").controls=false;

var sh_ji=document.getElementById("last");

var xi_ji=document.getElementById("future");

var number=document.getElementById("number");

wezh=document.getElementById("customer");

wezh.src=movies[index];

sh_ji.onclick=function(){

if (jishu<1){

index=27;

jishu=--index%movies.length;

}

else{

jishu=--index%movies.length;

}

wezh.src=movies[jishu];

number.innerHTML=jishu;

}

xi_ji.onclick=function(){

jishu=++index%movies.length;

wezh.src=movies[jishu];

number.innerHTML=jishu;

}

}

</script>

</head>

<body>

<div>

<img id="sun" src="OIP (1).jpg">

<video id="customer"  autoplay  height="270px" width="383px" preload="metadata">非常抱歉，我就是不想给你看这个电视，略略略~</video>

<input type="button" id="last" value="左">

<p><span id="number">0</span>/26/</p>

<input type="button" id="future" value="右">

<img src="Rf70b286f76fecbf6b148e7275bdc10ee.gif">

</div>

</body>

</html>
复制代码

下载地址

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

糖甜弯了嘴 · 发表于 2021-5-21 14:47:13

演示视频快戳我~

小伤口 · 发表于 2021-5-22 22:15:09

害~没人吗

Minecraft程序猿 · 发表于 2021-5-23 09:38:29

看看

肖-肖 · 发表于 2021-5-23 12:38:01

牛的

Py与C。。。 · 发表于 2021-5-23 13:14:16

太牛了！最近也在学web，感觉学的很混乱

Py与C。。。 · 发表于 2021-5-23 13:15:21

强烈支持楼主ing...

Sungne_jer · 发表于 2021-5-23 13:19:58

这也太厉害了吧

小伤口 · 发表于 2021-5-23 13:24:04

Sungne_jer 发表于 2021-5-23 13:19
这也太厉害了吧

谢谢支持

小伤口 · 发表于 2021-5-23 13:25:08

肖-肖发表于 2021-5-23 12:38
牛的

小巫见大巫了哈哈哈

小伤口 · 发表于 2021-5-23 13:26:13

Py与C。。。发表于 2021-5-23 13:14
太牛了！最近也在学web，感觉学的很混乱

其实我也有这样的感觉

Sungne_jer · 发表于 2021-5-23 13:28:50

小伤口发表于 2021-5-23 13:24
谢谢支持

电脑版怎么放出电视

柿子饼同学 · 发表于 2021-5-23 13:44:53

糖甜弯了嘴发表于 2021-5-21 14:47
演示视频快戳我~

考不好不改名 · 发表于 2021-5-23 14:48:06

yayc_zcyd · 发表于 2021-5-23 14:53:14

给小伤口跪了，感觉我太弱了

八戒253 · 发表于 2021-5-23 16:16:32

哇哇哇，我直接一键三连………………哦不，是关注

小伤口 · 发表于 2021-5-23 16:30:25

八戒253 发表于 2021-5-23 16:16
哇哇哇，我直接一键三连………………哦不，是关注

谢谢支持，感激不尽

小伤口 · 发表于 2021-5-23 16:30:56

Sungne_jer 发表于 2021-5-23 13:28
电脑版怎么放出电视

下载解压后双击html文件就好了，

小伤口 · 发表于 2021-5-23 16:31:59

yayc_zcyd 发表于 2021-5-23 14:53
给小伤口跪了，感觉我太弱了

真的过奖了

yayc_zcyd · 发表于 2021-5-23 16:42:16

小伤口发表于 2021-5-23 16:31
真的过奖了

我新头像怎么样

账号		自动登录	找回密码
密码			立即注册

[作品展示] Web*小电视

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

评分

本帖被以下淘专辑推荐:

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

回帖奖励 +2 鱼币

浏览过的版块