Hits! - General purpose hits counter based on Cloudflare Workers (中文说明)
Hits! A completely free, serverless, lightweight access counter system based on Cloudflare Workers and D1 SQL Database, supporting JSON and GitHub (Shields.io) style SVG images, with quick deployment in just one minute
- 🚀 Quick Deployment - Deploy in just one minute
- ☁️ Cloud Hosting - No server maintenance required
- 💰 Completely Free - Utilizes Cloudflare's free plan
- 📊 Multi-Site Support - Supports multiple counters via different keywords
- 🔒 Secure and Reliable - Powered by Cloudflare's global network
- 🎨 Colorful Display - Supports customizable color SVG and JSON output
Go to the Cloudflare Dashboard, navigate to Storage & Databases > D1 SQL Database > Create, name it hits, and run the following SQL to create the table in Console
CREATE TABLE counters ( name TEXT PRIMARY KEY, count INTEGER DEFAULT 0 );Navigate to Workers & Pages > Create application > Create Worker, name it hits. Copy the hit.js code into the Worker editor. Modify line 7 to change the domain to your counter's domain, and set the keywords in line 8. Each counter corresponds to a keyword. For subsequent counters, simply add new keywords for them.
In the Worker Settings > Bindings > Add > D1 Database, enter the variable name as HITS, and select the hits database. In Domains & Routes - Add - Custom domain, add your newly configured counter domain.
- SVG Image
https://your.domain/keyword.svg?action=view&count_bg=%233DC8C0&title_bg=%23555555&title=Visits&edge_flat=false| Parameter | Values | Description | 说明 |
|---|---|---|---|
| action | view / hit | View only or hit & view | 仅展示/点击并展示 |
| count_bg | %23{colorcode} | Background color of count area | 数字部分背景颜色 |
| title_bg | %23{colorcode} | Background color of title area | 标题部分背景颜色 |
| title | TitleToShow | Text to display | 展示标题 |
| edge_flat | true / false | Sharp or rounded corners | 尖角/圆角 |
| Shields.io Presets | Aliases | Hits! Counter Example | Shields.io Example |
|---|---|---|---|
count_bg=brightgreen |
success |
||
count_bg=green |
|||
count_bg=yellow |
|||
count_bg=yellowgreen |
|||
count_bg=orange |
important |
||
count_bg=red |
critical |
||
count_bg=blue |
informational |
||
count_bg=grey |
gray |
||
count_bg=lightgrey |
lightgray inactive |
| Custom | Black | Gray | Blue | Green | Purple | Red |
|---|---|---|---|---|---|---|
| Red | ||||||
| Orange | ||||||
| Yellow | ||||||
| Green | ||||||
| Blue | ||||||
| Purple | ||||||
| Gray |
- JSON Result
| Request | Description | 说明 |
|---|---|---|
https://your.domain/keyword?action=view |
View only | 仅展示 |
https://your.domain/keyword?action=hit |
Hit & View | 点击并展示 |
JSON Response
{
"counter": "keyword",
"action": "hit",
"total": 1024,
"daily": 32,
"date": "2025-03-31",
"timestamp": "2025-03-31T04:08:16.512Z"
}- History Chart
https://your.domain/history/keyword.svg?days=31&chartType=bar&title=Chart%20Title&width=1024&height=400&color=green| Parameter | Values | Description | 说明 |
|---|---|---|---|
| days | {days_number} | Statistical days | 统计天数 |
| chartType | bar / scatter | Chart type: bar / scaater | 图表类型:柱状图 / 散点图 |
| title | {title_text} | Chart title | 图表标题 |
| width | {width_pixels} | Chart width | 图表宽度 |
| height | {height_pixels} | Chart height | 图表高度 |
| color | %23{colorcode} | Chart color | 图表颜色 |
| Chart Type | Sample |
|---|---|
| Scatter | |
| Bar |
- Thanks to 酒神@Nodeseek for technical support and valuable feedback.
Welcome to submit Pull Request or Issue!