正文

在线html5制作网站（h5网页在线制作）

发布时间：2023-03-12 02:11:39 稿源：创意岭阅读： 215 问大家

大家好！今天让创意岭的小编来大家介绍下关于在线html5制作网站的问题，以下是小编对此问题的归纳整理，让我们一起来看看吧。

创意岭作为行业内优秀的企业，服务客户遍布全球各地，相关业务请拨打电话：175-8598-2043，或添加微信：1454722008

本文目录:

1、如何制作关于测试的H5页面
2、有哪些不用编写代码就能轻松制作生成HTML5页面的工具
3、html5网页制作+javascript
4、HTML5能做动态网站吗

在线html5制作网站（h5网页在线制作）

一、如何制作关于测试的H5页面

您好，答题测试的H5作为不少商家活动的首选类型，需求自然就很大。大家需要知道的是，答题测试按功能层面又分为根据趣味测试、问卷调查两大类型。

趣味测试H5：根据得分获得不同结果，用户活动营销
问卷调查H5：统计答题人的选项/得分，用于数据收集

本期教程主要是向大家介绍一种简单的【趣味测试H5】的教程，教程里用到的主要的组件是图片按钮组件、测试题组件和参数变量组件。希望学员们通过本篇教程都能掌握这几个组件使用方法并能独立制作出来。

测试题组件作用：与图片按钮组合完成用户选中时单选的状态
图片按钮组件作用：与测试题组件组合完成用户选中时单选的状态
参数变量组件作用：统计用户每题的得分并求和，可作不同得分显示不同元素的触发

1.第一页是一个输入用户姓名的页面，我们新建一个页面，添加高级组件-高级表单里的“输入框组件”，再添加一个全局变量和开始测试的图片按钮，将全局变量命名为“姓名变量”，调整类型为“文本”，图片按钮上设置点击时“设置参数值”和“跳转页面”，设置参数值为全局变量=输入框，跳转页面为下一页，；

注：第二页是答题页分为5个步骤讲解（2-6步）

2.第二页为答题页，我们在左侧页面面板处右击再新建一个空白页面，需要添加图片按钮，我们选中按钮的时候可以使用键盘上control+C+V的方式复制其余的三个按钮，点选图片按钮右侧面板上传替换自己的选中和未选中的图片；

3.图片按钮的初始状态和激活状态图片替换好后，我们在工具栏上的高级组件-交互组件下面添加测试题组件，接着我们可以添加“题目图片”和“确定按钮图片”到画布上；

4.我们点选左侧逻辑小面板的“测试题组件”，在右侧面板添加四个图片按钮为选项并设置为每个选项设置分值（比如选项C是对的，我们给选项C为1，其余设置为0），接着设置其中一个为“正确答案”，触发器上设置选择结束后触发“显示元素”，这里显示的是下面那个“确定”图片元素（它需要初始隐藏，第六步有说明）；

5.我们点击左上角的页面层级，切换到 Masterpge 里，在上方工具栏高级组件-逻辑组件里面找到“参数变量”，选择添加到画布上，给这个变量命名为“总分”，并设置为等待触发，点击小“+”号，添加三个触发条件，我这里添加的是总分≤2，3≥总分≥4，总分≥5三个触发条件；

6.我们点击左上角的页面层级，切换到页面里，点选 “确定”图片元素，右侧面板勾选“初始隐藏”，触发器上设置点击“设置参数值”和“跳转页面”（注意顺序，跳转页面一定要在最后一步执行，上面的触发事件才不会失效），设置参数值和跳转页面的详细设置面板见下图；

7.我们按照第二步到第六步的方法，接着制作剩下的四个页面

8.新建一页作为结果页，我们把成绩单图片元素添加到画布上，接着添加一个段落文本组件，命名为姓名。在这页的页面触发器上设置切换到当前页时设置参数值和执行参数判断，把姓名的全局变量赋值给用来显示姓名的段落文本，执行参数判断上执行的是 Masterpage 上总分的判断；

9.测试题案例大体上做好了，我们可以预览下看看。

当然，这里只是一种思路。有的项目不同得分不同结果的视觉上相差很大，这样的话我们可以采用多个结果页，比如总分参数≤2时跳转结果1页面，3≤总分参数≤4跳转结果2页面，总分参数≥5时跳转跳转结果3页面这样的逻辑方式实现，另外，执行参数判断的触发也不应该在结果页触发，而是应该在上一页的“确定按钮”上去设置。

如有问题，也可到意派官网，加入交流群询问，希望对楼主有帮助。

二、有哪些不用编写代码就能轻松制作生成HTML5页面的工具

《关联自动切片生成DivCss软件-2017全能免费版》这个软件就不用手下代码，软件自动生成代码，几分钟就可以完成几个小时的工作，大大提高了开发效率，而且操作也很简单。推荐使用。

三、html5网页制作+javascript

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>计算</title>
<meta name="viewport" content="width=device-width, initial-scale=1" />
</head>
<body>
<script>
function student(serialNumber, name, sex, birthday, score) {
this.serialNumber = serialNumber;
this.name = name;
this.sex = sex;
this.birthday = birthday;
this.score = score;
}
student.prototype.getAge = function() {
var birthday = new Date(this.birthday.replace(/-/g, "/"));
var d = new Date();
var age =
d.getFullYear() -
birthday.getFullYear() -
(d.getMonth() < birthday.getMonth() ||
(d.getMonth() == birthday.getMonth() &&
d.getDate() < birthday.getDate())
? 1
: 0);
return age;
}
student.prototype.study = function() {
this.score++;
}
var obj = new student(1, '张三', '男', '1990-01-01', 65);
console.log('入参：', 1, '张三', '男', '1990-01-01', 65);
console.log('年龄：', obj.getAge());
obj.study();
console.log('学习：', obj.score);
obj.study();
console.log('学习：', obj.score);
var obj2 = new student(2, '王五', '女', '1970-01-01', 85);
console.log('入参：', 2, '王五', '女', '1970-01-01', 85);
console.log('年龄：', obj2.getAge());
obj2.study();
console.log('学习：', obj2.score);
obj2.study();
console.log('学习：', obj2.score);
obj2.study();
console.log('学习：', obj2.score);
</script>
</body>
</html>