JavaScript代码小技巧-解决页面多次刷新才显示样式问题-（浏览器缓存问题，js代码调入html执行顺序问题)-css样式js样式不出来的问题

于 2019-08-18 17:50:10 发布
阅读量1.8k 收藏 5
点赞数 1
分类专栏： 前端 文章标签： JavaScript html css css样式 js调入不显示
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41593124/article/details/99707211
版权

在前端开发的过程中，总是遇到这种情况，有时候写了一些样式，在用浏览器做测试的时候，样式就是死活不出来。在我手速8000的条件下时断时续的出来样式，百度了好久也没有什么具体的答复。

个人猜想：应该适合浏览器的缓存有关，或者和js代码引入得到位置有关，我一般是在<head>标签内引入的，还有一些则写在<body>底部，然而就是这样，我写的样式时断时续的出现。（苦恼。。。）

就在前几天逛贴吧的时候看到一条评论，说在公司上班的时候，写外部js调入的代码写在</body>前面。开始没怎么注意，现在遇到这样的情况，死活不出来的那种，试了一下果然有用。

自定义js文件调入位置：

<body>

<script src="自定义的js文件"></script>

</body>

下面是我样式无论怎样刷新样式都能出来的例子：

<!doctype html>
<html class="x-admin-sm" xmlns:th="http://www.thymeleaf.org">
    <head>
        <meta charset="UTF-8">
        <title>作业管理主页</title>
        <meta name="renderer" content="webkit|ie-comp|ie-stand">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <meta http-equiv="Cache-Control" content="no-siteapp" />
        <link rel="stylesheet" href="/css/font.css" th:href="@{/css/font.css}">
        <link rel="stylesheet" href="/css/xadmin.css" th:href="@{/css/xadmin.css}">
        <link rel="stylesheet" href="/lib/layui/css/layui.css" th:href="@{/lib/layui/css/layui.css}">
        <!-- <link rel="stylesheet" href="./css/theme5.css"> -->

        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
        <script>
            // 是否开启刷新记忆tab功能
            // var is_remember = false;
        </script>
    </head>
    <body class="index">
        <!-- 顶部开始 -->
        <div class="container">
            <div class="logo">
                <a href="./index.html">作业管理系统</a></div>
            <div class="left_open">
                <a><i title="展开左侧栏" class="layui-icon">&#xe668;</i> </a>

            </div>
            <ul class="layui-nav left fast-add" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;">+新增</a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd>
                            <a onclick="xadmin.open('最大化','http://www.baidu.com','','',true)">
                                <i class="layui-icon">&#xe65b;</i>弹出最大化</a></dd>
                        <dd>
                            <a onclick="xadmin.open('弹出自动宽高','http://www.baidu.com')">
                                <i class="layui-icon">&#xe65a;</i>弹出自动宽高</a></dd>
                        <dd>
                            <a onclick="xadmin.open('弹出指定宽高','http://www.baidu.com',500,300)">
                                <i class="layui-icon">&#xe602;</i>弹出指定宽高</a></dd>
                        <dd>
                            <a onclick="xadmin.add_tab('在tab打开','member-list.html')">
                                <i class="layui-icon">&#xe642;</i>在tab打开</a></dd>
                        <dd>
                            <a onclick="xadmin.add_tab('在tab打开刷新','member-del.html',true)">
                                <i class="layui-icon">&#xe638;</i>在tab打开刷新</a></dd>
                    </dl>
                </li>
            </ul>
            <ul class="layui-nav right" lay-filter="">
                <li class="layui-nav-item">
                    <a href="javascript:;" id="judge"><i class="layui-icon"  style="font-size:20px;">&#xe611;</i>消息</a>
                    <dl class="layui-nav-child" id="messageBox">
                        <!--&lt;!&ndash; 二级菜单 &ndash;&gt;-->
                        <!--<dd>-->
                            <!--<a onclick="xadmin.open('个人信息','http://www.baidu.com')">个人信息</a></dd>-->
                        <!--<dd>-->
                            <!--<a onclick="xadmin.open('切换帐号','http://www.baidu.com')">切换帐号</a></dd>-->
                        <!--<dd>-->
                            <!--<a href="./login.html">退出</a></dd>-->
                    </dl>
                </li>
                <li class="layui-nav-item">
                    <a href="javascript:;" th:text="${session.user.name}"></a>
                    <dl class="layui-nav-child">
                        <!-- 二级菜单 -->
                        <dd>
                            <a onclick="xadmin.open('个人信息','http://www.baidu.com')">个人信息</a></dd>
                        <dd>
                            <a onclick="xadmin.open('切换帐号','http://www.baidu.com')">切换帐号</a></dd>
                        <dd>
                            <a href="./login.html">退出</a></dd>
                    </dl>
                </li>
                <li class="layui-nav-item to-index">
                    <a href="javascript:void(0);">回到主页</a></li>
            </ul>
        </div>
        <!-- 顶部结束 -->
        <!-- 中部开始 -->
        <!-- 左侧菜单开始 -->
        <div class="left-nav">
            <div id="side-nav">
                <ul id="nav">
                    <li>
                        <a href="javascript:;">
                            <i class="layui-icon left-nav-li" lay-tips="作业管理">&#xe705;</i>
                            <cite>作业管理</cite>
                            &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;
                            <i class="layui-icon ">&#xe603;</i></a>
                        <ul class="sub-menu">
                            <li>
                                <a onclick="xadmin.add_tab('发布作业','publishomework')">
                                    <i class="layui-icon">&#xe602;</i>
                                    <cite>发布作业</cite></a>
                            </li>
                            <li>
                                <a onclick="xadmin.add_tab('修改作业','edithomeworkwork')">
                                    <i class="layui-icon">&#xe602;</i>
                                    <cite>修改作业</cite></a>
                            </li>
                            <li>
                                <a onclick="xadmin.add_tab('批改作业','checkhomeworkwork',true)">
                                    <i class="layui-icon">&#xe602;</i>
                                    <cite>批改作业</cite></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="layui-icon left-nav-li" lay-tips="教师通知管理模块">&#xe609;</i>
                            <cite>教师通知管理模块</cite>
                            &nbsp;&nbsp; &nbsp;&nbsp;
                            <i class="layui-icon ">&#xe603;</i></a>
                            <ul class="sub-menu">
                            <li>
                                <a onclick="xadmin.add_tab('发布通知','order-list.html')">
                                    <i class="layui-icon">&#xe602;</i>
                                    <cite>发布通知</cite></a>
                            </li>
                            <li>
                                <a onclick="xadmin.add_tab('查看通知','order-list1.html')">
                                    <i class="layui-icon">&#xe602;</i>
                                    <cite>查看通知</cite></a>
                            </li>
                        </ul>
                    </li>
                    <li>
                        <a href="javascript:;">
                            <i class="layui-icon left-nav-li" lay-tips="学生通知管理模块">&#xe613;</i>
                            <cite>学生通知管理模块</cite>
                            &nbsp;&nbsp; &nbsp;&nbsp;
                            <i class="layui-icon ">&#xe603;</i></a>
                        <ul class="sub-menu">
                            <li>
                                <a onclick="xadmin.add_tab('查看消息','studentReceiveMessages')">
                                    <i class="layui-icon">&#xe602;</i>
                                    <cite>查看消息</cite></a>
                            </li>
                            <li>
                                <a onclick="xadmin.add_tab('查看作业','StudentReceiveHomeworks')">
                                    <i class="layui-icon">&#xe602;</i>
                                    <cite>查看作业</cite></a>
                            </li>
                        </ul>
                    </li>

                </ul>
            </div>
        </div>
        <!-- <div class="x-slide_left"></div> -->
        <!-- 左侧菜单结束 -->
        <!-- 右侧主体开始 -->
        <div class="page-content">
            <div class="layui-tab tab" lay-filter="xbs_tab" lay-allowclose="false">
                <ul class="layui-tab-title">
                    <li class="home">
                        <i class="layui-icon">&#xe68e;</i>我的桌面</li></ul>
                <div class="layui-unselect layui-form-select layui-form-selected" id="tab_right">
                    <dl>
                        <dd data-type="this">关闭当前</dd>
                        <dd data-type="other">关闭其它</dd>
                        <dd data-type="all">关闭全部</dd></dl>
                </div>
                <div class="layui-tab-content">
                    <div class="layui-tab-item layui-show">
                        <iframe src='/welcome' frameborder="0" scrolling="yes" class="x-iframe"></iframe>
                        <!--<iframe th:src='@{/welcome.html}' frameborder="0" scrolling="yes" class="x-iframe"></iframe>-->
                    </div>
                </div>
                <div id="tab_show"></div>
            </div>
        </div>
        <div class="page-content-bg"></div>
        <style id="theme_style"></style>
    <script src="/my_js/mywebscoket.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8" th:src="@{/lib/layui/layui.js}"></script>
    <script type="text/javascript" src="/js/xadmin.js" th:src="@{/js/xadmin.js}"></script>
    <script th:src="@{/webjars/jquery/jquery.min.js}"  type="text/javascript"></script>
    <script th:src="@{/webjars/sockjs-client/sockjs.min.js}"  type="text/javascript"></script>
    <script th:src="@{/webjars/jquery/jquery.min.js}"  type="text/javascript"></script>
    <script th:src="@{/webjars/stomp-websocket/stomp.min.js}"  type="text/javascript"></script>
    <script>
        window.onload=function () {
            /*
            *
            * 进行用户角色的判断
            *
            * */
            // 注意：导航 依赖 element 模块，否则无法进行功能性操作
            layui.use('element', function(){
                var element = layui.element;
            });
            var state='[[${session.user.photo}]]'; // --获取session中的值
            var id='[[${session.user.id}]]';
            if (state.length>3)// 学生连接
            {
                studentconnect(id);
            }
            else {// 教师连接
                teacherconnect(id);
            }
        }

        /*
          *
          *
          * 自定义定时器 为存在消息的图标添加样式
          *
          *
          * */
        layui.use(['layer','jquery'],function(){
            var $ = layui.$;
            function check(){
                if ($("#messageBox").children().length>0)
                {
                    // 有新消息
                    var info='<i class="layui-icon"  style="font-size:25px;color:red;">&#xe611;</i><font style="color:red;">'+$("#messageBox").children().length+'</font>新消息';
                    $("#judge").html(info);
                }
                else{
                    // 无新消息
                    var info='<i class="layui-icon"  style="font-size:20px;">&#xe611;</i>消息';
                    $("#judge").html(info);
                    // console.log("replypoint无消息");
                }
            }
            window.setInterval(check, 1000);

        });
    </script>
    </body>
</html>

 

阿联爱学习
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

阿联爱学习

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值