构建项目

.gitignore

@@ -0,0 +1,2 @@
+/node_modules
+/dist

css/awards.css

@@ -0,0 +1,24 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+html,
+body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.anards {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+.anards::-webkit-scrollbar {
+    width:0;
+}
+.anards img {
+    width: 100%;
+    display: block;
+}

css/index.css

@@ -0,0 +1,72 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+html,
+body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+.container {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+.container::-webkit-scrollbar {
+    width:0;
+}
+.container .bg {
+    width: 100%;
+    display: block;
+}
+.message {
+    position: absolute;
+    left: 0;
+    top: 7.52rem;
+    width: 100%;
+    height: 2.71rem;
+    text-align: center;
+    overflow: hidden;
+    padding: 0 .7rem;
+    box-sizing: border-box;
+    color: #fff;
+}
+.title {
+    font-size: .28rem;
+    text-align: center;
+    margin-top: .18rem;
+}
+.content {
+    height: 2.1rem;
+    overflow: hidden;    
+}
+.bigcase {
+    font-size: .28rem;
+    list-style: none;
+}
+.bigcase li {
+    margin-top: .14rem;
+}
+.ceshibtn {
+    position: absolute;
+    top: 10.62rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4.6rem;
+    height: 1rem;
+    background: url('../image/index/ceshibtn.png');
+    background-size: 100% 100%;
+}
+.prizebtn {
+    position: absolute;
+    top: 11.82rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 4.6rem;
+    height: 1rem;
+    background: url('../image/index/prizebtn.png');
+    background-size: 100% 100%; 
+}

css/question.css

@@ -0,0 +1,214 @@
+* {
+    padding: 0;
+    margin: 0;
+}
+html,
+body {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+}
+.content {
+    width: 100%;
+    height: 100%;
+    overflow-y: scroll;
+}
+.content::-webkit-scrollbar {
+    width: 0;
+}
+.question-container {
+    width: 100%;
+    position: relative;
+}
+.container-bg {
+    width: 100%;
+    display: block;
+}
+.title {
+    position: absolute;
+    top: 6.8rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 7.12rem;
+    height: .54rem;
+}
+.title img {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+}
+.subject {
+    position: absolute;
+    top: 7rem;
+    left: 0;
+    right: 0;
+    margin:0 auto;
+    width: 6.62rem;
+    border-radius: 0 0 .2rem .2rem;
+}
+.question {
+    position: relative;
+    z-index: 2;
+    width: 6.62rem;
+    height: auto;
+    border-radius: 0 0 .2rem .2rem;
+    background: #fff;
+    overflow: hidden;
+    padding: 0 .4rem;
+    box-sizing: border-box;
+}
+.inset {
+    position: absolute;
+    left: 0;
+    top: 0;
+    z-index: 99;
+    width: 100%;
+    height: .54rem;
+}
+.bottom {
+    position: absolute;
+    left: 0;
+    bottom: -.18rem;
+    width: 100%;
+    height: .26rem;
+}
+.question-box {
+    height: 9.72rem;
+    overflow: hidden;
+    border-radius: 0 0 .2rem .2rem;
+    background: #fff;
+}
+.audio {
+    position: absolute;
+    top: .5rem;
+    left: .5rem;
+    display: flex;
+    align-items: center;
+}
+.audio .audiobtn {
+    width: .7rem;
+    height: .7rem;
+}
+.audio div {
+    font-size: .32rem;
+}
+.question-photo {
+    position: relative;
+    width: 100%;
+    margin-top: 1.7rem;
+    height: 3.72rem;
+}
+.question-photo img {
+    position: absolute;
+    top: 50%;
+    left: 0;
+    transform: translateY(-50%);
+    width: 100%;
+}
+.option {
+    width: 100%;
+    margin-top: .5rem;
+}
+.option li {
+    width: 100%;
+    height: .7rem;
+    border: .02rem #FEA10F solid;
+    margin-bottom: .3rem;
+    font-size: .28rem;
+    text-align: center;
+    line-height: .7rem;
+    border-radius: .16rem;
+    list-style:none;
+}
+.select {
+    background: #FEA10F;
+    color: #fff;
+}
+.order {
+    font-size: .28rem;
+    text-align: center;
+    padding-bottom: .3rem;
+}
+.ind {
+    color: #7A81FF;
+}
+.popup {
+    position: absolute;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background: rgba(0, 0, 0, .8);
+    z-index: 999;
+    display: none;
+}
+.popup-content {
+    width: 100%;
+    height: 100%;
+}
+.popup-content .bg {
+    position: absolute;
+    left: 15%;
+    top: 10%;
+    width: 70%;
+    height: 70%;
+}
+
+canvas {
+    position: absolute;
+    top: -9999px;
+}
+
+.baocun {
+    position: absolute;
+    left: 50%;
+    bottom: 15%;
+    transform: translateX(-50%);
+    color: #fff;
+    font-size: .28rem;
+}
+
+.code {
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1.6rem;
+    background: #fff;
+    display: flex;
+    align-items: center;
+}
+
+.code img {
+    width: 1.32rem;
+    height: 1.32rem;
+    margin: 0 .45rem;
+}
+
+.code .text {
+    display: flex;
+    flex-direction: column;
+    font-size: .28rem;
+}
+
+
+/*卷边效果 需要完善已经注释*/
+/*
+box-shadow: 0 4px 8px 0 #A691D3;
+.question:before{
+    content: '';
+    position: absolute;
+    right:0;
+    bottom:0;
+    border-style: solid;
+    border-width: 0;
+    border-color:#fff rgba(0, 0, 0, 0.2);
+    transition: all .5s;
+    border-radius: 0 0 50% 0;
+}
+ .question:hover:before {
+    border-top-width: 300px;
+    border-right-width: 300px;
+} */

index.html

@@ -0,0 +1,53 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="./css/index.css">
+    <script src="./utils/size.js"></script>
+</head>
+<body>
+    <div class="container">
+        <img class="bg" src="./image/index/indexbg.jpg" alt="">
+        <div class="message">
+            <div class="title">已有22222人参加</div>
+            <div class="content">
+                <ul class="bigcase">
+                    <li>哈哈的哈哈的哈哈好的哈收到货后1</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后2</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后3</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后4</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后5</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后6</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后7</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后8</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后9</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后10</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后11</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后12</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后13</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后14</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后15</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后16</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后17</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后18</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后19</li>
+                    <li>哈哈的哈哈的哈哈好的哈收到货后20</li>
+                </ul>
+            </div>
+        </div>
+        <a href="./view/question.html" class="ceshibtn"></a>
+        <a href="./view/awards.html" class="prizebtn"></a>
+    </div>
+    <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+    <script src="./js/scroll.js"></script>
+    <script>
+        $('.content').myScroll({
+            speed: 40, //数值越大，速度越慢
+            rowHeight: 26 //li的高度
+        });
+    </script>
+</body>
+</html>

js/scroll.js

@@ -0,0 +1,51 @@
+// JavaScript Document
+(function($){
+	$.fn.myScroll = function(options){
+	//默认配置
+	var defaults = {
+		speed:40,  //滚动速度,值越大速度越慢
+		rowHeight:24 //每行的高度
+	};
+	
+	var opts = $.extend({}, defaults, options),intId = [];
+	
+	function marquee(obj, step){
+	
+		obj.find("ul").animate({
+			marginTop: '-=1'
+		},0,function(){
+				var s = Math.abs(parseInt($(this).css("margin-top")));
+				if(s >= step){
+					$(this).find("li").slice(0, 1).appendTo($(this));
+					$(this).css("margin-top", 0);
+				}
+			});
+		}
+		
+		this.each(function(i){
+			var sh = opts["rowHeight"],speed = opts["speed"],_this = $(this);
+			intId[i] = setInterval(function(){
+				if(_this.find("ul").height()<=_this.height()){
+					clearInterval(intId[i]);
+				}else{
+					marquee(_this, sh);
+				}
+			}, speed);
+
+			_this.hover(function(){
+				clearInterval(intId[i]);
+			},function(){
+				intId[i] = setInterval(function(){
+					if(_this.find("ul").height()<=_this.height()){
+						clearInterval(intId[i]);
+					}else{
+						marquee(_this, sh);
+					}
+				}, speed);
+			});
+		
+		});
+
+	}
+
+})(jQuery);

package.json

@@ -0,0 +1,15 @@
+{
+  "name": "answer",
+  "version": "1.0.0",
+  "description": "",
+  "main": "server.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "start": "node server.js"
+  },
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "express": "^4.16.4"
+  }
+}

server.js

@@ -0,0 +1,5 @@
+var express = require('express');
+var app = express();
+app.use("/",express.static(__dirname + "/"));
+app.listen(8888)
+console.log('localhost:8888')

utils/size.js

@@ -0,0 +1,16 @@
+(function(doc, win) {
+    var docEl = doc.documentElement,
+        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
+        recalc = function() {
+            var clientWidth = docEl.clientWidth;
+            if (!clientWidth) return;
+            if (clientWidth >= 750) {
+                docEl.style.fontSize = '100px';
+            } else {
+                docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';
+            }
+        };
+    if (!doc.addEventListener) return;
+    win.addEventListener(resizeEvt, recalc, false);
+    doc.addEventListener('DOMContentLoaded', recalc, false);
+})(document, window)

view/activity.html

@@ -0,0 +1,14 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="../css/awards.css">
+    <script src="../utils/size.js"></script>
+</head>
+<body>
+    
+</body>
+</html>

view/awards.html

@@ -0,0 +1,16 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="../css/awards.css">
+    <script src="../utils/size.js"></script>
+</head>
+<body>
+    <div class="anards">
+        <img src="../image/awards/1.jpg" alt="">
+    </div>
+</body>
+</html>

view/question.html

@@ -0,0 +1,197 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <meta http-equiv="X-UA-Compatible" content="ie=edge">
+    <title>Document</title>
+    <link rel="stylesheet" href="../css/question.css">
+    <script src="../utils/size.js"></script>
+</head>
+<body>
+    <div class="content">
+    <div class="question-container">
+        <img class="container-bg" src="../image/question/questionbg.jpg" alt="">
+        <div class="title">
+            <img src="../image/question/title.png" alt="title">
+        </div>
+        <div class="subject">
+            <img class="inset" src="../image/question/inset.png" alt="inset">
+            <img class="bottom" src="../image/question/bottom.png" alt="bottom">
+            <div class="question-box"></div>
+            <!--
+            <div class="question" >
+                <div class="audio">
+                    <audio src="http://www.ytmp3.cn/down/44537.mp3" autoplay="autoplay" preload="auto">
+                        您的浏览器不支持 audio 标签。
+                    </audio>
+                    <img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">
+                    <span>甜甜圈从左数是第几个？</span>
+                </div>
+                <div class="question-photo"></div>
+                <ul class="option">
+                    <li class="select">第一个</li>
+                    <li>第二个</li>
+                    <li>第三个</li>
+                </ul> 
+                <div class="order">
+                    <span>1</span><span>/5</span>    
+                </div> 
+            </div>
+            -->
+        </div>
+    </div>
+    <div class="popup">
+        <div class="popup-content">
+            <canvas id="myCanvas" width="255px" height="466px">
+                您的浏览器不支持canvas标签。
+            </canvas>
+            <img class="bg" src="../image/question/2.jpg" alt="">
+            <div class="baocun">长按保存，并分享至朋友圈</div>
+            <div class="code">
+                <img src="../image/question/2.jpg" alt="">
+                <div class="text">
+                    <span>长按识别二维码</span>
+                    <span>即可获得小学课文朗读配音奖品</span>
+                </div>
+            </div>
+            <!--
+            <img class="head" src="../image/question/头像.jpg" alt="">
+            -->
+        </div>
+    </div>
+    </div>
+</body>
+<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
+<script>
+    var answer = "";
+    var questionId = "";
+    var requestId = "";
+    var data = {
+        "activityId": "1",
+        "answer": "",
+        "questionId": "",
+        "requestId": ""
+    }
+    var ind = 0;
+    function recursion() {
+        ajaxData("https://readertest.lingjiao.cn/activity/activity", '7', data, function(result){
+            var length = result.data.questionNum;
+            data.questionId = result.data.question.id;
+            data.requestId = result.data.requestId;
+            // 一开始创建div 没内容
+            $("<div></div>", {
+            "class": "question", // 设置样式类
+            html: '<div class="order">' +
+                        '<span class="ind">1</span><span>/'+ length +'</span>' +   
+                    '</div>', // 设置内容 
+            }).appendTo($('.question-box')); // 追加到body标签
+            // 初次渲染第一题
+            renderDiv(ind, result.data.question)
+            $('.question').eq(ind).children('ul').find('li').on('click', function() {
+                data.answer = $(this).data('answer');
+                ind++;
+                $(this).addClass('select').siblings().removeClass('select');
+                var that = this;
+                recursion();
+                setTimeout(function () {
+                    if( ind >= length) {
+                        $('.popup').show();
+                        return false;
+                    }
+                    $(that).parents('.question').slideUp('slow', function () {
+                        $('.question').eq(ind).find('.ind').text(ind + 1);
+                    });
+                }, 500)
+            })
+        })
+    }
+    recursion();
+    // ajax请求
+    function ajaxData (url, uid, data, success) {
+        $.ajax({
+            url: url,
+            type: 'POST',
+            headers: {'uid': uid},
+            contentType:'application/json;charset=utf-8',
+            data: JSON.stringify(data),
+            success: success
+        });
+    }
+    // 渲染元素
+    function renderDiv (ind, datas) {
+        var renders =  '<div class="audio">' + 
+                    '<audio src="'+ datas.audio +'">' +
+                            '您的浏览器不支持 audio 标签。' +
+                        '</audio>' +
+                        '<img class="audiobtn" src="../image/question/audiobtn.png" alt="audiobtn">' +
+                        '<div>'+ datas.content +'</div>' +
+                    '</div>' +
+                    '<div class="question-photo">'+
+                        '<img src="'+ datas.imgUrl +'" alt="">'+
+                    '</div>' +
+                    '<ul class="option">' +
+                        '<li data-answer="A">'+ datas.optionA +'</li>' +
+                        '<li data-answer="B">'+ datas.optionB +'</li>' +
+                        '<li data-answer="C">'+ datas.optionC +'</li>' +
+                    '</ul>'
+        $('.question').eq(ind).prepend(renders)         
+    }
+
+    //canvas绘制图片
+    //获取Canvas对象(画布)
+    var canvas = document.getElementById("myCanvas");
+    //简单地检测当前浏览器是否支持Canvas对象，以免在一些不支持html5的浏览器中提示语法错误
+    if(canvas.getContext){  
+        //获取对应的CanvasRenderingContext2D对象(画笔)
+        var ctx = canvas.getContext("2d");
+        //回调地狱，可优化，暂时这样写
+        canvasImg('../image/question/2.jpg', 0, 0, '255', '466', function() {
+            canvasImg('../image/question/2.jpg', 200, 400, '50', '50', function() {
+                ctx.moveTo(125,20);
+                ctx.lineTo(125,170);
+                ctx.fillStyle = '#fff';
+                ctx.font="14px Arial";
+                ctx.textAlign="center";
+                ctx.fillText("王丽丽王丽丽丽丽学前测评报告",125,120);
+                circleImg('../image/question/2.jpg', 110, 290, 15)
+            })
+        })
+        ctx.restore();
+    }
+    function canvasImg (url, x, y, w, h, success) {
+        //创建新的图片对象
+        var img = new Image();
+        //指定图片的URL
+        img.src = url;
+        //浏览器加载图片完毕后再绘制图片
+        img.onload = function(){
+            //以Canvas画布上的坐标(10,10)为起始点，绘制图像
+            ctx.drawImage(img, x, y, w, h);  
+            success();          
+        };
+    }
+    // 封装了一个简单截取头像的方法
+    function circleImg(url, x, y, r) {
+        //创建新的图片对象
+        var img = new Image();
+        //指定图片的URL
+        img.src = url;
+        ctx.save();
+        var d =2 * r;
+        var cx = x + r;
+        var cy = y + r;
+        img.onload = function(){
+            ctx.arc(cx, cy, r, 0, 2 * Math.PI);
+            ctx.clip();
+            //以Canvas画布上的坐标(10,10)为起始点，绘制图像
+            ctx.drawImage(img, x, y, d, d);             
+        };
+    }
+  //0.5s后生成图片
+    setTimeout(function() {
+        var dataURL = canvas.toDataURL("image/png",1.0);
+        $('.bg').attr('src', dataURL)
+    }, 500)
+</script>
+</html>