当前位置：首页 > news >正文

地方门户网站盈利营销方案怎么写?

news 2025/7/28 18:51:19

地方门户网站盈利,营销方案怎么写?,培训网站设计师,做网站需要多大空间Html – 文字时钟文字时钟，之前在Android上实现了相关效果，闲来无事，弄个网页版的玩玩。。。直接上代码： <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><titl…

Html – 文字时钟

文字时钟，之前在Android上实现了相关效果，闲来无事，弄个网页版的玩玩。。。

在这里插入图片描述

直接上代码：

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Text Clock</title><style type="text/css">html, body {margin: 0;padding: 0;background: black;}.root {display: flex;justify-content: center;}.container {display: block;background: black;}</style>
</head>
<body>
<div class="root"><canvas id="container" class="container"></canvas>
</div><script type="text/javascript">const HOURS = ["一点", "二点", "三点", "四点", "五点", "六点", "七点", "八点", "九点", "十点", "十一点", "十二点"];const MINUTES = ["一分", "二分", "三分", "四分", "五分", "六分", "七分", "八分", "九分", "十分","十一分", "十二分", "十三分", "十四分", "十五分", "十六分", "十七分", "十八分", "十九分", "二十分","二十一分", "二十二分", "二十三分", "二十四分", "二十五分", "二十六分", "二十七分", "二十八分", "二十九分", "三十分","三十一分", "三十二分", "三十三分", "三十四分", "三十五分", "三十六分", "三十七分", "三十八分", "三十九分", "四十分","四十一分", "四十二分", "四十三分", "四十四分", "四十五分", "四十六分", "四十七分", "四十八分", "四十九分", "五十分","五十一分", "五十二分", "五十三分", "五十四分", "五十五分", "五十六分", "五十七分", "五十八分", "五十九分", ""];const SECONDS = ["一秒", "二秒", "三秒", "四秒", "五秒", "六秒", "七秒", "八秒", "九秒", "十秒","十一秒", "十二秒", "十三秒", "十四秒", "十五秒", "十六秒", "十七秒", "十八秒", "十九秒", "二十秒","二十一秒", "二十二秒", "二十三秒", "二十四秒", "二十五秒", "二十六秒", "二十七秒", "二十八秒", "二十九秒", "三十秒","三十一秒", "三十二秒", "三十三秒", "三十四秒", "三十五秒", "三十六秒", "三十七秒", "三十八秒", "三十九秒", "四十秒","四十一秒", "四十二秒", "四十三秒", "四十四秒", "四十五秒", "四十六秒", "四十七秒", "四十八秒", "四十九秒", "五十秒","五十一秒", "五十二秒", "五十三秒", "五十四秒", "五十五秒", "五十六秒", "五十七秒", "五十八秒", "五十九秒", ""];const INTERVAL_UPDATE = 1000;//时间刷新间隔const mColorCenetr = "#ffffff";//中心字体颜色const mColorCur = "#ff0000";//选中字体颜色const mColorCom = "#bdbdbd";//基础色const mColorBg = "#000000";//背景颜色const mFont = "华文行楷";//字体var mWidth, mHeight;//宽高var mH, mM, mS;//当前的时分秒var mH24;//24制小时var mWeek, mDate, mTime;//星期，日期，时间var mRadiusH, mRadiusM, mRadiusS;//三个同心圆的半径var mDegreeH, mDegreeM, mDegreeS;//时分秒旋转角度var mTextSizeCom;//通用字体大小var mTextSizeCenter;//中间字体大小var mOffset;//中间文字行间隔var mCenterHeight;//文字纵向居中高度//var canvas;var cxt;var hd, md, sd, av;window.onload = function () {initial();}//适应屏幕大小变化window.onresize = function () {calcSize();}function initial() {canvas = document.getElementById("container");cxt = canvas.getContext("2d");calcSize();curTime();startTask();}function calcSize() {mWidth = window.innerWidth;mHeight = window.innerHeight;//确保为正方形mWidth = mHeight = Math.min(mWidth, mHeight);canvas.width = mWidth;canvas.height = mHeight;// console.log(mWidth + " - " + mHeight);//字体大小mTextSizeCom = mWidth / 50;//通用字体大小mTextSizeCenter = mWidth / 35;//中间字体大小mOffset = mTextSizeCenter / 2;//中间文字间隔mCenterHeight = (mHeight - mTextSizeCom) / 2;//各圆半径mRadiusH = mWidth / 6;mRadiusM = mRadiusH + 4 * mTextSizeCom;//3+1mRadiusS = mRadiusM + 5 * mTextSizeCom;//4+1// console.log(mRadiusH + " - " + mRadiusM + " - " + mRadiusS);}function startTask() {setInterval(function () {curTime();//内嵌一个有限循环var times = 0;var interval = setInterval(function () {if (times > 6) {clearInterval(interval);} else {doAnimation();times++;}}, 10)}, INTERVAL_UPDATE);}//自定义线性循环动画function doAnimation() {//+ -> 顺时针； - -> 逆时针av = av - 0.9;//总偏移量/次数if (mM === 0 && mS === 0) {mDegreeH = hd + av * 5;//时圈旋转角度是分秒的5倍，线性的旋转30°}if (mS === 0) {mDegreeM = md + av;//线性的旋转6°}mDegreeS = sd + av;//线性的旋转6°drawCanvas();}//刷新背景function updateBg() {cxt.fillStyle = mColorBg;cxt.fillRect(0, 0, mWidth, mHeight);}//绘制中间时间/日期/星期function drawCenterInfo() {cxt.save();cxt.fillStyle = mColorCenetr;cxt.font = mTextSizeCenter + "px " + mFont;//draw timevar len = (mTime.length -2) * mTextSizeCenter / 2;//数字大小只有文字的一半 //去掉两个符号cxt.fillText(mTime, (mWidth - len) / 2, mHeight / 2 - mTextSizeCenter * 3 / 2 - mOffset);//draw datevar len2 = (mDate.length-2) * mTextSizeCenter / 2;//去掉两个符号cxt.fillText(mDate, (mWidth - len2) / 2, mHeight / 2 - mTextSizeCenter / 2);//draw weekvar len3 = mWeek.length * mTextSizeCenter;cxt.fillText(mWeek, (mWidth - len3) / 2, mHeight / 2 + mTextSizeCenter / 2 + mOffset);cxt.restore();}function drawHour() {cxt.save();//只能旋转角度，以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeH * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//时针圈: 360/12 = 30度for (var i = 0; i < HOURS.length; i++) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(30 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i + 1 === mH || (i === 11 && mH === 0)) {//当前时cxt.fillStyle = mColorCur;} else {cxt.fillStyle = mColorCom;}cxt.font = mTextSizeCom + "px " + mFont;cxt.fillText(HOURS[i], mWidth / 2 + mRadiusH, mCenterHeight);cxt.restore();}cxt.restore();}function drawMinute() {cxt.save();//只能旋转角度，以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeM * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//分针圈: 360/60 = 6度for (var i = 0; i < MINUTES.length; i++) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(6 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i + 1 === mM) {//当前时cxt.fillStyle = mColorCur;} else {cxt.fillStyle = mColorCom;}cxt.font = mTextSizeCom + "px " + mFont;cxt.fillText(MINUTES[i], mWidth / 2 + mRadiusM, mCenterHeight);cxt.restore();}cxt.restore();}function drawSecond() {cxt.save();//只能旋转角度，以原点(0,0)cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(mDegreeS * Math.PI / 180);//* Math.PI / 180cxt.translate(-mWidth / 2, -mHeight / 2);//旋转完之后需要移回去//秒针圈: 360/60 = 6度for (var i = 0; i < MINUTES.length; i++) {cxt.save();cxt.translate(mWidth / 2, mHeight / 2);cxt.rotate(6 * i * Math.PI / 180);cxt.translate(-mWidth / 2, -mHeight / 2);if (i + 1 === mS) {//当前时cxt.fillStyle = mColorCur;} else {cxt.fillStyle = mColorCom;}cxt.font = mTextSizeCom + "px " + mFont;cxt.fillText(SECONDS[i], mWidth / 2 + mRadiusS, mCenterHeight);cxt.restore();}cxt.restore();}//刷新画布function drawCanvas() {updateBg();drawCenterInfo();drawHour();drawMinute();drawSecond();}//function curTime() {let date = new Date();let year = date.getFullYear();let month = date.getMonth() + 1;let day = date.getDate();let week = date.getDay();mH24 = date.getHours();mM = date.getMinutes();mS = date.getSeconds();mH = mH24 >= 12 ? mH24 - 12 : mH24;mTime = formatTime(mH24) + ':' + formatTime(mM) + ':' + formatTime(mS);mDate = year + '/' + formatTime(month) + '/' + formatTime(day);mWeek = parseWeek(week);calculateDegree();}function calculateDegree() {//逆时针旋转mDegreeH = -360 / 12 * (mH - 1);mDegreeM = -360 / 60 * (mM - 1);mDegreeS = -360 / 60 * (mS - 1);hd = mDegreeH;md = mDegreeM;sd = mDegreeS;av = 6;//每次动画总偏移量}function formatTime(fn) {return fn < 10 ? "0" + fn : fn;}function parseWeek(week) {var mWeek;switch (week) {case 1:mWeek = "星期一";break;case 2:mWeek = "星期二";break;case 3:mWeek = "星期三";break;case 4:mWeek = "星期四";break;case 5:mWeek = "星期五";break;case 6:mWeek = "星期六";break;case 7:mWeek = "星期日";break;}return mWeek;}
</script>
</body>
</html>