資訊專欄INFORMATION COLUMN
摘要：做題區(qū)域自動補全剩下的高度代碼如下時間轉換的函數(shù)由秒轉換的格式時間轉換測試網(wǎng)址點我跳轉手機打開或瀏覽器仿真?zhèn)}庫地址鏈接有用記得點個星掃碼也可以上幾張效果圖
實現(xiàn)功能：
題目的加載
文章的上下滑動
做題模式
做題內(nèi)容區(qū)域的上下滑動動態(tài)調(diào)整做題區(qū)域
左右滑動切換題目
計時功能
提交限制功能
字體大小調(diào)節(jié)
背景顏色調(diào)節(jié)
網(wǎng)絡錯誤提示窗
做題選中邏輯
首先遇到的問題是做題區(qū)域與文章區(qū)域上下滑動的問題
怎樣才能自適應屏幕呢
首先在 created函數(shù)里，獲取當前屏幕的高度
this.clientHeight = document.documentElement.clientHeight
this.position = this.clientHeight / 2
this.positionEnd = this.clientHeight / 2
后來經(jīng)過多方面調(diào)研，發(fā)現(xiàn)沒有適合的分屏插件
于是決定自己寫截屏插件
大體思路如下
利用touch.js來偵測手指在屏幕中的滑動事件
根據(jù)獲得的參數(shù)，計算出做題區(qū)域與文章展示區(qū)域的高度變化
根據(jù)高度變化，改變文章顯示區(qū)域的高度。做題區(qū)域自動補全剩下的高度
代碼如下
onPanup (e) {
this.aniM = false
console.log(this.clientHeight - this.position)
if (this.clientHeight - this.position <= 200) {
this.position = this.clientHeight - 200
this.contentHeight = this.position + "px"
return false
} else {
this.position = e.deltaY + this.positionEnd
this.contentHeight = this.position + "px"
let child = document.getElementsByClassName("setHeight")
if (this.examStatus) {
for (var i = 0; i < child.length; i++) {
child[i].setAttribute("style", "padding-bottom:50px;height:" + (this.clientHeight - this.position - 100) + "px")
}
} else {
for (var j = 0; j < child.length; j++) {
child[j].setAttribute("style", "height:" + (this.clientHeight - this.position - 80) + "px")
}
}
}
},
setH () {
let child = document.getElementsByClassName("setHeight")
if (this.examStatus) {
for (var i = 0; i < child.length; i++) {
child[i].setAttribute("style", "padding-bottom:50px;height:" + (this.clientHeight - this.position - 100) + "px")
}
} else {
for (var j = 0; j < child.length; j++) {
child[j].setAttribute("style", "height:" + (this.clientHeight - this.position - 80) + "px")
}
}
},
onPanend (e) {
if (this.clientHeight - this.position <= 200) {
this.position = this.clientHeight - 201
this.positionEnd = this.clientHeight - 201
} else {
this.positionEnd = this.positionEnd + e.deltaY
}
},
時間轉換的函數(shù)
由秒轉換XX：XX的格式
startTime () {
this.startTimeTop ++
this.timeTrans(this.startTimeTop)
setTimeout(() => {
this.startTime()
}, 1000)
},
// 時間轉換
timeTrans (val) {
let f = parseInt(val / 60)
let m = val % 60
if (f < 10) {
f = "0" + f
}
if (m < 10) {
m = "0" + m
}
this.time.f = f
this.time.m = m
},
測試網(wǎng)址點我跳轉（手機打開或瀏覽器仿真）
github倉庫地址git鏈接
https://github.com/fanshyiis/...
有用記得點個星
https://www.enjoyreading.net/...
掃碼也可以
上幾張效果圖
文章版權歸作者所有，未經(jīng)允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://m.hztianpu.com/yun/93416.html
摘要：做題區(qū)域自動補全剩下的高度代碼如下時間轉換的函數(shù)由秒轉換的格式時間轉換測試網(wǎng)址點我跳轉手機打開或瀏覽器仿真?zhèn)}庫地址鏈接有用記得點個星掃碼也可以上幾張效果圖 實現(xiàn)功能： 題目的加載 文章的上下滑動 做題模式 做題內(nèi)容區(qū)域的上下滑動動態(tài)調(diào)整做題區(qū)域 左右滑動切換題目 計時功能 提交限制功能 字體大小調(diào)節(jié) 背景顏色調(diào)節(jié) 網(wǎng)絡錯誤提示窗 做題選中邏輯 首先遇到的問題是做題區(qū)域與文章區(qū)域上下...
閱讀 2105·2021-11-23 09:51
閱讀 1306·2019-08-30 15:55
閱讀 1674·2019-08-30 15:44
閱讀 817·2019-08-30 14:11
閱讀 1206·2019-08-30 14:10
閱讀 981·2019-08-30 13:52
閱讀 2703·2019-08-30 12:50
閱讀 685·2019-08-29 15:04
