Maison > interface Web > js tutoriel > le corps du texte

Comment créer l'écran Big Data d'une entreprise

php中世界最好的语言
Libérer: 2017-11-27 14:25:56
original
5226 Les gens l'ont consulté

En parlant d'écrans big data, tout le monde peut penser aux grands écrans data Tmall Double 11, cool ! Oui, les grands écrans de données sont synonymes d’effets sympas. Je l'ai déjà fait une fois, je vais donc résumer comment je l'ai fait.

1. Adaptatif à l'écran

Je n'ai reçu que le dessin de conception 1920*1080 donné par le designer, mais ce n'est pas nécessairement cette taille. Je sais quelle est la taille de l'écran pour afficher ces données, je ne peux donc faire qu'un effet adaptatif ! Comment obtenir un effet adaptatif. J'ai pensé à plusieurs solutions. La solution actuelle que j'utilise consiste à utiliser les unités vh et vw pour la mise en page. Pour une introduction à ces deux unités, j'ai déjà écrit un article, http://www.haorooms.com/post/css_unit_calc. De cette manière, une mise en page adaptative peut être obtenue.

Avantages de l'utilisation des unités vh et vw

1. L'axe de défilement peut apparaître sans que la page ne scintille :

@media screen and (min-width: 960px) { //之所以进行宽度判断,是因为移动端滚动轴不占宽度
    html {
        margin-left: calc(100vw - 100%);
        margin-right: 0;
    }}
Copier après la connexion

Depuis, nous. have Il n'est plus nécessaire de calculer la largeur de l'axe de défilement. Concernant le calcul de la largeur de l'axe de défilement, veuillez cliquer sur

2. Comme je suis en plein écran, il n'est pas nécessaire que l'axe de défilement soit calculé. apparaître, mais différents écrans de zoom peuvent. Lorsque l'axe de défilement apparaît, vous pouvez utiliser le code suivant pour annuler l'affichage de l'axe de défilement.

html {
    width:100vw;
    height:100vh;
    overflow:hidden;}
Copier après la connexion

Inconvénients

1. Il est relativement difficile de calculer

2 Lorsque l'élément parent est positionné, il peut être remplacé par un pourcentage, ce qui est mieux que. VH et VW ont une bonne compatibilité. (Mon grand écran de données ne nécessite pas une bonne compatibilité, j'ai donc choisi vh et vw)

2. Effets de défilement de nombres et de pourcentages

Concernant l'effet de défilement de nombres, je l'ai utilisé il y a longtemps. Un plug-in, mais celui-ci utilise des images pour le défilement, car j'ai des ennuis, on peut actuellement utiliser du css3 pour le défilement numérique !

3. Chaque fois que setTimeout est exécuté, le temps augmente d'une seconde

Une application courante de ceci consiste à exécuter un morceau de code un nombre aléatoire sur deux, et l'intervalle de temps est différent !

J'ai utilisé setInterval au début, mais j'ai découvert que l'heure de chaque exécution est l'heure de la première exécution, car après l'appel de setInterval, il sera ajouté à la file d'attente d'exécution du minuteur, en attente de liaison. La fonction est exécutée, ce qui signifie que l'intervalle de temps réglé ne sera efficace qu'une seule fois. Utilisez alors setTimeout à la place. Concernant setTimeout, je l’ai également mentionné dans mon article précédent !

Le code pour exécuter un nombre aléatoire est le suivant :

function runRandom(obj){
    var timeout=Math.round(Math.random()*1000+1000);
    clearTimeout(obj.randomTime);
    obj.randomTime=setTimeout(function timeoutFun(){
        //执行你的逻辑
        timeout=Math.round(Math.random()*1000+1000);
        obj.randomTime=setTimeout(timeoutFun,timeout);
    },timeout);}
Copier après la connexion

Une partie de mon code est la suivante :

flip:function(obj){
    var _this =this;
        clearTimeout(obj.flip);
        obj.flip=setTimeout(function timeoutFun(){
         if(_this.SwithIndex<5){
              $("#dataUpadteSwitch").find("li").eq(_this.SwithIndex).addClass("current").siblings().removeClass("current");
              _this.SwithIndex++;
              _this.initTime+=1000;//每执行一次增加1000毫秒
               // console.log(_this.initTime)
            //右上角百分比,速度快慢可以调整
            _this.baifenbiAnimate("loadingDatabfb",0,1,100,10+_this.SwithIndex*10);
            //右上角旋转动画,快慢可以调整-调整旋转速度变慢-推迟0.5s
            _this.routedSpeed((1+_this.SwithIndex/2)+"s");
          }else{
              _this.SwithIndex=0;//循环执行,执行5次之后从头开始执行
              _this.initTime=3000;//一开始是3000毫秒
          }
          obj.flip=setTimeout(timeoutFun,_this.initTime);
        },_this.initTime);}
Copier après la connexion

4. 🎜>

données La plupart des grands écrans se déclenchent automatiquement, sans interaction de la souris, et sont exécutés toutes les quelques secondes. Nous avons utilisé un tableau similaire à la carte de la Chine, mais l'info-bulle se déclenche automatiquement, mettant à jour les données toutes les quelques secondes. et déclenchement une fois !

Définissez d'abord triggerOn sous l'info-bulle sur none, puis déclenchez-le via dispatchAction. L'explication officielle de l'API est vague, mais elle est en fait très simple. Le code est le suivant :

<🎜. >De cette façon, il peut être déclenché automatiquement.
myChart.dispatchAction({
    type: &#39;showTip&#39;,
    // 系列的 index,在 tooltip 的 trigger 为 axis 的时候可选。
    name: (convertData(obj.mapData.sort(function(a, b) {
            return b.value - a.value;
        }).slice(0, 1)))[0].name //获取最多数据的名字});
Copier après la connexion

5. Utilisez SVG pour créer une horloge dynamique

Il doit y avoir une heure dynamique sur le grand écran de données. Le temps saute et une horloge apparaît. nécessaire. Je partage mon code ici :

le code html est le suivant :

le code css est le suivant :
  <div id="nowtimes">
                <div class="parent">
                    <svg height="200" width="200" viewBox="0 0 1000 1000">
                        <path d="M978,500c0,263.99-214.01,478-478,478s-478-214.01-478-478,214.01-478,478-478,478,214.01,478,478zm-888.93,237.25,20.179-11.65m779.16-449.85l22.517-13m-648.18,648.18,11.65-20.18m449.85-779.16l13-22.517m-711.75,410.93h23.305m899.7,0h26m-885.43-237.25,20.179,11.65m779.16,449.85,22.517,13m-648.18-648.18l11.652,20.183m449.85,779.16,13,22.517m-237.25-885.43v23.305m0,899.7,0,26"/>
                        <path d="M500,500,500,236" id="hour"/>
                        <path d="M500,500,500,120" id="min" />
                        <path d="M500,500,500,90" id="sec" />
                    </svg>
                </div>
                <div class="tdtimes" id="tdtimes"></div>
          </div>
Copier après la connexion

le code js est le suivant :
/* 钟表样式*/svg {position: absolute;top: 10%; width: 100%; height: 80%;}path { stroke: #fff;stroke-linecap:round; stroke-width: 35;fill:none;}#sec { stroke: #fff; stroke-width: 20;}#min {stroke: #fff;stroke-width: 30;}#hour { stroke: #fff;stroke-width: 30;}#nowtimes{margin-top:7px;}#nowtimes .parent{width:30px;position:relative;height:30px;display: inline-block;vertical-align: middle;}.tdtimes{display: inline-block;font-size:.7vw;color:#979798;vertical-align: middle;}
Copier après la connexion

Cela complète l'effet de la petite horloge et du temps sautant sur le côté droit !
   setInterval(function() {
      function r(el, deg) {
        el.setAttribute(&#39;transform&#39;, &#39;rotate(&#39;+ deg +&#39; 500 500)&#39;)
      }
      var d = new Date();
      r(sec, 6*d.getSeconds());
      r(min, 6*d.getMinutes());
      r(hour, 30*(d.getHours()%12) + d.getMinutes()/2);
      $("#tdtimes").html(d.getHours() +":" +d.getMinutes() +":" +d.getSeconds());
    }, 1000)
Copier après la connexion

Je pense que vous maîtrisez les méthodes après avoir lu ces cas. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !


Lecture connexe :

Comment utiliser CSS3 pour créer des effets d'icônes

Comment utiliser CSS3 pour qu'il affiche une animation de texte lorsqu'il est éclairé par la lumière

Cliquez en CSS3 pour afficher les effets d'entraînement

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal
À propos de nous Clause de non-responsabilité Sitemap
Site Web PHP chinois:Formation PHP en ligne sur le bien-être public,Aidez les apprenants PHP à grandir rapidement!