Key Front-End Technologies Used in JD Competition Ranking H5 Page

H5 pages are a major form of mobile web applications, and the JD Competition Ranking H5 page demonstrates a collection of advanced front‑end techniques to improve user experience, engagement, and maintainability.

Animation

Multiple animations are added to make the page lively, including progress‑bar, badge, menu, button, and dialog animations that highlight key ranking information.

Progress Bar Animation

The progress bar combines two CSS animations— ProgressRise and moveScaleRight —using the animation property with a comma‑separated list. ProgressRise animates the width from 0% to 100% with easing, while moveScaleRight starts after a 4.6 s delay, scaling the element on the X‑axis for a right‑side elastic effect.

<div class="progress"></div>
.progress {
  z-index: 10;
  height: 7px;
  background-image: @progress-bar-color;
  border-radius: 8px;
  animation: ProgressRise 2s ease, moveScaleRight 2s 4.6s alternate ease-out infinite;
  transform-origin: left center;
}
@keyframes ProgressRise {
  0% { width: 0; }
  100% { width: 100%; }
}
@keyframes moveScaleRight {
  from { transform: translate3d(0,0,0) scale3d(1,1,1) skewX(0deg); }
  to   { transform: translate3d(0,0,0) scale3d(1.04,1,1) skewX(0deg); }
}

Badge Swing Animation

The ranking badge swings in sync with the progress bar. After a 4.6 s delay, an infinite alternating X‑axis translation creates a swinging effect.

<div class="light-theme-0"></div>
.light-theme-0 {
  position: absolute;
  top: -6px;
  right: -34px;
  width: 22px;
  height: 22px;
  background: url('~@/assets/images/bcmixin/1.png') no-repeat center center;
  background-size: 100% 100%;
  animation: lightMoveRight 2s ease-out 4.6s alternate infinite;
  transform-origin: left center;
}
@keyframes lightMoveRight {
  from { transform: translateX(0px); }
  to   { transform: translateX(-8px); }
}

Menu Scroll Animation

When the dropdown menu switches, a touch‑move listener captures the current transform value, calculates the new X‑offset, and applies a 0.3 s transition for smooth scrolling.

<div class="menu" style="transform: translateX(257px); transition-duration: 0.3s;">
  <ul><li>菜单项1</li>...</ul>
</div>

document.querySelector('.menu').addEventListener('touchmove', function () {
  var transformValue = window.getComputedStyle(menu).getPropertyValue('transform');
  var translateXValue = parseInt(transformValue.split(',')[4]);
  var scrollDistance = 100;
  menu.style.transform = 'translateX(' + (translateXValue + scrollDistance) + 'px)';
});

Button Transition

A 1 s transition is added to buttons so that all CSS properties, including background images, change smoothly when the compact view is toggled.

.bc-controll-zoom-wrap {
  position: fixed;
  bottom: 30px;
  right: 0;
  width: 83px;
  height: 54px;
  background: url('../../assets/images/float_btn_2023_618.png');
  background-size: 100% 100%;
  z-index: 1999;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 1s;
}
.bc-controll-zoom-wrap-deep {
  background: url('../../assets/images/float_btn_deep_2023_618.png');
  background-size: 100% 100%;
}

Dialog Zoom‑In Animation

The dialog uses a zoomIn keyframe that starts with 0 opacity and a 0.3 scale, then becomes fully opaque at 50 % while keeping the reduced size.

.zoomIn-enter-active { animation: zoomIn 0.3s; }
@keyframes zoomIn {
  0% { opacity: 0; -webkit-transform: scale3d(0.3,0.3,0.3); transform: scale3d(0.3,0.3,0.3); }
  50% { opacity: 1; }
}

Animation Compatibility (Mixin)

Reusable Less mixins are defined for animation, transform, rotation, scale, translate3d, and keyframes to improve cross‑browser compatibility and maintainability.

.animation(@animation) { -webkit-animation:@animation; -moz-animation:@animation; -o-animation:@animation; animation:@animation; }

Poster Generation (Vue‑Canvas‑Poster)

The page automatically generates shareable posters using the lightweight VueCanvasPoster component, which mimics CSS positioning to draw images, text, rectangles, and QR codes on a canvas.

import { VueCanvasPoster } from 'vue-canvas-poster';
// configuration example
this.painting = {
  width: '334px',
  height: '600px',
  background: backgroundImage,
  views: [
    { type: 'image', url: subTitleBackgroundImage, css: { top: '125px', left: '16px', width: '297px', height: '70px' } },
    { type: 'text', text: currTitle, css: [{ left: '23px', top: '140px', fontFamily: 'PingFangSC-Semibold', fontSize: currTitleFontSize, color: textColor, width: '290px', height: '33px', textAlign: 'center' }] },
    // ... other elements like rect and qrcode
  ]
};

Skin Switching

Users can select different skins, which are loaded via a backend configuration file. The selected skin changes colors, images, and layout variables, improving personalization and maintainability.

let getConfigBySkin = (skin) => {
  let config = { globalBg:'#3F2786', /* other defaults */ };
  switch (skin) {
    case 'red':   config.globalBg = '#780605'; config.number = 'skin_red'; break;
    case 'blue':  /* ... */ break;
    case 'golden':/* ... */ break;
  }
  return config;
};

Snapshot Mode

A snapshot mode records a unique timestamp (SnapshotId) with historical data, appends it to the URL for sharing, and restores the view on page load.

Price‑Security Upgrade

To protect price data from malicious crawlers, the front‑end signs requests with a token and random key algorithm before sending them to the backend for verification.

Debugging Tools

vConsole is integrated to provide a lightweight console on mobile devices when the URL contains vconsole=1 , facilitating log inspection and performance analysis.

import VConsole from 'vconsole';
if (location.href.indexOf('vconsole') !== -1) {
  import('vconsole').then(({ default: VConsole }) => { new VConsole(); });
}

No‑Jump Parameter

Adding nojump=1 to the URL disables automatic redirects on error pages, allowing developers to view exception details directly.

const nojump = getQueryString('nojump') === '1';
if (result.code === '103') {
  if (nojump) { console.log('nojump mode', ...); } else { window.location.href = '//www.jd.com'; }
}

Cancel Ongoing Requests

When the page unloads, stored Axios request tokens are cancelled to avoid wasted bandwidth and potential errors.

Polling Fallback (3‑Times)

Real‑time polling is performed every second; only after three consecutive failures does the page navigate to an error fallback, improving stability.

Local Package Split Commands

Several npm scripts are added to switch environments, start mock servers, and build for dev or production.

"start:dev": "node script/switch_env_server.js dev && cross-env BUILD_ENV=dev vue-cli-service serve --open",
"start:prod": "node script/switch_env_server.js prod && cross-env BUILD_ENV=prod vue-cli-service serve --open",
"start:mock": "node script/switch_env_server.js local && cross-env MOCK=true vue-cli-service serve --open",
"build:dev": "node script/switch_env_build.js dev && cross-env BUILD_ENV=dev npm run oss",
"build:prod": "node script/switch_env_build.js prod && cross-env BUILD_ENV=prod npm run oss"

Monitoring (UMP)

An uptime monitor checks the page every minute; if three consecutive non‑200/301/302 responses occur, alerts are sent via internal chat and email.

Conclusion

The article summarizes the core front‑end technologies of the JD Competition Ranking H5 page, highlighting animation, style configuration, skin management, poster generation, debugging, security, and deployment practices, and points to future improvements such as loading speed, layout optimization, and accessibility.