- 效果如下,页面布局较简易,可自行布局
2. 基本思路
*图片的如何切换
*点击提交 对比对应的第几张图片是否与自己设置的答案一致,一致就切换图片下一个
*提示为 随机提示设置的答案里的一个字,一张图片只能提示一次(可根据自己的想法设置)
*点击答案时应跳出一个广告,广告结束后跳出正确答案
3.图片的切换
*准备几张图片更改格式,使它们有规律如:A1 A2 A3 A4 A5等
*加入img标签路径通过JS来赋值修改
*通过ID获取到img标签,通过setAttribute修改src属性
n为自定义,记录第几张图片(var n=1 //从第一张开始 全局变量)
4.给对应图片赋值答案(var name=””//全局变量,记录每一张图片的 答案)
*因为n为记录第几张图片,所有根据n来给对应的图片赋予答案
5. 点击提交,输入内容与答案(name)对比
*如果输入的内容与答案一致则提示下一个
*n++(下一张图片)
*清空输入框(方便玩家继续答题)
*重新调用切换图片(此时n为2所有会切为第二张图片)
*hintint为全局变量,记录提示几次,下一关需重置提示次数
6.点击提示操作
*判断hintint是否为初始值零,为零即没有提示过可提示
*获取答案(name)的长度
*在答案的规定长度内随机生成一个数
*name[zz] :zz为随机数(即随机提示答案内的一个字)
*hintint++ :即记录提示为一次,hintint不为零不能提示第二次
只能下一关的时候重置hintint才能再次提示
7.点击答案
*guang为广告窗体,可根据自己需设置(此处只是一个隐藏与显示)实现类式“广告”
*guangao:全局变量,初始值自己设置,即广告时间
*clearInterval(answer);停止倒计时
*setTimeout(answer,1000);为每一秒调用一次自身函数,值到广告时间为0;
以上便是一个简易版的看图猜名