V2.0.1
正面模板
<div class="word_entries_container" onload="info_load()">
<div style="margin:5px;">
<p class="word_name">{{正面}}　</p>
<hr>
<div id="blur" style="margin-top:5px">
<h6 style="text-align:left;margin-left:25px">读音:{{读音}}</h6>
<h6 style="text-align:left;margin-left:25px">释义</h6>
<p class="word_defination">{{解释}}</p>
<div>
<div style="height:10px;"></div>
</div>
</div>
<p style="font-size:11px;position:absolute;right:15px;color:lightgray">version:2.0.1(2022-3-3)</p>
背面模板
<script language="javascript" type="text/javascript">
function autoPlay() {
var myAuto = document.getElementById('myaudio');
myAuto.play();
}
try {
info_load()
} catch (err) {
}
</script>
<script language="javascript" type="text/javascript">
var rooturl = "https://www.medforest.cn"
var url = "https://www.medforest.cn/medf/api.php"
function main() {
$("#getcomments").attr('style', 'display:none')
var rootComment = {}
var wordName = $("#wordName").text()
getPageinfo(url, wordName)
}
</script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
main()//执行函数
autoPlay()
});
function add0(m) {
return m < 10 ? '0' + m : m
}
function timestamp(shijianchuo) {
//shijianchuo是整数，否则要parseInt转换
var time = new Date(shijianchuo);
var y = time.getFullYear();
var m = time.getMonth() + 1;
var d = time.getDate();
var h = time.getHours();
var mm = time.getMinutes();
var s = time.getSeconds();
return y + '年' + add0(m) + '月' + add0(d) + '日 ' + add0(h) + ':' + add0(mm) + ':' + add0(s);
}
function getComments(url, pageID,wordName) {
var isSuccess = [false, 0]
console.log(pageID)
var PARAMS = {
'action': 'flowthread',
'format': 'json',
'type': 'list',
'pageid': pageID,
'offset': '0',
'utf8': '1',
"origin": '*',
}
$.ajax({
async: true,
type: "post",
url: url,
data: PARAMS,
datatype: 'json',
success: function (datas) {
console.log(datas)
isSuccess = [true, datas.flowthread.posts]
var comments = isSuccess[1]
if (comments.length == 0) {
$('#messages').html("<font size=3px>本页暂无评论，欢迎至页面： <a href='" + rooturl + "/dic/" + wordName + "'>" + wordName + "</a> 分享你的记忆方法<font>")
} else {
for (var i = 0; i < comments.length; i++) {
var singleComment = comments[i]
var parentID = singleComment.parentid
if (parentID == "") {
createThread(singleComment, "")
} else {
createThread(singleComment, parentID)
}
}
}
}
});
return isSuccess
}
function getPageinfo(url, title, prop) {
// title = "专业英语单词:Cerumen"
console.log("-----函数 get_pageinfo 正在工作-----"+title)
var data
var PARAMS = {
"action": "query",
"format": "json",
"prop": "info",
"titles": title,
"utf8": 1,
"origin": '*',
}
$.ajax({
async: true,
type: "post",
url: url,
data: PARAMS,
datatype: 'json',
success: function (datas) {
data = datas.query.pages
console.log("-----函数 get_pageinfo 获取成功-----")
for (var keys in data) {
var pageID = keys
}
if (pageID == '-1') {
$('#messages').html("<font size=3px>没有此页面<font>")
} else {
var comments = getComments(url, pageID,title)
}
},
error:function (data, status, e){
alert(data.readyState);
}
});
}
function createThread(dataset, parent) {
var divID = 'comment-' + dataset.id
var thread = $('<div></div>')
thread.attr('id', divID)
thread.addClass("comment-thread")
var post = $('<div></div>')
post.addClass('comment-post')
var avatar = $('<div></div>')
avatar.addClass("comment-avatar")
var avatar_img = $('<img>')
avatar_img.attr("src", rooturl + '/medf/images/avatars/my_wiki_' + dataset.userid + "_l.png")
var body = $('<div></div>')
body.addClass("comment-body")
var user = $('<div></div>')
user.addClass("comment-user")
var user_link = $('<a></a>')
user_link.attr('href', rooturl + '/dic/User:' + dataset.username)
user_link.text(dataset.username)
var text = $('<div></div>')
text.addClass("comment-text")
var comment_text = $('<div></div>')
comment_text.html(dataset.text)
var footer = $('<div></div>')
footer.addClass("comment-footer")
var time = $('<span></span>')
time.addClass("comment-time")
time.text(timestamp(dataset.timestamp))
var reply = $('<span></span>')
reply.addClass("comment-reply")
reply.html('回复')
var like = $('<span></span>')
like.addClass("comment-like")
like.html('赞')
var report = $('<span></span>')
report.addClass("comment-report")
report.text('举报')
if (parent == "") {
$(".comment-container").append(thread)
} else {
$('#comment-' + parent).append(thread)
}
$("#" + divID).append(post)
$("#" + divID).children('.comment-post').append(avatar)
$("#" + divID).children('.comment-post').children('.comment-avatar').append(avatar_img)
$("#" + divID).children('.comment-post').append(body)
$("#" + divID).children('.comment-post').children('.comment-body').append(user)
$("#" + divID).children('.comment-post').children('.comment-body').children('.comment-user').append(user_link)
$("#" + divID).children('.comment-post').children('.comment-body').append(text)
$("#" + divID).children('.comment-post').children('.comment-body').children('.comment-text').append(comment_text)
$("#" + divID).children('.comment-post').children('.comment-body').append(footer)
$("#" + divID).children('.comment-post').children('.comment-body').children('.comment-footer').append(time)
$("#" + divID).children('.comment-post').children('.comment-body').children('.comment-footer').append(reply)
$("#" + divID).children('.comment-post').children('.comment-body').children('.comment-footer').append(like)
$("#" + divID).children('.comment-post').children('.comment-body').children('.comment-footer').append(report)
}
</script>
<div class="word_entries_container" >
<div style="margin:5px;">
<p class="word_name">{{正面}}</p>
<p class="word_name">{{中文名词}}</p>
<hr>
<div style="margin-top:5px">
<div>
<a href="https://www.medforest.cn/medf/index.php?title=专业英语单词:{{正面}}&action=edit" class="link-1"><font
size=2px>-> 内容有误？点击进入网页更正！</font></a>
</div>
<p style="text-align:center;"><font size=2px>{{来源}}</font></p>
<h6 style="text-align:left;margin-left:25px">读音:{{读音}}
<button class="sound_button" onclick="autoPlay()" style="display:inline-block;">
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor"
class="bi bi-play-circle" viewBox="0 0 16 16">
<path d="M8 15A7 7 0 1 1 8 1a7 7 0 0 1 0 14zm0 1A8 8 0 1 0 8 0a8 8 0 0 0 0 16z"/>
<path d="M6.271 5.055a.5.5 0 0 1 .52.038l3.5 2.5a.5.5 0 0 1 0 .814l-3.5 2.5A.5.5 0 0 1 6 10.5v-5a.5.5 0 0 1 .271-.445z"/>
</svg>
</button>
</h6>
<h6 style="text-align:left;margin-left:25px">释义:</h6>
<p class="word_defination" style="margin-left:30px">{{解释}}</p>
<div>
<div style="height:10px;"></div>
</div>
</div>
<div>
<p id="cache" style="display:none;">专业英语单词:{{正面}}</p>
<audio src="https://dict.youdao.com/dictvoice?audio={{正面}}" id="myaudio" controls="controls" hidden="true">
</audio>
<p id="info" class="bottom_info"></p>
</div>
<div>
<p id="messages"></p>
</div>
</div>
<p style="display: none" id="wordName">专业英语单词:{{正面}}</p>
<div class="comment-container"></div>
</div>
<p style="font-size:11px;position:absolute;right:15px;color:lightgray">version:2.0.1(2022-3-3)</p>
<script language="JavaScript" type="text/javascript">
$(document).keydown(function(event){
if(event.keyCode==67){
autoPlay()
};
});
</script>
样式
.sound_button{
width:25px;
padding-top:3px;
background-color: #ee8e8;
border: none;
border-radius: 4px;
border: 2px solid lightgray;
}
.footer_button{
font-size: 16px;
margin-left:20px;
margin-bottom:10px;
width:130px;
height:30px;
background-color: #ee8e8;
border: none;
border-radius: 4px;
border: 2px solid lightgray;
}
.footer_button:hover {
background-color: gray; /* Green */
color: white;
transition-duration:0.3s;
}
.sound_button:hover {
background-color: gray; /* Green */
color: white;
transition-duration:0.3s;
}
.footer_button{
transition-duration:0.3s;
font-size: 16px;
margin-left:20px;
margin-bottom:10px;
width:130px;
height:30px;
background-color: #ee8e8;
border: none;
border-radius: 4px;
border: 2px solid lightgray;
}
.sound_button{
transition-duration:0.3s;
width:25px;
padding-top:3px;
background-color: #ee8e8;
border: none;
border-radius: 4px;
border: 2px solid lightgray;
}
.card {
font-family: arial;
font-size: 28px;
color: black;
background-color: white;
}
article, aside, blockquote, body, button, code, dd, details, div, dl, dt, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, hr, input, legend, li, menu, nav, ol, p, pre, section, td, textarea, th, ul {
margin: 0;
padding: 0;
}
.word_entries_container{
margin:10px;
margin-top:2%;
background-color: #f4f4f4;
border-radius:10px;
}
.word_entries_container h3 {
display: block;
font-size: 1.17em;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
font-weight: bold;
}
.word_name{
text-align:center;
margin: 0 0 5px;
color: #333;
font-size: 28px;
font-weight: 700;
font-family:"Georgia";
word-break: break-word;
}
.word_defination{
color: #555;
font-size: 30px;
text-align:left;
margin-left:40px;
}
.word_defination p {
display: block;
margin-block-start: 1em;
margin-block-end: 1em;
margin-inline-start: 0px;
margin-inline-end: 0px;
}
ol, ul {
list-style: none;
}
.word_source{
display: inline-block;
font-size: 10px;
margin-left: 10px;
}
#blur{
-webkit-filter:blur(8px);
}
.reg{
text-align:right;
}
.bottom_info{
font-size:10px;
text-align:center;
color: #555;
padding:8px
}
.link-1{
text-decoration:none;
}
.link-2{
text-decoration:none;
margin-left:30px
}
.c-container {
position: relative;
top: 0px;
margin: 0px 0px 0px 70px;
}
.c-user {
font-weight: bold;
position: relative;
margin: 0px 0px 6px 0px;
}
.c-score {
display:none;
}
.c-actions{
display:none;
}
.c-avatar{
display:none;
}
.c-time{
-webkit-text-size-adjust: 100%;
font-family: 'Segoe UI','Segoe UI Emoji','Segoe UI Symbol','Lato','Liberation Sans','Noto Sans','Helvetica Neue','Helvetica',sans-serif;
word-wrap: break-word;
direction: ltr;
font-size: 10px;
color: #888;
line-height: 11px !important;
font-weight: normal !important;
position: absolute;
top: -14px;
left: 75px;
padding: 22px;
}
.c-user {
font-weight: bold;
font-size:20px;
position: relative;
margin: 0px 0px 6px 0px;
}
.buttom_b{
margin:0px 0px 10px 25px;
}
.comment-body textarea, .comment-preview {
/* Metrics */
margin: 0px;
padding: 10px;
resize: none;
box-sizing: border-box;
width: 100%;
/* Styles */
display: block;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 13px;
line-height: 20px;
/* Borders */
border-width: 1px 1px medium;
border-style: solid solid none;
border-color: #CCC #CCC #999;
border-radius: 3px 3px 0px 0px;
background: white;
}
.comment-body textarea {
color: #999;
height: 60px;
}
.comment-preview {
min-height: 70px;
padding-top: 0px;
}
.comment-preview {
background: #f8f8f8;
}
.comment-toolbar {
position: relative;
height: 32px;
color: #555;
padding-left: 10px;
font-size: 12px;
line-height: 32px;
border: 1px solid #CCC;
border-radius: 0px 0px 3px 3px;
background: white;
box-sizing: border-box;
margin-bottom: 1em;
}
.comment-submit {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
position: absolute;
right: -1px;
top: -1px;
height: 32px;
width: 100px;
text-align: center;
text-shadow: 0px 1px 0px #FFF;
color: #555;
font-size: 14px;
font-weight: bold;
border: 1px solid #CCC;
background-color: white;
transition: all 0.3s ease-out;
box-shadow: 0px 0px 0px white inset, 0px 0px 0px white;
cursor: pointer;
margin: 0px;
padding: 0px;
border-radius: 0px 0px 3px 0px;
outline: 0;
}
.comment-submit:hover {
box-shadow: 0px 0px 0px white inset, 0 5px 11px 0 rgba(0,0,0,0.18);
}
.comment-submit:active {
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0px 0px 0px white;
}
.flowthread-btn {
position: relative;
top: -1px;
float: left;
width: 24px;
height: 24px;
margin: 4px;
padding: 0px;
border-radius: 10%;
outline: 0;
border: 0 white;
box-sizing: border-box;
background-repeat: no-repeat;
background-position: center;
background-color: transparent;
transition: all 0.3s ease-out;
}
.flowthread-btn::-moz-focus-inner, .comment-submit::-moz-focus-inner {
border: 0;
}
.flowthread-btn:hover {
border: 1px solid #CCC;
box-shadow: 0px 0px 0px white inset,0 5px 11px 0 rgba(0,0,0,0.18);
}
.flowthread-btn:active, .flowthread-btn.on{
border: 1px solid #CCC;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0px 0px 0px white;
}
.flowthread-btn.on:hover {
border: 1px solid #CCC;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15) inset, 0 5px 11px 0 rgba(0,0,0,0.18);
}
.flowthread-btn.on:active {
border: 1px solid #CCC;
box-shadow: 0px 0px 0px white inset,0 0 0 0 white;
}
.flowthread-btn-preview {
width: 0px;
margin: 4px 0;
opacity: 0;
background-image: url(preview.svg);
}
.flowthread-btn-wikitext {
background-image: url(wikitext.svg);
}
.flowthread-btn-wikitext.on+.flowthread-btn-preview {
width: 24px;
margin: 4px;
opacity: 1;
}
.comment-reply::before, .comment-like::before, .comment-report::before, .comment-delete::before, .comment-recover::before {
content: "";
background: transparent url("sprites.png") no-repeat scroll 0% 0%;
opacity: 0.6;
display: inline-block;
width: 15px;
height: 10px;
transition: opacity 0.15s linear 0s;
font-size: 9px;
vertical-align: middle;
}
.comment-reply, .comment-like, .comment-report, .comment-delete {
margin-left: 5px;
cursor: pointer;
transition: color 0.15s linear 0s;
}
.comment-reply:hover, .comment-like:hover, .comment-report:hover, .comment-delete:hover {
opacity: 1.0;
color: #555;
}
.comment-reply:hover::before, .comment-like:hover::before, .comment-report:hover::before, .comment-delete:hover::before {
opacity: 1.0;
}
.comment-reply::before {
background-position: 0px 0px;
}
.comment-like::before {
background-position: 0px -14px;
}
.comment-like[liked]::before {
background-position: 0px -27px;
}
.comment-report::before {
background-position: 0px -50px;
}
.comment-report[reported]::before {
background-position: 0px -62px;
}
.comment-delete::before {
background-position: 0px -40px;
}
.comment-avatar img {
width: 50px;
height: 50px;
}
.comment-thread > div:not(:first-child) .comment-avatar img {
width: 30px;
height: 30px;
}
.comment-thread > div:not(:first-child) .comment-body {
padding-left: 40px;
}
.comment-thread .comment-replybox {
margin-left: 50px;
}
#flowthread {
clear: both;
margin-top: 2em;
}
.comment-avatar {
float: left;
}
.comment-thread {
border-top: 1px solid rgba(0, 0, 0, 0.13);
}
.comment-post {
padding: 10px;
}
.comment-body {
padding-left: 60px;
}
.comment-user, .comment-user a {
color: #777;
font-size: 13px;
margin-right: 8px;
}
.comment-text {
font-size: 13px;
line-height: 1.5em;
margin: 0.5em 0px;
word-wrap: break-word;
/* Added to guard against malacious position:absolute */
position: relative;
overflow: hidden;
min-height: 1em;
}
.comment-footer {
font-size: 12px;
margin-right: 8px;
color: #999;
}
.comment-post .comment-report, .comment-post .comment-delete {
display: none;
}
.comment-post:hover .comment-report, .comment-report[reported], .comment-post:hover .comment-delete {
display: initial;
}
.comment-thread .comment-thread {
margin-left: 40px;
}
.comment-paginator {
border-top: 1px solid rgba(0,0,0,0.13);
text-align: right;
padding: 0.5em;
}
.comment-paginator span {
color: #777;
border-radius: 3px;
font-size: 12px;
margin: 0 3px;
padding: 2px 5px;
border: 1px solid transparent;
cursor: pointer;
}
.comment-paginator span:hover {
color: #333;
background-color: rgba(0,0,0,0.03);
}
.comment-paginator span[current] {
color: #d32;
border: 1px solid #ccc;
background-color: rgba(0,0,0,0.03);
}
.comment-bannotice {
border-top: 1px solid rgba(0,0,0,0.13);
font-size: 13px;
text-align: center;
padding: 1em;
color: #777;
}
.comment-container-top {
border: 1px #CCC solid;
border-radius: 5px;
}
.comment-container-top[disabled] {
display: none;
}
/* The title bar */
.comment-container-top > div:first-child {
background: #f8f8f8;
height: 24px;
line-height: 24px;
color: #555;
text-indent: 1em;
font-size: small;
border-radius: 5px 5px 0 0;
}
.comment-container-top > div:last-child {
border-radius: 0 0 5px 5px;
}
.comment-container-top:not([disabled]) + .comment-container > div:first-child {
border-top: 0;
}