Core Front-End Technologies of JD Competition Ranking H5 Page

The JD Competition Ranking H5 page is a typical mobile web application that relies heavily on front‑end techniques to deliver a rich user experience. This article explores the key technologies used, offering reference and ideas for front‑end developers.

1.1 Animation

Multiple animations are added to make the page lively and improve user retention. Important elements such as the ranking progress bar, badges, menus, buttons, and dialogs are animated.

1.1.1 Progress Bar Animation

The progress bar combines two CSS animations, ProgressRise and moveScaleRight , applied simultaneously via the animation property. ProgressRise animates the width from 0% to 100% with an easing function, while moveScaleRight creates a subtle right‑side scaling effect after a 4.6 s delay, looping infinitely.

<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); }
to { transform: translate3d(0,0,0) scale3d(1.04,1,1); }
}

1.1.2 Badge Swing Animation

The ranking badge swings in sync with the progress bar using the lightMoveRight animation, which starts after a 4.6 s delay and alternates direction to create 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); }
}

1.1.3 Menu Scroll Animation

When the dropdown menu switches, a smooth scroll animation is achieved by listening to the touchmove event, calculating the current translateX value, and applying a transition-duration of 0.3 s.

<div class="menu" style="transform: translateX(257px); transition-duration: 0.3s;">
<ul><li>Menu Item 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)';
});

1.1.4 Button Transition Animation

A transition effect is added to the button that switches to a compact view, smoothing all property changes over 1 s, including background image replacement on click.

.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%;
}

1.1.5 Dialog Zoom‑In Animation

The dialog appears with a gradual zoom‑in effect, starting from 0.3 scale and 0 opacity, reaching full opacity at 50 % of the animation.

.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; }
}

1.2 Animation Compatibility

To ensure cross‑browser support, a set of Less mixins is defined for common effects such as animation, transform, rotation, scale, translate3d, and keyframes. Using these mixins improves reusability and maintainability.

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

1.3 Poster Technology

The page can automatically generate shareable posters using the lightweight Vue Canvas Poster component, which draws canvas images via CSS‑like properties (width, height, top, left, etc.). It supports images, text, rectangles, and QR codes.

import { VueCanvasPoster } from 'vue-canvas-poster'
export default { components: { VueCanvasPoster } }
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' }] },
{ type: 'rect', css: { bottom: '10px', right: '24px', width: '53px', height: '53px', color: '#fff' } },
{ type: 'qrcode', content: qrcodeSrc, css: { bottom: '14px', right: '28px', width: '44px', height: '44px', color: '#000' } }
]
};

1.4 UI Upgrade & Skin Switching

The B‑version UI introduces theme colors extracted into variables (color, font, border, layout, animation, responsive) to speed up development. Users can select skins, which are loaded via an API and applied dynamically using JavaScript.

// Example skin config
let config = { globalBg: '#3F2786', /* other assets */ };
switch (skin) { case 'red': config.globalBg = '#780605'; /* ... */ break; /* other cases */ }
return config;

1.5 Snapshot Mode

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

1.6 Price Security Upgrade

To prevent malicious scraping of price data, the price API is protected by a gateway and SDK that sign requests with a token and random secret key, blocking unauthorized crawlers.

1.7 Debugging Techniques

vConsole is integrated for mobile debugging; it activates when the URL contains vconsole=1 . Additionally, a nojump flag prevents automatic redirects during error scenarios, aiding troubleshooting.

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

const handlerResult = (resolve, reject, result, isNeedReject, url) => {
const nojump = getQueryString('nojump') === '1';
switch (result.code) {
case '103': if (nojump) { console.log('nojump mode', result); } else { window.location.href = '//www.jd.com'; } break;
case '200': resolve(result.data); break;
case '401': window.location.href = `//ssa.jd.com/sso/login?ReturnUrl=${encodeURIComponent(location.href)}`; break;
/* ... */
}
};

1.8 Request Cancellation & Polling Fallback

Ongoing requests are cancelled on beforeunload to save resources. Polling APIs retry up to three times before showing an error page, improving stability.

1.9 Local Package Split Commands

Several npm scripts are defined to start mock, test, and production environments, as well as to build for dev and prod, enabling flexible workflow.

"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"

1.10 Monitoring

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

Conclusion

The article summarizes the front‑end techniques used in the JD Competition Ranking H5 page, highlighting animation, style configuration, skin management, poster generation, security, debugging, request handling, and deployment strategies, and points to future work such as performance optimization and accessibility improvements.