layui投票功能详细代码

以下是一个基于layui的投票功能的详细代码示例：

HTML代码：

<div class="layui-row">
  <div class="layui-col-md8">
    <div class="vote-info">
      <h2>你喜欢哪一种水果？</h2>
      <ul>
        <li>
          <div class="vote-option">
            <input type="radio" name="fruit" value="apple" title="苹果">
            <div class="vote-count" data-count="20" style="width: 20%;"></div>
          </div>
        </li>
        <li>
          <div class="vote-option">
            <input type="radio" name="fruit" value="banana" title="香蕉">
            <div class="vote-count" data-count="30" style="width: 30%;"></div>
          </div>
        </li>
        <li>
          <div class="vote-option">
            <input type="radio" name="fruit" value="orange" title="橘子">
            <div class="vote-count" data-count="50" style="width: 50%;"></div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</div>

CSS代码：

.vote-info {
  background-color: #f5f5f5;
  padding: 20px;
}

.vote-option {
  position: relative;
  margin-bottom: 10px;
}

.vote-count {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  background-color: #5FB878;
  color: #fff;
  text-align: center;
  line-height: 28px;
  font-size: 14px;
}

JavaScript代码：

// 监听投票选项的变化
form.on('radio(fruit)', function(data) {
  var $option = $(data.elem).closest('.vote-option');
  var count = parseInt($option.find('.vote-count').data('count')) + 1; // 投票数加1
  $option.find('.vote-count').data('count', count).css('width', count + '%').text(count); // 更新投票数和进度条
  layer.msg('谢谢您的投票！');
});

需要在HTML文件头部引入layui的CSS和JavaScript文件：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/css/layui.css">
<script src="https://cdn.jsdelivr.net/npm/layui@2.5.7/dist/layui.all.js"></script>

以上代码实现了一个简单的投票功能，当用户点击选项时，投票数会自动加1，并且会弹出提示框。在实际应用中，需要将投票结果保存到数据库中，并且需要增加对重复投票、刷票等行为的防范措施。