2024年网页制作小代码 篇1
<!doctype html>
<html>
<body>
<canvas id="can" width="400" height="400" style="background: Black"></canvas>
<script>
var sn = [ 42, 41 ], dz = 43, fx = 1, n, ctx = document.getElementById("can").getContext("2d");
function draw(t, c) {
ctx.fillStyle = c;
ctx.fillRect(t % 20 * 20 + 1, ~~(t / 20) * 20 + 1, 18, 18);
}
document.onkeydown = function(e) {
fx = sn[1] - sn[0] == (n = [ -1, -20, 1, 20 ][(e || event).keyCode - 37] || fx) ? fx : n
};
!function() {
sn.unshift(n = sn[0] + fx);
if (sn.indexOf(n, 1) > 0 || n<0||n>399 || fx == 1 && n % 20 == 0 || fx == -1 && n % 20 == 19)
return alert("GAME OVER");
draw(n, "Lime");
if (n == dz) {
while (sn.indexOf(dz = ~~(Math.random() * 400)) >= 0);
draw(dz, "Yellow");
} else
draw(sn.pop(), "Black");
setTimeout(arguments.callee, 130);
}();
</script>
</body>
</html>
2024年网页制作小代码 篇2
网页制作：初学者可以学习dreamweaver，因为他是图形化软件，很多操作工具都可以直接在界面上找到，有一定基础的同学可以学html+css+javascript，这些知识点用这些软件hbilder，sublime text，这两个软件是输代码的形式制作网页。要学好网页制作还需要一些其他软件配合，比如ps，可以设计网页效果图，然后进行切片也就是将效果图分割成小图片，这样可以用户浏览网页时打开网页的速度，早期网页的动画效果还要学flash，现在大部分都是用js。现在网上很多地方有教程，网易云课堂，我要自学网等等，学习贵在坚持，日积月累！祝你成功！
2024年网页制作小代码 篇3
首先给大家看一下我花了1个小时做出来的小程序。直接搜‘总有好事’小程序即可。
有些人可能会不信，因为虽然这个小程序比较简单，但是也不至于1小时就完成了。我来告诉你们，原因是，我没有写一行代码，全部是按照拖拉拽的方式完成的。先给大家看看操作步骤：
我当时想尝试做一个类似于iOS上的App“好事发生”，它本质上是一个日记本，或者记事本，基础功能很简单：
根据日期记录内容，所以我直接从0开始创建：
总共就两个页面，左侧是首页，右侧是日记详情页
首先在首页上面有一个列表，显示着按照时间排序的日记列表，通过拖拽列表模块到页面来进行编辑：
首页的列表数据是从页面底部的+号按钮添加来的，那我们先创建一个日记详情页：
把文本输入框拉进页面，然后底部增加一个“添加”按钮后，在记录一条日记的时候，需要有哪些字段存入数据库？
这里会用到数据库，我没有编程基础，所以我用简单的两段文字来讲：
创建一个daily数据表后，我们添加字段：daything，类型选择文本，用来存储输入框的日记文本内容，以及记录一下提交内容的账号id：account_账户，然后这个数据表在创建的时候本身就会默认带有创建时间和更新时间字段。
然后我们把daily数据表和默认就存在的账户数据表做关联，这一步的意义是，回头主页的列表就可以直接调用daily表的数据来做显示和操作。
然后，这个页面是通过点击“添加”按钮，来把页面上输入框里的内容提交到后台数据表里面，所以我们需要对添加按钮做一下设置，
选择点击按钮时的行为为：添加表数据，添加daily表，里面可以选择添加daything字段，以及把登录用户的id也添加上，然后设置一下提交成功后，会触发刷新首页、以及跳转到首页的动作：
这样提交成功后，就会直接返回首页看到我们刚刚提交的内容。回到首页，我们对首页底部的添加按钮，设置一个跳转页面的交互：
最后，我们设置一下首页列表里显示的字段：
因为日记详情页里我们定义了一些字段，daything、还有创建时间本身也有字段，这里我们把文字内容关联上daily表里的字段daything就行，OK，整体框架就这样完成了！
懂一点的朋友应该看出来了，我用的是一个无代码的工具。这里也不给大家卖关子，这个工具叫Zion，直接百度一搜就可以。
这个工具是我朋友推荐给我的，当时我和他聊起对于拥有一个自己的小程序的渴望，还和他抱怨编程太难学习，基本上外行人是很难靠自己制作出一个小程序的。他却跟我说，什么行业都有普通人的市场，就是因为有很多个像你这样不是程序员却想拥有一个自己的小程序，Zion这种无代码开发的工具才能应运而生。想想也对，其实我们这样不会编程的普通人和会编程的程序员之间的差别就是编程语言，程序员处理的逻辑和正常产品工作里要处理的逻辑也没有什么区别。如果把编程语言这一关打通，那懂点业务逻辑的人也能够自己完成小程序的开发啊。
那到底是怎么操作呢？其实就像市面上常见的一些UI设计的工具，拖拉拽就可以了。设计师完成的工作其实前端程序员没必要再完成一遍。
有了界面设计，更重要的就是数据的交互，这一点在Zion里面也是不需要写一行代码来完成的，Zion创造了很多很形象的词语让我们去理解，类似远程数据，行为等等
解决了前后端数据交互的问题，最后一步就是服务器什么的这些。而Zion也帮我们做好了，你甚至可以一键发布。对于Zion新上线的网页端，甚至会送你一个域名，这样你几乎不用花什么钱就能拥有一个自己的个人网站，是不是感觉非常神奇。
像我之前提到的，只要把编程语言这一块的困扰解决，那么普通人至少来制作一个自己用的小程序或者网页的可能一定是很大的，无代码真是一个很伟大的发明，而Zion也真正帮我小小的实现了一下成为一个“开发者”的梦想。