Simon.hu 发表于 2018-1-16 15:00:09

帮你打开活字格更神奇的功能:六,填写数据时,提示填写进度

很多的同学,在用产品的的时候,希望用户在填写数据的时候,能有个类似进度条的功能,让用户能够明确的知道,已经填写完成了百分之多少
这个需求,暂时产品确实没有直接的功能来做,但是好的需求,我们一定要找到帮助大家解决问题的方法,于是便有了下面的功能。

这个气泡看起来很炫酷,有木有?
答完一道题,以后气泡就故意动一下,然后我们随意的滚动页面气泡也是不会变位置的。
当然进度条的,也是有的,只是我故意去掉了,感觉这个更加好看,不过我会在附件中将2个都放上,以便于大家选择自己喜欢的那一个。
做法:
1.引入JS等文件
>所有页面
如果你要给每个页面都加上这个气泡的话,请将附件的如下图3个文件,加入到这里

因为本例中,只有5道题,我们需要把myScrpit.js文件2处修改成5


>单独页面
如果你只是要一个页面中,有这个效果,请将total.js这个文件,放到该页面的如下位置

因为本例中,只有5道题,我们需要把total文件中的这里2处,改成5

2.给每道题都加入不同的JS命令

因为一共是5道题,我们需要给每一道题都添加,一个命令,这个命令也是5个,
第一个是:cd(0);
第二个是:cd(1);
第三个是:cd(2);
第四个是:cd(3);
第五个是:cd(4);
然后就有了,我们要的效果,这里的效果,我用气泡+进度条的效果截图

工程文件,见附件!

德拉库拉 发表于 2018-1-16 15:04:44

脑洞真心牛

Simon.hu 发表于 2018-1-16 15:08:56

德拉库拉 发表于 2018-1-16 15:04
脑洞真心牛

感谢您的支持!

TimZhang 发表于 2018-1-16 16:05:02

Mark
页: [1]
查看完整版本: 帮你打开活字格更神奇的功能:六,填写数据时,提示填写进度