招标专家随机抽选——设计讲解—未来之窗智能编程——仙盟创梦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;//5
                if (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>