HTML+js实现下一章小说文本字体大小与上一章文本字体大小一致

将fontSize参数加入到get请求中,在controller控制层使用model设置数据,然后再传回来

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" xmlns="http://www.w3.org/1999/html" lang="">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <meta name="copyright" content=""/>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="shortcut icon" href="https://static.zongheng.com/favicon.ico" />
    <title>[[${title}]]</title>

    <link rel="stylesheet" type="text/css" th:href="@{/css/basic.min.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/css/reader.min.css}"/>

    <link rel="stylesheet" type="text/css" th:href="@{/layui/css/layui.css}"/>

    <script type="text/javascript" th:src="@{/layui/layui.js}"></script>

    <script type="text/javascript" th:src="@{/js/jquery-1.9.1.js}"></script>
</head>
<body class="rb_1">
<div class="head-fixed-reader head-simple">
    <div class="wrap">
        <div class="head-top clearfix">
            <div class="logo imgbox fl">
                <a th:href="@{/index}"><img th:src="@{/picture/logo.png}" alt="logo" /></a>
            </div>
            <form id="commSearch" name="searchForm" method="get" th:action="@{/search}" target="_blank">
                <div class="search-box fl" data-hook="searchSuggest">
                    <label>
                        <input class="search-text fl" name="fictionName" type="text"
                               placeholder="请输入书名"/>
                    </label>
                    <input type="submit" class="search-btn fr"/>
                </div>
            </form>
            <div class="right-wrap-login ud_userTox" style="right: 0">
                <div class="unlogin ud_unlogin clearfix">
                    <div th:if="${session.username==null}" class="login fl"><a class="user_login layui-icon" th:href="@{/login}">&#xe66f;登录</a></div>
                    <div th:if="${session.username==null}" class="regist fl"><a class="user_register layui-icon" th:href="@{/signin}">&#xe672;注册</a></div>
                    <div th:if="${session.username!=null}" class="shelf">
                        <a th:href="@{/shelf}" class="layui-icon" target="_blank">&#xe705;书架</a>
                        <a style="padding-left: 18px;" class="layui-icon" th:href="@{/logout}">&#x1006;注销</a></div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- 大包 -->
<div class="readerPageWrap">
    <div class="h20-blank"></div>
    <!-- 推广层 -->
    <div class="goodgame">
        <a href="" target="_blank"></a>
    </div>
    <!-- 主内容 -->
    <div class="rw_3" id="reader_warp">
        <!-- 1.	阅读器头部推荐位 -->
        <div class="com-recbox"></div>
        <!-- 阅读页start -->
        <!-- 包裹层 -->
        <div  class="rft_1">
            <!-- 内容主盒 -->
            <div class="reader_box"  >
                <div class="marker " ></div>
                <div class="title">
                    <div class="iconbox">
                        <em class=""></em>
                    </div>
                    <div th:text="${chapter.chapterTitle}" class="title_txtbox"></div>
                </div>
                <div class="bookinfo">
                    更新时间:<span  th:text="${#dates.format(chapter.createDate, 'yyyy-MM-dd HH:mm')}"></span>
                    <a th:href="'/fiction/chapter/list/'+${chapter.fictionId}" class="reader_lnkbtn" >目录</a>

                </div>
                <div>
                    <button class="reader_box" id="switcher-small">减小字体</button>
                    <button class="reader_box" style="float:right " id="switcher-bigger">增大字体</button>
                </div>

                <div class="reader_line"></div>
                <div class="content" itemprop="acticleBody">
                    <p   class="content" th:utext="${content.content}"></p>
                </div>
                <!-- 订阅盒 -->

                <!-- 作者的话 -->

                <!-- 捧场按钮 -->

                <!-- 操作区 -->
                <div class="chap_btnbox">
                    <a  th:href="'/fiction/chapter/list/'+${chapter.fictionId}">目录</a>

                
                    <a onclick="preC()" href="javascript:void(0)">上一章</a>
                    <a onclick="nextC()" href="javascript:void(0)" class="nextchapter">下一章</a>
                </div>
                <input id="fiction_id" type="hidden" th:value="${chapter.fictionId}"/>
                <input id="sort" type="hidden" th:value="${chapter.sort}"/>
                <input id="fontSize" type="hidden" th:value="${fontSize}"/>
                <div class="ctrl_tips">
                    按“键盘左键←”返回上一章&nbsp;&nbsp;&nbsp;按“键盘右键→”进入下一章&nbsp;&nbsp;&nbsp;按“空格键”向下滚动
                </div>
            </div>
            <!-- /内容主盒 -->
        </div>
        <!-- /包裹层 -->
    </div>
    <!-- 控制手柄 -->
    <div class="h20-blank"></div>
    <!-- /大包 -->
</div>
<script>
    document.onkeydown=function(e){
        let fiction_id=$("#fiction_id").val();
        let sort=$("#sort").val();
        var $biger = $('div.content');
        var num = parseFloat($biger.css('fontSize'));
        e=window.event||e;
        switch(e.keyCode){
            case 37: //左键
                window.location.href = "/fiction/chapter/netRead/"+fiction_id+"/"+sort+"/1"+"?fontSize="+num;
                break;
            case 39: //右键
                window.location.href = "/fiction/chapter/netRead/"+fiction_id+"/"+sort+"/2"+"?fontSize="+num;
                break;
            default:
                break;
        }
    }

    function preC() {
        let fiction_id=$("#fiction_id").val();
        let sort=$("#sort").val();
        var $biger = $('div.content');
        var num = parseFloat($biger.css('fontSize'));
        window.location.href = "/fiction/chapter/netRead/"+fiction_id+"/"+sort+"/1"+"?fontSize="+num;
    }
    function nextC() {
        let fiction_id=$("#fiction_id").val();
        let sort=$("#sort").val();
        var $biger = $('div.content');
        var num = parseFloat($biger.css('fontSize'));
        window.location.href = "/fiction/chapter/netRead/"+fiction_id+"/"+sort+"/2"+"?fontSize="+num;
    }

</script>
<script type="text/javascript" th:src="@{/js/jquery.min.js}"></script>
<script>
    window.onload = function() {
        var $dddd = $('div.content');
        var fontSize = $('#fontSize').val();
        if (fontSize != null) {
            $dddd.css('fontSize',fontSize+'px');
        }
    };
    $(document).ready(function() {
//字体的放大缩小
        var $biger = $('div.content');
        var num = parseFloat($biger.css('fontSize'));
        $('#switcher-bigger').click(function(){
            num = num + 1;
            $biger.css('fontSize',num+'px');
        });
        $('#switcher-small').click(function(){
            num = num - 1;
            $biger.css('fontSize',num+'px');
        });
    });
</script>
</body>
</html>

  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
### 回答1: 以下是使用 JavaScript 实现显示没有下划线字体大小为 30、文本居中、背景颜色为黑色、链接为百度的超链接的代码: ```javascript document.write("<p style='text-decoration:none; font-size:30px; text-align:center; background-color:black;'>"); document.write("<a href='https://www.baidu.com' style='color:white;'>百度</a>"); document.write("</p>"); ``` 这段代码会在网页上显示一个带有黑色背景、没有下划线、字体大小为 30 的居中文本,并且文本内容为“百度”,点击这段文本将会跳转到百度网站。 ### 回答2: 可以使用以下方式使用JS实现显示没有下划线字体大小为30、文本居中、背景颜色为黑色,同时链接为百度的超链接: ```html <!DOCTYPE html> <html> <head> <title>使用JS实现样式</title> <script> window.onload = function() { var textElement = document.createElement("div"); // 创建一个div元素 textElement.innerHTML = "<a href='https://www.baidu.com' style='text-decoration:none; color:inherit;'>百度</a>"; // 设置div内的内容为超链接 textElement.style.textDecoration = "none"; // 去除下划线 textElement.style.fontSize = "30px"; // 设置字体大小为30 textElement.style.textAlign = "center"; // 设置文本居中 textElement.style.backgroundColor = "black"; // 设置背景颜色为黑色 document.body.appendChild(textElement); // 将div元素追加到文档体中 }; </script> </head> <body> </body> </html> ``` 以上代码通过使用JS在页面加载完成后动态创建一个div元素,并设置相关样式,最后将该div元素追加到body中。其中超链接的href属性被设置为百度的网址,样式属性text-decoration设置为none去除下划线,color设置为inherit以保持默认颜色。 ### 回答3: 你可以使用JavaScript来实现以下效果: ```html <!DOCTYPE html> <html> <head> <style> /* 样式表设置 */ .no-underline { text-decoration: none; /* 去除下划线 */ font-size: 30px; /* 字体大小为30 */ text-align: center; /* 文本居中 */ background-color: black; /* 背景颜色为黑色 */ color: white; /* 文本颜色为白色 */ } </style> </head> <body> <a href="https://www.baidu.com" class="no-underline">百度</a> <script> // JS代码 var link = document.querySelector("a"); // 获取超链接元素 // 设置超链接的样式 link.style.textDecoration = "none"; link.style.fontSize = "30px"; link.style.textAlign = "center"; link.style.backgroundColor = "black"; link.style.color = "white"; </script> </body> </html> ``` 以上代码将创建一个超链接到百度,但没有下划线,字体大小为30,文本居中,背景颜色为黑色,并且链接的文本颜色为白色。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值