AngularJS est un framework JavaScript. C'est une bibliothèque écrite en JavaScript. Il peut être ajouté aux pages HTML via la balise Le HTML est étendu via des directives et les données sont liées au HTML via des expressions. Il est publié sous forme de fichier JavaScript et peut être ajouté aux pages Web via la balise script. Cet article présente principalement l'exemple de code d'angularjs pour obtenir un effet de chronologie. </p> <p><strong>1 Présentation du package </strong></p> <p>Présentation du package angulaire-timeline. <br></p> <p>Adresse de téléchargement : angulaire-timeline.zip</p> <p><strong>Introduire </strong></p> <p class="jb51code"><br></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'><link href="lib/angular-timeline/dist/angular-timeline.css" rel="external nofollow" rel="stylesheet"> <script src="lib/angular-timeline/dist/angular-timeline.js">Copier après la connexion dans index.html est cité dans app.js. S'il n'est pas cité, cela n'aura aucun effet. 2 Réécrire le CSSRéécrire le CSS selon les besoins, réécrire la partie principale. peut être écrit en style.css, ou vous pouvez créer un nouveau fichier css, mais il doit être cité dans index.html. /* 时间轴 */ .timeline-event { margin-bottom: 0px !important; } timeline-badge.infos { background-color: #47d09e !important; } .timeline:before { width: 1px !important; left: 24px !important; margin-top: 30px !important; background-color: #47d09e !important; } timeline-badge { left: 16px !important; width: 15px !important; height: 15px !important; top: 15px !important; box-shadow: none !important; } timeline-panel { float: left !important; width: 85% !important; padding: 13px 0px 6px 0px !important; margin-left: 39px !important; background: none !important; border: none !important; box-shadow: none !important; } timeline-panel:before { visibility: hidden !important; } timeline-panel:after { visibility: hidden !important; display: none !important; } timeline-panel .time { font-size: 14px; font-family: 'PingFangSC-Regular'; } timeline-panel .detail { display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between; margin-top: 10px; } timeline-panel .detail .linename { font-size: 16px; max-width: 80%; color: #1c1c1c; display: inline-block; font-family: 'PingFangSC-Medium'; } timeline-panel .detail .linelevel { position: absolute; right: 18%; border-radius: 4px; color: white; padding: 1px 5px 1px 5px; font-size: 11px; } timeline-panel .detail .linelevel-g { background-color: #f27373; } timeline-panel .detail .linelevel-p { background-color: #e29431; } timeline-panel .detail .linenum { float: right; font-size: 14px; color: #323232; }Copier après la connexionTrois pagesLes préparatifs sont terminés, voici les pages écrire. {{event.hour}} {{item.customerName}} {{item.reserveNumber}}人 Copier après la connexion//controller angular.module('studyApp.controllers') .controller('TimeLineCtrl', function ($scope, $rootScope, $location) { $scope.title = '时间轴'; makeData(); function makeData() { $scope.teamDataList=[ { hour:"12:00", data:[ { customerName:"中国国旅（江苏）国际旅行社有限公司", reserveNumber:"12", id:"aaaabbb12112" }, { customerName:"江苏2", reserveNumber:"122", id:"aaaabbb12112" } ] }, { hour:"13:00", data:[{ customerName:"江苏2", reserveNumber:"112", id:"aaaabbb12112" }] }, { hour:"14:00", data:[{ customerName:"江苏3", reserveNumber:"12", id:"aaaabbb12112" }] }, { hour:"13:00", data:[{ customerName:"江苏2", reserveNumber:"112", id:"aaaabbb12112" }] }, { hour:"14:00", data:[{ customerName:"江苏3", reserveNumber:"12", id:"aaaabbb12112" }] } ]; } });Copier après la connexion Quatre rendus Tutoriels associés : Utilisation de CSS3 pur pour implémenter un exemple de code de carte de focus de changement de chronologie Comment implémenter l'effet timeline en CSS3 Implémentation PHP de la fonction timeline code_PHP tutoriel
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
