HTML---bootstrap响应式的点赞界面

最新推荐文章于 2023-08-26 14:33:32 发布

maidu_xbd

最新推荐文章于 2023-08-26 14:33:32 发布

阅读量2.6k

点赞数 4

分类专栏： HTML 文章标签：点赞

本文链接：https://blog.csdn.net/maidu_xbd/article/details/91857131

版权

HTML 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

【效果图】响应式的点赞页面如下图所示

html部分代码

 <link rel="stylesheet" href="css/main2.css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
        integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<body>
    <div class="container">
        <div class="header">
            <input type="text" class="form-control" id="myInput" placeholder="请输入编号或标题">
        </div>
        <div class="sperate-line"></div>
    </div>
    <div class="container">
        <div class="content">
            <h3 class="content-title">2019年XXXXXXX评选活动</h3>
            <div class="row" id="row">

                <!-- 此处动态的添加图片展示区 -->

            </div>
        </div>
    </div>
    </div>
</body>

通过js动态的添加点赞项，实现代码如下：

<script type="text/javascript">
        window.onload = function () {
            // 动态的添加content 
            addContent();
            // 点赞
            // doLike();

            // 动态的添加content
            function addContent() {
                var address = ["广东省深圳市", "湖北省武汉市", "江西省南昌市", "福建省厦门市", "湖北省武汉市", "广东省深圳市", "湖北省武汉市", "江西省南昌市", "福建省厦门市", "湖北省武汉市",]
                for (var i = 0; i < 10; i++) {
                    // 获取节点class="row"
                    var row = document.getElementsByClassName("row")[0];
                    // 创建div元素节点，并设置其class="col-xs-6"
                    var contentDiv = document.createElement('div');
                    contentDiv.className = "col-xs-6 col-md-3 col-sm-6";
                    // 创建img节点,设置其src及class
                    var contentImg = document.createElement("img");
                    contentImg.src = "../images/" + (i + 1) + ".jpg";
                    contentImg.className = "img";
                    // 1.创建title
                    // 创建div元素节点，设置class
                    var titleDiv = document.createElement("div");
                    titleDiv.className = "title";
                    // 1.1创建title-left，设置class
                    var titleLeftDiv = document.createElement("div");
                    titleLeftDiv.className = "title-left";
                    // 创建p元素节点，设置文本内容，textContent
                    var p1 = document.createElement("p");
                    p1.textContent = "编号:" + (i + 1);
                    // 创建p元素节点，设置文本内容，textContent，class
                    var p2 = document.createElement("p");
                    var textP2 = document.createTextNode(address[i]);
                    p2.appendChild(textP2);
                    p2.className = "title-left-address";
                    // 添加子节点
                    titleLeftDiv.appendChild(p1);
                    titleLeftDiv.appendChild(p2);

                    // 1.2 创建title-right
                    var titleRightDiv = document.createElement("div");
                    titleRightDiv.className = "title-right";
                    var titleRightImg = document.createElement("img");
                    titleRightImg.src = "../images/like1.png";
                    titleRightImg.className = "title-right-like";
                    var p3 = document.createElement("p");
                    p3.textContent = randomNum(1, 20);
                    p3.className = "title-right-numLike";
                    titleRightDiv.appendChild(titleRightImg);
                    titleRightDiv.appendChild(p3);
                    // 点赞功能
                    titleRightImg.onclick = function () {
                        this.src = "../images/like3.png";
                       // 将点赞图片下方的p节点的文本值加1，通过nextSibling关联当前的点赞位置
                        this.nextSibling.textContent = parseInt(this.nextSibling.textContent) + 1;
                    }
                    // 为titleDiv添加子节点
                    titleDiv.appendChild(titleLeftDiv);
                    titleDiv.appendChild(titleRightDiv);
                    contentDiv.appendChild(contentImg);
                    contentDiv.appendChild(titleDiv)
                    row.appendChild(contentDiv);
                }
            }
            // function doLike() {
            //     var imgLike = document.getElementsByClassName("title-right-like");
            //     for (var i = 0; i < imgLike.length; i++) {
            //         imgLike[i].onclick = function () {
            //             //注意涉及到这个对象不能使用imgLike[i],要用this代替
            //             this.src = "../images/like3.png";
            //             // 将点赞图片下方的p节点的文本值加1，通过nextSibling关联当前的点赞位置
            //             this.nextSibling.textContent = parseInt(this.nextSibling.textContent) + 1;
            //         };
            //     }
            // }
            // 删除节点
            function deleteContent() {
                var row = document.getElementById("row");
                var childs = row.childNodes;
                for (var i = childs.length - 1; i >= 0; i--) {
                    row.removeChild(childs[i]);
                }
            }

            searchImg();
            // }
            function searchImg() {
                var myInput = document.getElementById("myInput");
                // 为输入框添加onchange事件
                myInput.onchange = function () {

                    deleteContent();
                    console.log(myInput.value)
                    //    搜索功能未写完，待完善
                }
                // myInput.addEventListener(e){ }
            }

            //生成从minNum到maxNum的随机数
            function randomNum(minNum, maxNum) {
                switch (arguments.length) {
                    case 1:
                        return parseInt(Math.random() * minNum + 1, 10);
                        break;
                    case 2:
                        return parseInt(Math.random() * (maxNum - minNum + 1) + minNum, 10);
                        break;
                    default:
                        return 0;
                        break;
                }
            }

        }

    </script>

css样式代码如下：

body{
    background: #ccc;
    padding: 5px;
}
/* header开始 */
.header{
    margin-top: 10px;
    background: #fad8dd;
    height: 56px;
    padding:10px;
}
.sperate-line{
    margin-top: 20px;
    border: 1;
    border-top: 1px solid rgb(182, 176, 176);
}
/* header结束 */
/* content开始 */
.content-title{
    border-left: 6px solid #f61738;
    text-indent: 10px;
    font-size: 16px;
    font-weight: bold;
    overflow:hidden;
    position: relative;
}
.img{
    max-width: 100%;
    max-height: 100%;
    border-radius:10px; 
    margin: 5px 0px;  
    object-fit: cover;
    text-align: center;
    
}
.title{
    padding:5px 5px;
}
.title-left{
    float:left;
    padding-right: 10px;
    border-right: 1px solid #d8d2d2;
    line-height: 11px;
}
.title-left-address{
    font-size: 13px;
    color: #988f8f;
}
.title-right{
    float: right;
    /* margin-right: 15px; */
}
.title-right-like{
	width: 22px;
}
.title-right-numLike{
margin-left: 10px;
}

后来.....知道了用museUI有自带的写好的布局，直接copy改改就可以 https://muse-ui.org/#/zh-CN/grid-list

效果如图：

maidu_xbd

关注

4
点赞
踩
10

收藏

觉得还不错? 一键收藏
2
评论
HTML---bootstrap响应式的点赞界面

【效果图】响应式的点赞页面如下图所示html部分代码 <link rel="stylesheet" href="css/main2.css"> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" ...
复制链接

扫一扫