Web on Yazzyk's Blog

使用js渲染HTML表格

Mon, 04 Mar 2019 00:00:00 +0000

突发奇想

那天，老师在上面讲一个HTML的表格，然后过于无聊的我，突发奇想，能不能用js来渲染繁琐复杂的表格，减少HTML的代码了量。

HTML

<!DOCTYPE html>
<html lang="zh-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        table{
            border: 1px solid #000;
        }
        th,tr,td{
            border: 1px solid #000;
            text-align: center;
            padding: .5rem;
        }
    </style>
    <script src="js/index.js"></script>
</head>

<body>
    <script>
        context = [
            ['Name', 'Math', 'English', 'IT'],
            ['张三', 60, 80, 90],
            ['李四', 90, 80, 89],
            ['王五', 70, 89, 78]
        ]
        table(context);
    </script>
</body>
</html>

JS

function table(context) {
    document.write('<table>');
    for (var i = 0; i < context.length; i++) {
        document.write('<tr>');
        for (var j = 0; j < context[i].length; j++) {
            if (i == 0) {
                document.write('<th>' + context[0][j] + '</th>');
            }else{
                document.write('<td>' + context[i][j] + '</td>');
            }
        }
        document.write('</tr>');
    }
    document.write('</table>');
}

博客船新改版 hexo+NexT

Wed, 19 Sep 2018 00:00:00 +0000

搭建

搭建直接看官方文档
本文就直接写搭建后的美化啊，部署什么的

部署到服务器

我看了不少文章，但是总是有什么权限之类的问题，要不然创建的git账号无法访问，要不然宝塔的www账号无法访问，最后自己还是按照那个意思上传上去了，不过这样是 不安全的! 不安全的! 不安全的!

为网页加上动画效果

Sun, 18 Mar 2018 00:00:00 +0000

先来让我们看看这个，然后写出它的代码和注释

html部分：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>demo</title>
</head>
<body>
	<div class="demo"><div class="demo-animation"></div></div>		
</body>
</html>
css部分：
.demo{
	width: 300px;
	height: 300px;
	border: 1px solid #000;
}/*这个不是重点,下面那个才是*/
.demo-animation{
	width: 100px;/*宽度100像素*/
	height: 100px;/*高度100像素*/
	background: #f00;/*背景色为#f00(红色)*/
	position: relative;/*定位为相对，因为我想让它只在这框框的范围内移动*/
	left: 0px;/*这是在没有动画情况下的位置距离左侧0像素*/
	top: 0px;/*距离顶部0像素*/
	animation: demo1 5s;/*	所有动画属性的简写属性，除了 animation-play-state 属性，animation-name(名字)为demo，animation-duration(动画耗时)为5s*/
	animation-iteration-count: infinite;/\*animation-iteration-count(动画播放次数)为无限\*/
}
@keyframes demo1{/*@keyframes为规定动画*/
	0%{left: 0px; top: 0px;}/*在动画进行到0%时，方块demo-animation的位置为left:0px;top:0px;*/
	25%{left: 200px; top: 0px;}/*在动画进行到25%时，方块demo-animation的位置为left:200px;top: 0px;后面的以此类推*/
	50%{left: 200px; top: 200px;}
	75%{left: 0px; top: 200px;}
	100%{left: 0px; top: 0px;}
}/*其中值得注意的时position在.demo-animation已经提到了，所以在规定动画时不需要在提它，然后用margin好像不行，我也不知道行不行，反正我用着会出问题。*/

然后，这是关于animation熟悉的一张表格：