колесо фортуны javascript - JavaScript, Ajax

fr0st1k123 · 11.04.2018, 18:37

Здравствуйте нужна помощь с javascript, мне для сайта нужно колеса, в которое из бд будут добавляться рандомно некоторые названия.

Javascript я вообще не знаю, в гугле нашел только такой код помогите его подправить, чтобы при каждом повторном нажатии, в колесо заполнялись новые рандомные названия из бд.

Можно ли будет вообще реализовать так что в phpadmin создать бд и, чтоб из нее в колесо выводились рандомно выбраные названия?

Код:

<html>
<head>
    <meta charset="utf-8">
    <title>Wheel of Fortune Bingo</title>

 
    <style type="text/css">
    text{
        font-family:Helvetica, Arial, sans-serif;
        font-size:11px;
        pointer-events:none;
    }
    #chart{
        position:absolute;
        width:500px;
        height:500px;
        top:0;
        left:0;
    }
    #question{
        position: absolute;
        width:400px;
        height:500px;
        top:0;
        left:520px;
    }
    #question h1{
        font-size: 50px;
        font-weight: bold;
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        position: absolute;
        padding: 0;
        margin: 0;
        top:50%;
        -webkit-transform:translate(0,-50%);
                transform:translate(0,-50%);
    }
    </style>
    
</head>
<body>
    <div id="chart"></div>
    <div id="question"><h1></h1></div>
    
    <script src="https://d3js.org/d3.v3.min.js" charset="utf-8"></script>
    <script type="text/javascript" charset="utf-8">
        var padding = {top:20, right:40, bottom:0, left:0},
            w = 500 - padding.left - padding.right,
            h = 500 - padding.top  - padding.bottom,
            r = Math.min(w, h)/2,
            rotation = 0,
            oldrotation = 0,
            picked = 100000,
            oldpick = [],
            color = d3.scale.category20();//category20c()
            //randomNumbers = getRandomNumbers();
     
        var data = [
                    {"label":"Question 1",  "value":1,  "question":"What CSS property is used for specifying the area between the content and its border?"}, // padding
                    {"label":"Question 2",  "value":1,  "question":"What CSS property is used for changing the font?"}, //font-family
                    {"label":"Question 3",  "value":1,  "question":"What CSS property is used for changing the color of text?"}, //color
                    {"label":"Question 4",  "value":1,  "question":"What CSS property is used for changing the boldness of text?"}, //font-weight
                    {"label":"Question 5",  "value":1,  "question":"What CSS property is used for changing the size of text?"}, //font-size
                    {"label":"Question 6",  "value":1,  "question":"What CSS property is used for changing the background color of a box?"},  //comma
        ];
        var svg = d3.select('#chart')
            .append("svg")
            .data([data])
            .attr("width",  w + padding.left + padding.right)
            .attr("height", h + padding.top + padding.bottom);
        var container = svg.append("g")
            .attr("class", "chartholder")
            .attr("transform", "translate(" + (w/2 + padding.left) + "," + (h/2 + padding.top) + ")");
        var vis = container
            .append("g");
            
        var pie = d3.layout.pie().sort(null).value(function(d){return 1;});
        // declare an arc generator function
        var arc = d3.svg.arc().outerRadius(r);
        // select paths, use arc generator to draw
        var arcs = vis.selectAll("g.slice")
            .data(pie)
            .enter()
            .append("g")
            .attr("class", "slice");
            
        arcs.append("path")
            .attr("fill", function(d, i){ return color(i); })
            .attr("d", function (d) { return arc(d); });
        // add the text
        arcs.append("text").attr("transform", function(d){
                d.innerRadius = 0;
                d.outerRadius = r;
                d.angle = (d.startAngle + d.endAngle)/2;
                return "rotate(" + (d.angle * 180 / Math.PI - 90) + ")translate(" + (d.outerRadius -10) +")";
            })
            .attr("text-anchor", "end")
            .text( function(d, i) {
                return data[i].label;
            });
        container.on("click", spin);
        function spin(d){
            
            container.on("click", null);
            //all slices have been seen, all done
            console.log("OldPick: " + oldpick.length, "Data length: " + data.length);
            if(oldpick.length == data.length){
                console.log("done");
                container.on("click", null);
                return;
            }
            var  ps       = 360/data.length,
                 pieslice = Math.round(1440/data.length),
                 rng      = Math.floor((Math.random() * 1440) + 360);
                
            rotation = (Math.round(rng / ps) * ps);
            
            picked = Math.round(data.length - (rotation % 360)/ps);
            picked = picked >= data.length ? (picked % data.length) : picked;
            if(oldpick.indexOf(picked) !== -1){
                d3.select(this).call(spin);
                return;
            } else {
                oldpick.push(picked);
            }
            rotation += 90 - Math.round(ps/2);
            vis.transition()
                .duration(3000)
                .attrTween("transform", rotTween)
                .each("end", function(){
                    //mark question as seen
                    d3.select(".slice:nth-child(" + (picked + 1) + ") path")
                        .attr("fill", "#111");
                    //populate question
                    d3.select("#question h1")
                        .text(data[picked].question);
                    oldrotation = rotation;
                
                    container.on("click", spin);
                });
        }
        //make arrow
        svg.append("g")
            .attr("transform", "translate(" + (w + padding.left + padding.right) + "," + ((h/2)+padding.top) + ")")
            .append("path")
            .attr("d", "M-" + (r*.15) + ",0L0," + (r*.05) + "L0,-" + (r*.05) + "Z")
            .style({"fill":"black"});
        //draw spin circle
        container.append("circle")
            .attr("cx", 0)
            .attr("cy", 0)
            .attr("r", 60)
            .style({"fill":"white","cursor":"pointer"});
        //spin text
        container.append("text")
            .attr("x", 0)
            .attr("y", 15)
            .attr("text-anchor", "middle")
            .text("SPIN")
            .style({"font-weight":"bold", "font-size":"30px"});
        
        
        function rotTween(to) {
          var i = d3.interpolate(oldrotation % 360, rotation);
          return function(t) {
            return "rotate(" + i(t) + ")";
          };
        }
        
        
        function getRandomNumbers(){
            var array = new Uint16Array(1000);
            var scale = d3.scale.linear().range([360, 1440]).domain([0, 100000]);
            if(window.hasOwnProperty("crypto") && typeof window.crypto.getRandomValues === "function"){
                window.crypto.getRandomValues(array);
                console.log("works");
            } else {
                //no support for crypto, get crappy random numbers
                for(var i=0; i < 1000; i++){
                    array[i] = Math.floor(Math.random() * 100000) + 1;
                }
            }
            return array;
        }
    </script>
</body>
</html>

Stanislav · 12.04.2018, 08:03

Цитата:

Можно ли будет вообще реализовать так что в phpadmin создать бд и, чтоб из нее в колесо выводились рандомно выбраные названия?

да конечно можно

Serge_Bliznykov · 12.04.2018, 10:11

Цитата:

Сообщение от fr0st1k123

ь так что в phpadmin создать бд

судя по всему, раз работает PHPAdmin, значит, на сервере есть PHP.
Нужно будет на сервере написать простенький скрипт, который по запросу с клиента возвращает

Цитата:

Сообщение от Stanislav

рандомно выбраные названия

обращаться через JS к этому скрипту с клиента (через AJAX, например) и полученные данные выводить куда Вам надо.

Stanislav · 12.04.2018, 10:54

Да я именно это все и имел виду, не стал тратить энергию, вдруг автор не вернется. как бонус

Код:

SELECT column FROM table
ORDER BY RAND()
LIMIT 10

12.04.2018, 10:54	#4
Stanislav Квадрокоптерист Участник клуба Подтвердите свой е-майл Регистрация: 29.09.2007 Сообщений: 1,824	Да я именно это все и имел виду, не стал тратить энергию, вдруг автор не вернется. как бонус Код: `SELECT column FROM table ORDER BY RAND() LIMIT 10` Я часть той силы, что вечно хочет зла, но вечно совершает благо..

Опции темы	Поиск в этой теме
Версия для печати Отправить по электронной почте	Поиск в этой теме: Расширенный поиск

Похожие темы
Тема	Автор	Раздел	Ответов	Последнее сообщение
Помогите написать Колесо Фортуны в JavaFX	NadiaT9	Помощь студентам	11	30.11.2015 03:59
Колесо мыши и TrackBar	D!zel	Общие вопросы Delphi	2	05.03.2013 15:41
[Delphi] Изобретая колесо	Язь	Помощь студентам	0	19.11.2011 18:32
колесо прокрутки в RichEdit в Delphi	TaYgA	Компоненты Delphi	4	06.11.2009 23:04