Web*小电视
本帖最后由 小伤口 于 2021-5-21 14:43 编辑小电视
介绍
可以实现在线观看经典老番
《黑之契约者》（一部有诗意的动漫呢~）
以及经典动漫
《你的名字》（蓝光）
界面
使用教程
电脑端
在文末找到下载地址下载电脑版文件，保存到你想要的位置
之后单机鼠标右键选择解压，解压后打开并双击
小电^o^.html
这个文件（记得要联网哟~）
手机端
在文末找到下载地址下载手机版文件
虽然一般的浏览器都可以打开，但是要去手机上找到路径
怕担心把大家搞混，所以这里介绍一个简单高效的方法
1 到应用商场下载 QQ 浏览器，安装完毕后打开 QQ 浏览器，按照下面的指示去做就好啦~
图片里的文件名有点不一样和文件多出来一个是我之前测试的原因
大家不要管就好啦~
下面是手机版的运行效果（如果加载不出来，请过一会再试试）
程序讲解
关于作者
介绍
跟着小甲鱼老师的《零基础入门学习 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;
sh_ji.onclick=function(){
if (jishu<1){
index=27;
jishu=--index%movies.length;
}
else{
jishu=--index%movies.length;
}
wezh.src=movies;
number.innerHTML=jishu;
}
xi_ji.onclick=function(){
jishu=++index%movies.length;
wezh.src=movies;
number.innerHTML=jishu;
}
}
</script>
</head>
<body>
<div>
<img id="sun" src="OIP (1).jpg">
<video id="customer"autoplayheight="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>
下载地址
**** Hidden Message *****
演示视频快戳我~
{:5_102:} 害~没人吗{:10_266:} 看看 {:10_275:} 牛的 太牛了！最近也在学web，感觉学的很混乱 强烈支持楼主ing... 这也太厉害了吧
Sungne_jer 发表于 2021-5-23 13:19
这也太厉害了吧
谢谢支持{:10_254:} 肖-肖 发表于 2021-5-23 12:38
牛的
小巫见大巫了哈哈哈{:10_250:} Py与C。。。 发表于 2021-5-23 13:14
太牛了！最近也在学web，感觉学的很混乱
其实我也有这样的感觉{:10_319:} 小伤口 发表于 2021-5-23 13:24
谢谢支持
电脑版怎么放出电视{:5_96:} 糖甜弯了嘴 发表于 2021-5-21 14:47
演示视频快戳我~
{:10_275:}{:10_275:}{:10_275:}{:10_275:} wow 给小伤口跪了，感觉我太弱了 哇哇哇，我直接一键三连………………哦不，是关注{:10_256:} 八戒253 发表于 2021-5-23 16:16
哇哇哇，我直接一键三连………………哦不，是关注
谢谢支持，感激不尽{:10_254:} Sungne_jer 发表于 2021-5-23 13:28
电脑版怎么放出电视
下载解压后双击html文件就好了，{:10_254:} yayc_zcyd 发表于 2021-5-23 14:53
给小伤口跪了，感觉我太弱了
真的过奖了{:10_250:} 小伤口 发表于 2021-5-23 16:31
真的过奖了
我新头像怎么样{:10_256:}