HTML代码资源
欢迎光临——
如题，这里是收录了一些可以在wiki上使用的html代码，并非全原创，仅仅为整合供方便使用，并且搬运出处已确认为开放源码，可自由转载，故未注明出处；同时，为此文避免投入“翻译”一栏，以及上述原因，方才标明了“原创”标签。
首先，你得明白，这里的代码完基本全属于锦上添花，我想如果作为一名新人，你必须先查询所谓的维基语法，以及语法速查，又或是参考格式资源，请记住，它们都很有用，比我整理的有用的多。
在你使用我的代码之前，我必须声明：这些代码可能有的毫无意义甚至只会帮倒忙，但我希望有人能给它们运用在正确的地方。
注意：拷贝代码时，可修改“[密码]”，以及“[你的文本]”，“[链接]”等这类内容，请记得去除符号“[]”
1、确认格式
复制代码：
[[html]]
<body>
<p style= "font-family: Verdana, Arial,sans-serif;">
<center>
[您的文本]<br><br>
<button onclick="submit()">确认</button>
<button onclick="submit()">取消</button>
</center>
</p>
</body>
<script>
function submit(){
alert("已提交");}
</script>
[[/html]]2、进度条
进度条1
进度条2
进度条3
进度条4
复制代码：
[[html]]<progress value="10" max="200"></progress><br>[[/html]] [[html]]<progress value="50" max="100"></progress><br>[[/html]] [[html]]<progress value="150" max="200"></progress><br>[[/html]] [[html]]<progress value="100" max="100"></progress><br>[[/html]]
3、时钟
复制代码：
[[html]]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<style type="text/css">
body,ul,li{
padding: 0;
margin:0;
}
a {
color: rgb(1, 124, 185);
text-decoration: none;
}
body{
font-size:16px;
color: #5a5d63;
background: #d6d7d9;
background: -webkit-radial-gradient(#eeefef, #d6d7d9);
background: -moz-radial-gradient(#eeefef, #d6d7d9);
background: -o-radial-gradient(#eeefef, #d6d7d9);
background: -ms-radial-gradient(#eeefef, #d6d7d9);
background: radial-gradient(#eeefef, #d6d7d9);
padding: 50px;
}
.box{
width: 540px;
height: 200px;
margin: 50px auto;
}
.box li{
position: relative;
text-align: center;
list-style-type: none;
display: inline-block;
width: 150px;
height:160px;
text-shadow:0 2px 1px #f4f4f4;
border:1px solid #9fa2ad;
border-radius: 5px;
margin-right:10px;
background: -webkit-gradient(linear,0 0, 0 100%,
color-stop(.2,rgba(248,248,248,.3)),
color-stop(.5,rgba(168,173,190,.5)),
color-stop(.51,rgba(168,173,190,.3)),
color-stop(.9,rgba(248,248,248,.2)));
background: -webkit-linear-gradient(top,rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);
background: -moz-linear-gradient(top, rgba(248,248,248,.3) 20%,rgba(168,173,190,.5) 50%,rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);
background: -o-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);
background: -ms-linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);
background: linear-gradient(top, rgba(248,248,248,.3) 20%, rgba(168,173,190,.5) 50%, rgba(168,173,190,.3) 51%, rgba(248,248,248,.2) 90%);
box-shadow:inset 0 -2px 0 #f1f1f1,0 1px 0 #f1f1f1,0 2px 0 #9fa2ad,0 3px 0 #f1f1f1,0 4px 0 #9fa2ad;
}
.box li:before,
.box li:after{
display: block;
content: "";
position: absolute;
width: 150px;
}
.box li:before{
top:50%;
height: 1px;
box-shadow: 0 1px 0 #868995,0 2px 1px #fff;
}
.box li:after{
bottom: -65px;
height: 60px;
border-radius:0 0 5px 5px;
background: -webkit-gradient(linear,0 0,0 100%,from(rgba(0,0,0,.1)),to(rgba(0,0,0,0)));
background: -webkit-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: -moz-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: -o-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: -ms-linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
background: linear-gradient(top,rgba(0,0,0,.1),rgba(0,0,0,0));
z-index: 1
}
.box li span:first-child{
font:120px 'BitstreamVeraSansMonoBold';
color: #52555a;
display: block;
height: 130px;
line-height: 150px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><span id="hour"></span><span>时</span></li>
<li><span id="minute"></span><span>分</span></li>
<li><span id="second"></span><span>秒</span></li>
</ul>
</div>
<script type="text/javascript">
var hour=document.getElementById('hour');
var minute=document.getElementById('minute');
var second=document.getElementById('second');
function showTime(){
var oDate=new Date();
var iHours=oDate.getHours();
var iMinute=oDate.getMinutes();
var iSecond=oDate.getSeconds();
hour.innerHTML=AddZero(iHours);
minute.innerHTML=AddZero(iMinute);
second.innerHTML=AddZero(iSecond);
}
showTime();
setInterval(showTime,1000);
function AddZero(n){
if(n<10){
return '0'+n;
}
return ''+n;
}
</script>
<div style="text-align:center;margin:50px 0; font:normal 14px/24px 'MicroSoft YaHei';">
</div>
</body>
[[/html]]
4、秒表/计时器
复制代码：
[[html]]
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js计时器</title>
</head>
<body>
<input type="text" value="00:00">
<input type="button" value="开始">
<input type="button" value="暂停">
<input type="button" value="重置">
<script>
var oTxt=document.getElementsByTagName("input")[0];
var oStart=document.getElementsByTagName("input")[1];
var oStop=document.getElementsByTagName("input")[2];
var oReset=document.getElementsByTagName("input")[3];
var n= 0, timer=null;
//开始计时
oStart.onclick= function () {
clearInterval(timer);
timer=setInterval(function () {
n++;
var m=parseInt(n/60);
var s=parseInt(n%60);
oTxt.value=toDub(m)+":"+toDub(s);
},1000/60);
};
//暂停并且清空计时器
oStop.onclick= function () {
clearInterval(timer);
}
//重置
oReset.onclick= function () {
oTxt.value="00:00";
n=0;
}
//补零
function toDub(n){
return n<10?"0"+n:""+n;
}
</script>
</body>
[[/html]]5、黑客代码雨
复制代码：
[[html]]
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Code -by ZhenYu.Sha</title>
<style type="text/css">
html, body {
width: 100%;
height: 100%;
}
body {
background: #000;
overflow: hidden;
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<canvas id="cvs"></canvas>
<script type="text/javascript">
var cvs = document.getElementById("cvs");
var ctx = cvs.getContext("2d");
var cw = cvs.width = document.body.clientWidth;
var ch = cvs.height = document.body.clientHeight;
//动画绘制对象
var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
var codeRainArr = []; //代码雨数组
var cols = parseInt(cw / 14); //代码雨列数
var step = 16; //步长，每一列内部数字之间的上下间隔
ctx.font = "bold 26px microsoft yahei"; //声明字体，个人喜欢微软雅黑
function createColorCv() {
//画布基本颜色
ctx.fillStyle = "#242424";
ctx.fillRect(0, 0, cw, ch);
}
//创建代码雨
function createCodeRain() {
for (var n = 0; n < cols; n++) {
var col = [];
//基础位置，为了列与列之间产生错位
var basePos = parseInt(Math.random() * 300);
//随机速度 3~13之间
var speed = parseInt(Math.random() * 10) + 3;
//每组的x轴位置随机产生
var colx = parseInt(Math.random() * cw)
//绿色随机
var rgbr = 0;
var rgbg = parseInt(Math.random() * 255);
var rgbb = 0;
//ctx.fillStyle = "rgb("+r+','+g+','+b+")"
for (var i = 0; i < parseInt(ch / step) / 2; i++) {
var code = {
x: colx,
y: -(step * i) - basePos,
speed: speed,
// text : parseInt(Math.random()*10)%2 == 0 ? 0 : 1 //随机生成0或者1
text: ["a", "b", "c", "d", "e", "f", "g", "h", "i", "j", "k", "l", "m", "n", "o", "p", "q", "s", "t", "u", "v", "w", "x", "y", "z"][parseInt(Math.random() * 11)], //随机生成字母数组中的一个
color: "rgb(" + rgbr + ',' + rgbg + ',' + rgbb + ")"
}
col.push(code);
}
codeRainArr.push(col);
}
}
//代码雨下起来
function codeRaining() {
//把画布擦干净
ctx.clearRect(0, 0, cw, ch);
//创建有颜色的画布
//createColorCv();
for (var n = 0; n < codeRainArr.length; n++) {
//取出列
col = codeRainArr[n];
//遍历列，画出该列的代码
for (var i = 0; i < col.length; i++) {
var code = col[i];
if (code.y > ch) {
//如果超出下边界则重置到顶部
code.y = 0;
} else {
//匀速降落
code.y += code.speed;
}
//1 颜色也随机变化
//ctx.fillStyle = "hsl("+(parseInt(Math.random()*359)+1)+",30%,"+(50-i*2)+"%)";
//2 绿色逐渐变浅
// ctx.fillStyle = "hsl(123,80%,"+(30-i*2)+"%)";
//3 绿色随机
// var r= 0;
// var g= parseInt(Math.random()*255) + 3;
// var b= 0;
// ctx.fillStyle = "rgb("+r+','+g+','+b+")";
//4 一致绿
ctx.fillStyle = code.color;
//把代码画出来
ctx.fillText(code.text, code.x, code.y);
}
}
requestAnimationFrame(codeRaining);
}
//创建代码雨
createCodeRain();
//开始下雨吧 GO>>
requestAnimationFrame(codeRaining);
</script>
</body>
</html>
[[/html]]6、简单的页面加密
图片演示：
复制代码：
[[html]]
<html>
<script LANGUAGE="javascript">
<!--
function loopy(){
var sWord ="";
while(sWord!="[密码]"){sWord=prompt("[你的文本]");}
alert("验证成功！");
}
loopy()
//-->
</script>
[[/html]]7、链接跳转样式
按钮-在此页打开
复制代码：
按钮-在新页打开
复制代码：
[[html]] <a href="[链接]"target="_blank"> <input type=button value="[你的文本]"> </a> [[/html]]
链接-在此页中打开
复制代码：
链接-在新页中打开
复制代码：
8、跑马灯
复制代码：
9、各种文本
复制代码：
[[html]]
<!DOCTYPE html><html><head>
<style>
body {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
height: 100vh;
background-position: center;
background-size: cover;
}
#title {
position: relative;
font-family: "Creepster", sans-serif;
font-size: 10vw;
color: black;
}
#title span {
display: inline-block;
-webkit-animation: moveShadow 0.6s linear infinite, shake 0.9s linear infinite;
animation: moveShadow 0.6s linear infinite, shake 0.9s linear infinite;
}
#title span:nth-child(1) {
-webkit-animation-delay: -0.2s;
animation-delay: -0.2s;
}
#title span:nth-child(2) {
-webkit-animation-delay: -0.4s;
animation-delay: -0.4s;
}
#title span:nth-child(3) {
-webkit-animation-delay: -0.6s;
animation-delay: -0.6s;
}
#title span:nth-child(4) {
-webkit-animation-delay: -0.8s;
animation-delay: -0.8s;
}
#title span:nth-child(5) {
-webkit-animation-delay: -1s;
animation-delay: -1s;
}
#title span:nth-child(6) {
-webkit-animation-delay: -1.2s;
animation-delay: -1.2s;
}
#title span:nth-child(7) {
-webkit-animation-delay: -1.4s;
animation-delay: -1.4s;
}
#title span:nth-child(8) {
-webkit-animation-delay: -1.6s;
animation-delay: -1.6s;
}
#title span:nth-child(9) {
-webkit-animation-delay: -1.8s;
animation-delay: -1.8s;
}
#title span:nth-child(10) {
-webkit-animation-delay: -2s;
animation-delay: -2s;
}
#title span:nth-child(11) {
-webkit-animation-delay: -2.2s;
animation-delay: -2.2s;
}
@-webkit-keyframes moveShadow {
0% {
text-shadow: 2px 2px 0 black;
}
25% {
text-shadow: -1px -1px 0 black;
}
50% {
text-shadow: 1px 2px 0 black;
}
75% {
text-shadow: -2px -1px 0 black;
}
}
@keyframes moveShadow {
0% {
text-shadow: 2px 2px 0 black;
}
25% {
text-shadow: -1px -1px 0 black;
}
50% {
text-shadow: 1px 2px 0 black;
}
75% {
text-shadow: -2px -1px 0 black;
}
}
@-webkit-keyframes shake {
0% {
-webkit-transform: rotate(1deg) translateY(-1px);
transform: rotate(1deg) translateY(-1px);
}
25% {
-webkit-transform: rotate(-1deg) translateY(0px);
transform: rotate(-1deg) translateY(0px);
}
50% {
-webkit-transform: rotate(1deg) translateY(-1px);
transform: rotate(1deg) translateY(-1px);
}
75% {
-webkit-transform: rotate(0) translateY(1px);
transform: rotate(0) translateY(1px);
}
}
@keyframes shake {
0% {
-webkit-transform: rotate(1deg) translateY(-1px);
transform: rotate(1deg) translateY(-1px);
}
25% {
-webkit-transform: rotate(-1deg) translateY(0px);
transform: rotate(-1deg) translateY(0px);
}
50% {
-webkit-transform: rotate(1deg) translateY(-1px);
transform: rotate(1deg) translateY(-1px);
}
75% {
-webkit-transform: rotate(0) translateY(1px);
transform: rotate(0) translateY(1px);
}
}
</style>
</head>
<body>
<script type="text/javascript" src="//wow.techbrood.com/libs/jquery/jquery-2.1.1.min.js"></script><script src="https://wow.techbrood.com/libs/jquery/jquery-1.11.1.min.js"></script>
<h3 id="title">[你的文本]</h3>
<script>
var titleId = "title";
var title = document.getElementById(titleId).innerHTML;
var splitTitle = "";
for (var i = 0, letters = title.length; i < letters; i++) {
splitTitle += "<span>" + title[i] + "</span>";
}
document.getElementById(titleId).innerHTML = splitTitle;
</script>
</body>
</html>
[[/html]]复制代码：
[[html]]
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Opening Bar Reveal Text</title>
<link rel="stylesheet" href="http://scpsandboxcn.wdfiles.com/local--files/cuo/%E6%89%93%E5%BC%80%E6%96%87%E6%9C%AC.css">
</head>
<body>
<div class="container">
<h3>[你的文本]</h3>
</div>
<script src="http://scpsandboxcn.wikidot.com/local--files/cuo/%E6%89%93%E5%BC%80%E6%96%87%E6%9C%ACjs"></script>
[[/html]]10、表格
复制代码：
[[html]] <table border="1"> <tr> <th>1</th> <th>2</th> <th>3</th> <th>4</th> <th>5</th> </tr> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> <tr> <th></th> <th></th> <th></th> <th></th> <th></th> </tr> </table> [[/html]]
注：在<th></th>之间均可填入自己的文本，并且可以对代码做适当的重复
11、计算机
复制代码：
[[html]]
<!DOCTYPE html>
<html>
<head>
<title>计算器</title>
<meta charset="utf-8" />
<style type="text/css">
.panel {
border: 4px solid #ddd;
width: 192px;
margin: 100px auto;
/*border-radius: 6px;*/
}
.panel p, .panel input {
font-family: "微软雅黑";
font-size: 20px;
margin: 4px;
float: left;
/*border-radius: 4px;*/
}
.panel p {
width: 122px;
height: 26px;
border: 1px solid #ddd;
padding: 6px;
overflow: hidden;
}
.panel input {
width: 40px;
height: 40px;
border:1px solid #ddd;
}
</style>
<script>
window.onload = function (){
//获取事件目标节点(整个div)
var div = document.getElementById("jsq");
//给事件目标节点后绑定事件
div.onclick = function (e){
//获取事件源
var obj = e.srcElement||e.target;
//获取显示屏
var p = document.getElementById("screen");
//若用户点击的区域是input便执行以下方法
if(obj.nodeName=="INPUT"){
if(obj.value=="C"){
p.innerHTML = "";
}else if(obj.value=="="){
try {
p.innerHTML = eval(p.innerHTML);
} catch (ex) {
//若是用户输入非法,执行"="后提示"Error"
p.innerHTML ="Error";
}
}else{
p.innerHTML += obj.value;
}
}
}
}
</script>
</head>
<body>
<div class="panel" id="jsq">
<div>
<p id="screen"></p>
<input type="button" value="C">
<div style="clear:both"></div>
</div>
<div>
<input type="button" value="7">
<input type="button" value="8">
<input type="button" value="9">
<input type="button" value="/">
<input type="button" value="4">
<input type="button" value="5">
<input type="button" value="6">
<input type="button" value="*">
<input type="button" value="1">
<input type="button" value="2">
<input type="button" value="3">
<input type="button" value="-">
<input type="button" value="0">
<input type="button" value=".">
<input type="button" value="=">
<input type="button" value="+">
<div style="clear:both"></div>
</div>
</div>
</body>
</html>
[[/html]]12、音乐播放插件
复制代码：
[[html]] <iframe frameborder="no" border="0" marginwidth="0" marginheight="0" width=330 height=86 src="[你的音乐的外部链接]"></iframe> [[/html]]
页面版本：6，最后编辑：2020年10月4日 14:56（UTC）