招标专家随机抽选——设计讲解—未来之窗智能编程——仙盟创梦IDE
招标专家系统
专家评标系统是服务于各类招标评标活动的数字化平台。它依托先进信息技术,集专家库管理、随机抽取专家、在线评标等功能于一体。系统依据项目需求设定筛选条件,从庞大专家库中精准抽取合适专家。评标时,专家可在线查阅投标文件,依据预设标准打分、评论,最终自动汇总评标结果。该系统极大提升评标效率,保障评标公平、公正、科学
颜色设计:绿色
- 色调选择:采用柔和、低饱和度的绿色,如薄荷绿、淡草绿。这类绿色接近自然,能减少视觉疲劳,像长时间身处大自然中眼睛不易疲惫。
- 对比度设置:确保界面元素,如文字与背景间有足够对比度。例如深绿色背景搭配亮绿色文字,或反之,让用户能清晰识别内容,减轻眼睛辨识负担。
- 亮度调节:提供亮度调节功能,适应不同环境光线。比如在强光下可提高亮度,弱光环境降低亮度,使眼睛始终处于舒适视觉状态
交互设计
交互代码
function 删除(item_id,name){artDialog({ content:'欢迎你来到对话框世界!',lock:true,style:'succeed noClose'},function(){alert('你点了确定');},function(){alert('你点了取消');});}
滚屏设计
<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF - 8"><meta name="viewport" content="width=device - width, initial - scale = 1.0"><style>#expertList {display: none;height: 200px;overflow-y: scroll;border: 1px solid #ccc;}#expertList table {width: 100%;border-collapse: collapse;}#expertList th,#expertList td {border: 1px solid #ccc;padding: 5px;}#expertList thead {position: sticky;top: 0;background-color: #f0f0f0;}</style><title>专家列表滚动动画</title>
</head><body><button id="startButton">开始</button><button id="stopButton">停止</button><div id="expertList"><table><thead><tr><th>姓名</th><th>所在位</th><th>联系方式</th></tr></thead><tbody id="expertBody"></tbody></table></div><script>const startButton = document.getElementById('startButton');const stopButton = document.getElementById('stopButton');const expertBody = document.getElementById('expertBody');let scrollInterval;// 生成随机姓名function generateRandomName() {const firstNames = ['张', '王', '李', '赵', '刘'];const lastNames = ['强', '敏', '刚', '芳', '军'];return firstNames[Math.floor(Math.random() * firstNames.length)] + lastNames[Math.floor(Math.random() * lastNames.length)];}// 生成随机所在位function generateRandomLocation() {const locations = ['北京', '上海', '广州', '深圳', '成都'];return locations[Math.floor(Math.random() * locations.length)];}// 生成随机联系方式function generateRandomContact() {return '1' + Math.floor(Math.random() * 9).toString() + Math.floor(Math.random() * 10000000000).toString().padStart(10, '0');}// 生成随机专家数据function generateRandomExperts(num) {const experts = [];for (let i = 0; i < num; i++) {experts.push({name: generateRandomName(),location: generateRandomLocation(),contact: generateRandomContact()});}return experts;}// 填充表格function fillTable(experts) {expertBody.innerHTML = '';experts.forEach(expert => {const row = document.createElement('tr');const nameCell = document.createElement('td');nameCell.textContent = expert.name;const locationCell = document.createElement('td');locationCell.textContent = expert.location;const contactCell = document.createElement('td');contactCell.textContent = expert.contact;row.appendChild(nameCell);row.appendChild(locationCell);row.appendChild(contactCell);expertBody.appendChild(row);});}const randomExperts = generateRandomExperts(20);fillTable(randomExperts);startButton.addEventListener('click', () => {document.getElementById('expertList').style.display = 'block';scrollInterval = setInterval(() => {const list = document.getElementById('expertList');list.scrollTop += 10;//5if (list.scrollTop >= list.scrollHeight - list.clientHeight) {list.scrollTop = 0;}// }, 50);}, 20);});stopButton.addEventListener('click', () => {clearInterval(scrollInterval);document.getElementById('expertList').style.display = 'none';});</script>
</body></html>