实例介绍
【实例简介】
【实例截图】
【核心代码】
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no">
<meta name="generator" content="bd-mobcard">
<meta http-equiv="Cache-Control" content="no-cache">
<script type="text/javascript" src="js.js"> </script>
<script type="text/javascript" >
$(function(){
// alert(document.title);
// $('#begin').click(function(){
// $('#notice').css('display','none');
// $('#title').css('display','none');
//// var leftPos = (typeof window.screenLeft == "number") ? window.screenTop : window.screenY;
//// window.moveTo(200,0)
// // $("#notice").scrollTop(1000);
// // alert($("#notice").offset().top);
// scrollOffset($("#notice").offset());
//// // jQuery 定位让body的scrollTop等于pos的top，就实现了滚动
// function scrollOffset(scroll_offset) {
// $("body,html").animate({
// scrollTop: scroll_offset.top 1000
// }, 0);
// } ;
// window.scroll(20000,2000); //2000代表定位到这个页面距离顶端2000px;
// location.href = "#notice";
// $('.test:first').css('display','block');
//// alert($('.test:first').html());
//
// });
$('#begin_2').click(function(){
$('.topbox').css('display','none');
$('.test:first').css('display','block');
});
$('li').click(function(){
$(this).addClass('on');
// alert( $(this).html());
var select=$(this).children(':radio').val();
var answer=$(this).parents('div').children(':hidden').val();
// s alert($(this).children(':radio').val());
var sumScore=$('#sumScore').val();
if(select===answer){
$('#sumScore').val(parseInt(sumScore) 1);
}
// alert( $(this).parents('.test').css('display'));
$(this).parents('div').css('display','none');
if( $(this).parents('div').next('div').hasClass('end')){
var score= $('#sumScore').val();
if(score<5){
var src="img/score" score*5 ".png";
$('#level1 .score img').attr('src',src);
$('#level1').css('display','block');
}else if(score<10){
var src="img/score" score*5 ".png";
$('#level2 .score img').attr('src',src);
$('#level2').css('display','block');
}else if(score<15){
var src="img/score" score*5 ".png";
$('#level3 .score img').attr('src',src);
$('#level3').css('display','block');
}else{
var src="img/score" score*5 ".png";
$('#level4 .score img').attr('src',src);
$('#level4').css('display','block');
}
document.title="我在测试中得到了" score*5 "分，你能超过我吗?";
$('.guanzhu1').css('display','block');
// alert(document.title);
}else{
$(this).parents('div').next('div').css('display','block');
}
// alert( $(this).parents('div').next('div').html());
});
$(':radio').click(function(){
$(this).parents('li').addClass('on');
// alert( $(this).parents('li').html());
var select=$(this).val();
var answer=$(this).parents('div').children(':hidden').val();
var sumScore=$('#sumScore').val();
if(select===answer){
$('#sumScore').val(parseInt(sumScore) 1);
}
// alert( $(this).parents('.test').css('display'));
$(this).parents('div').css('display','none');
if( $(this).parents('div').next('div').hasClass('end')){
var score= $('#sumScore').val();
if(score<5){
var src="img/score" score*5 ".png";
$('#level1 .score img').attr('src',src);
$('#level1').css('display','block');
}else if(score<10){
var src="img/score" score*5 ".png";
$('#level2 .score img').attr('src',src);
$('#level2').css('display','block');
}else if(score<15){
var src="img/score" score*5 ".png";
$('#level3 .score img').attr('src',src);
$('#level3').css('display','block');
}else{
var src="img/score" score*5 ".png";
$('#level4 .score img').attr('src',src);
$('#level4').css('display','block');
}
}else{
$(this).parents('div').next('div').css('display','block');
}
// alert( $(this).parents('div').next('div').html());
});
// $('.ask').click(function(){
// $(this).parents('div').css('display','none');
// $(this).parents('div').next('div').css('display','block');
// var select=$(this).parents('div').find(':radio:checked').val();
// alert(select);
// });
function WeiXinShareBtn() {
if (typeof WeixinJSBridge == "undefined") {
alert("请先通过微信搜索考试招聘信息平台，通过微信分享文章 :) ");
} else {
WeixinJSBridge.invoke('shareTimeline', {
"title": "测试",
"link": "http://wx.linewow.com/ceshi/index.html",
"desc": "关注互联网创业",
"img_url": "http://wx.linewow.com/ceshi/img/topimg.jpg"
});
}
}
$('.share').click(function(){
// WeiXinShareBtn();
$('.share_b').css('display','block');
location.href = "#title";
});
$('.share_b').click(function(){
$(this).css('display','none');
});
$('#close').click(function(){
$('.guanzhu1').css('display','none');
});
})
</script>
<title>测试</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="topbox" id='title'>
<img src="img/bj.jpg" class="bg"/>
<!-- <div class="tb_txt1"><span id="ft">已有<em>20112</em>人参与考试</span></div>-->
<div class="con">
<a id="begin_2" class="test_a"><img src="img/btn.png" alt=""/></a>
</div>
</div>
<div class="gztt" id='notice'>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>1.</span>-- How is your sister?<br />
-- She is 20 years old.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="C">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>2.</span>-- What do you think of your new job?<br />
-- I think it is very easy for me.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>3.</span> -- What’s the weather like in Shanghai?<br />
-- It’s warmer than it is in London.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="B">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>4.</span>-- Excuse me, which way is to the supermarket, please?<br />
-- It’s next to the bank.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>5.</span>. -- Would you like some coffee?<br />
-- Yes, please.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="D">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>6.</span> -- What did they do there?<br />
-- They are working in a bank.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>7.</span> -- Are you free on Thursday?<br />
-- No, I am busy on Thursday but I am free on Friday.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>8.</span> -- Who is she talking to?<br />
-- She is talking to Mary.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>9.</span> -- When does the gym close?<br />
-- On Tuesday.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="C">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>10.</span>-- How was your day yesterday?<br />
-- I’ve got a bad cough.
</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" > <img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;" /></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>11.</span>. -- How much does the flat cost a month?<br />
-- It costs 400 pounds.
</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;" /></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>12.</span>-- Could you show me the ticket, please?<br />
-- Certainly. Here you are!
</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>13.</span>-- What do you think of your new job?<br />
-- I think it is very difficult.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="D">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>14.</span> -- Would you like some tea?<br />
-- No, thanks. </div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="C">
</div>
</div>
</div>
</div>
<div class="test">
<div class="score" ><img src="img/test_bg.png" alt="" style="border:none;border-radius:0px;"/></div>
<div class="test_con">
<div class="item">
<div class="tit"><span>15.</span>-- How do they do?
-- They work in a bank.</div>
<div class="item_con">
<ul>
<li>
<input type="radio" name="test1" id="" class="rad" value='A' /><span>A</span> Right
</li>
<li>
<input type="radio" name="test1" id="" class="rad" value='B'/><span>B</span> Wrong
</li>
</ul>
<input type="hidden" value="A">
</div>
</div>
</div>
</div>
<div class="test end" id='level1'>
<div class="score" ><img src="" alt=""/></div>
<div class="test_con">
<div class="answer_con">
<h1>你完了</h1>
<p>
<span>详细分析：</span><br/>
我很遗憾的告诉你，在美国你是绝对看不懂西游记、红楼梦、水浒传和葫芦娃的，还能不能好好玩了，还能不能愉快的做题了，那么认真
</p>
</div>
</div>
<div class="share"><img src="img/share.png" alt="分享"/></div>
</div>
<div class="test end" id='level2'>
<div class="score"><img src="" alt=""/></div>
<div class="test_con">
<div class="answer_con">
<h1>别放弃治疗</h1>
<p>
<span>详细分析：</span><br/>
刚好及格
</p>
</div>
</div>
<div class="share"><img src="img/share.png" alt="分享"/></div>
</div>
<div class="test end" id='level3'>
<div class="score" ><img src="" alt=""/></div>
<div class="test_con">
<div class="answer_con">
<h1>还不错</h1>
<p>
<span>详细分析：</span><br/>
良好
</p>
</div>
</div>
<div class="share"><img src="img/share.png" alt="分享"/></div>
</div>
<div class="test end" id='level4' >
<div class="score"><img src="" alt=""/></div>
<div class="test_con">
<div class="answer_con">
<h1>prefect</h1>
<p>
<span>详细分析：</span><br/>
优秀
</p>
</div>
</div>
<div class="share"><img src="img/share.png" alt="分享"/></div>
</div>
<div class="share_b"><img src="img/fx.png" alt=""/></div>
<!--<div class="guanzhu">
<img src="img/ico_tc_bg.png" alt="关注"/>
</div>-->
<input type="hidden" name='sumScore' id='sumScore' value="0">
</body>
</html>
标签： 刷题
好例子网口号：伸出你的我的手 — 分享！
小贴士
感谢您为本站写下的评论，您的评论对其它用户来说具有重要的参考价值，所以请认真填写。
- 类似“顶”、“沙发”之类没有营养的文字，对勤劳贡献的楼主来说是令人沮丧的反馈信息。
- 相信您也不想看到一排文字/表情墙，所以请不要反馈意义不大的重复字符，也请尽量不要纯表情的回复。
- 提问之前请再仔细看一遍楼主的说明，或许是您遗漏了。
- 请勿到处挖坑绊人、招贴广告。既占空间让人厌烦，又没人会搭理，于人于己都无利。
关于好例子网
本站旨在为广大IT学习爱好者提供一个非营利性互相学习交流分享平台。本站所有资源都可以被免费获取学习研究。本站资源来自网友分享，对搜索内容的合法性不具有预见性、识别性、控制性，仅供学习研究，请务必在下载后24小时内给予删除，不得用于其他任何用途，否则后果自负。基于互联网的特殊性，平台无法对用户传输的作品、信息、内容的权属或合法性、安全性、合规性、真实性、科学性、完整权、有效性等进行实质审查；无论平台是否已进行审查，用户均应自行承担因其传输的作品、信息、内容而可能或已经产生的侵权或权属纠纷等法律责任。本站所有资源不代表本站的观点或立场，基于网友分享，根据中国法律《信息网络传播权保护条例》第二十二与二十三条之规定，若资源存在侵权或相关问题请联系本站客服人员，点此联系我们。关于更多版权及免责申明参见 版权及免责申明
网友评论
我要评论