Skip to content

W
wangjin-front-end
Commit f83895c0 authored by spc's avatar spc
Browse files
Options

1

parent ea0ac88f
Show whitespace changes
Inline Side-by-side
Showing with 2071 additions and 837 deletions
.storybook/webpack.config.js
View file @ f83895c0
......@@ -5,5 +5,12 @@ module.exports = ({config, mode}) => {
loaders: ["style-loader", "css-loader", "less-loader"],
include: path.resolve(__dirname, '../')
});
config.module.rules.push({
test: /\.(js|jsx|ts|tsx)$/,
loader: require.resolve('babel-loader'),
options: {
presets: [['react-app', { flow: false, typescript: true }]],
},
});
return config;
}
\ No newline at end of file
package-lock.json
View file @ f83895c0
This source diff could not be displayed because it is too large. You can view the blob instead.
package.json
View file @ f83895c0
......@@ -5,7 +5,7 @@
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"storybook": "start-storybook -p 9001 -c .storybook"
"storybook": "start-storybook -p 9003 -c .storybook"
},
"keywords": [],
"author": "",
......
src/stories/danma/danmaCtrl.js 0 → 100644
View file @ f83895c0
import React from "react";
/**
*
* @param {*} DanmaItem 传入的弹幕Item Item
* @param {*} DanmaData 弹幕数据 [{},{}]
* @param {Array} speed 移动速度 [2,3,1,3]
* @param {*} DanmaItemWidth 弹幕Item宽度 200
* @param {*} DanmaItemHeight 弹幕Item高度/2 30
* @returns 不知道写了啥
*/
export default function DanmaCtrl(DanmaItem, DanmaData, speed, DanmaItemWidth, DanmaItemHeight) {
return class extends React.Component {
constructor(props) {
super(props);
this.state = {
danmaItems: new Map()
}
this.pos = 350
this.top = DanmaItemHeight + 15
this.col = speed.length
/** speed*(fixedTime-spaceTime)>DanmaItem.width 不重叠 */
this.speed = speed
this.fixedTime = 50
this.spaceTime = 50
this.i = 0
this.sendTaskMap = new Map()
this.totalMinusTime = 0
this.nowDanmaItems = new Map()
this.requestAnimationFrameId = null
}
componentDidMount() {
for (let i = 0; i < this.col * 2; i++) {
let t = (this.fixedTime + DanmaItemWidth / this.speed[i % this.col]) * Math.floor(i / this.col) + this.spaceTime * Math.random()
let data = {
danmaData: this.getDanmaData(),
t: t
}
this.sendTaskMap.set(i, data)
}
this.danmaMove()
}
getDanmaData() {
const data = {
danmaData: DanmaData[this.i % DanmaData.length],
i: this.i
}
this.i++
return data
}
sendDanma(data) {
const newDanmaItem = React.createElement(DanmaItem, {
key: data.i,
...data.danmaData,
style: {
left: this.pos + "px",
top: this.top * (data.i % this.col) + "px"
}
})
this.nowDanmaItems.set(data.i, newDanmaItem)
this.setState({
danmaItems: this.nowDanmaItems
})
}
danmaMove = async () => {
this.totalMinusTime++
let danmaContainer = document.getElementById("danmaContainer")
if (danmaContainer) {
let danmaItems = danmaContainer.children
for (let i = danmaItems.length - 1; i >= 0; i--) {
let danmaItem = danmaItems[i]
danmaItem.style.left = danmaItem.offsetLeft - this.speed[Math.floor(danmaItem.offsetTop / this.top)] + 'px'
if (danmaItem.offsetLeft + danmaItem.offsetWidth < -100) {
let l = Math.floor(danmaItem.offsetTop / this.top)
let nowDanmaItems = this.state.danmaItems
for (let j = 0; j < this.i; j++) {
if (j % this.col == l) {
let v = nowDanmaItems.get(j)
if (v) {
if (v == "remove") {
break
}
nowDanmaItems.set(j, 'remove')
break
}
}
}
this.nowDanmaItems = nowDanmaItems
let t = (this.fixedTime + DanmaItemWidth / this.speed[this.i % this.col]) * Math.floor(this.i / this.col) + this.spaceTime * Math.random() - this.totalMinusTime
let danmaData = this.getDanmaData()
let data = {
danmaData: danmaData,
t: t
}
this.sendTaskMap.set(this.i, data)
}
}
}
this.sendTaskMap.forEach((data, i) => {
let t = data.t--
if (t <= 0) {
this.sendDanma(data.danmaData)
this.sendTaskMap.delete(i)
}
})
this.requestAnimationFrameId = requestAnimationFrame(this.danmaMove)
}
map2arr = (map) => {
let arr = []
map.forEach((item, index) => {
if (item != 'remove') {
arr.push(item)
} else {
map.delete(index)
}
})
return arr
}
componentWillUnmount() {
this.requestAnimationFrameId && cancelAnimationFrame(this.requestAnimationFrameId)
}
render() {
let {
danmaItems
} = this.state
return (
<div id="danmaContainer" >
{this.map2arr(danmaItems)}
</div>
)
}
};
}
\ No newline at end of file
src/stories/danma/danmaItem.jsx 0 → 100644
View file @ f83895c0
'use strict';
import React, { Component } from 'react';
import './danmaItem.less';
class DanmaItem extends Component {
constructor(props) {
super(props);
}
render() {
const { danmaText, danmaAvatar, style } = this.props
return (
<div className="dan_mu_2 " style={style}>
<div className="gun_dong_xin_xi ">
<img className="yuan_jiao_ju_xing_2389 " src={RES_PATH + '引导1/圆角矩形 2389.png'} />
<span className="danmaText ">{danmaText}</span>
</div>
<div className="hao_you_tou_xiang ">
<img className="tuo_yuan_2076_kao_bei " src={RES_PATH + '引导1/椭圆 2076 拷贝.png'} />
<img
className="danmaAvatar "
src={danmaAvatar}
/>
</div>
</div>
);
}
}
export default DanmaItem;
src/stories/danma/danmaItem.less 0 → 100644
View file @ f83895c0
.dan_mu_2 {
width: 387px;
height: 69px;
position: absolute;
.gun_dong_xin_xi {
width: 364px;
height: 58px;
left: 23px;
top: 6px;
position: absolute;
.yuan_jiao_ju_xing_2389 {
width: 364px;
height: 58px;
left: 0px;
top: 0px;
opacity: 0.4;
position: absolute;
}
.danmaText {
width: 380px;
height: 26px;
left: 57px;
top: 14px;
position: absolute;
font-size: 20px;
color: #ffffff;
}
}
.hao_you_tou_xiang {
width: 69px;
height: 69px;
left: 0px;
top: 0px;
position: absolute;
.tuo_yuan_2076_kao_bei {
width: 69px;
height: 69px;
left: 0px;
top: 0px;
position: absolute;
}
.danmaAvatar {
width: 65px;
height: 65px;
border-radius: 100px;
left: 2px;
top: 2px;
position: absolute;
}
}
}
src/stories/danma/danmaShowView.jsx 0 → 100644
View file @ f83895c0
import React, { useEffect, useState } from 'react'
import DanmaCtrl from './danmaCtrl'
import DanmaItem from './danmaItem'
import './danmaShowView.less'
const DanmaShowView = () => {
let text = `
let danmaAvatars = ["//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
, "//yun.duiba.com.cn/polaris/1022.5d0247352e3f1a068cd812df9051079b111ef0a5.jpg"
,
"//yun.duiba.com.cn/polaris/1020.dc6994ddeb5726f99a5ab9692f1a339ecd46a99b.jpg"
,
"//yun.duiba.com.cn/polaris/1009.3307be2f8053aad97259c34062934185a200eac4.jpg"
,
"//yun.duiba.com.cn/polaris/226.24bc5cff2e5ce9786f3f91822073a8e07d8e72a2.jpg"
,
"//yun.duiba.com.cn/polaris/167.86ddf7a8a38a1f3d65b1eaea8b366ea865455d5f.jpg"
,
"//yun.duiba.com.cn/polaris/160.4e523285ae71ca3102ebf5abcec94c768a03dee3.jpg"
,
"//yun.duiba.com.cn/polaris/152.ad66124d7a5bb408aab23dc4df6b3a48d5cc3e3d.jpg"
,
"//yun.duiba.com.cn/polaris/151.c780044a45f4bb54886abc0c6ced752c646c9258.jpg"
, "//yun.duiba.com.cn/polaris/93.e03b23d831096c181f5a216e851890fe9720a529.jpg"
,
"//yun.duiba.com.cn/polaris/74.583f9804214c592abbdb20d9bc22699016a14111.jpg"
,
"//yun.duiba.com.cn/polaris/13.74093d5f56cfd4407cb1364a0b39420c1cf6cd49.jpg"
,
"//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
,
"//yun.duiba.com.cn/polaris/32.886b712236952e68b52bb8c9ed489aa71e4696eb.jpg"
,
"//yun.duiba.com.cn/polaris/35.556e40e6e2c1f47e0907b35faef3470990565778.jpg"
,
"//yun.duiba.com.cn/polaris/46.acb5c7e7abd8b8f476bd3e495b253412e537578a.jpg"
,
"//yun.duiba.com.cn/polaris/51.21cf0c7f2784616b92470559a2b259668bb35465.jpg"
, "//yun.duiba.com.cn/polaris/91.e7db79153cab5dfeb0ed05c5ac0efad7ed2c0f62.jpg"
,
"//yun.duiba.com.cn/polaris/110.6f9d23a83f44b22bce4b580380c65e65e5e69d88.jpg"
,
"//yun.duiba.com.cn/polaris/296.cbff50bfde5f4d61461f486f2a37ae8aa495eed9.jpg"
, "//yun.duiba.com.cn/polaris/248.d535ab0bb6ed1bad5f863c161ffe7e53adcf129c.jpg"
, "//yun.duiba.com.cn/polaris/389.81c5dc97d4f5f7c409a7463cc1d64c15395e9ccf.jpg"
, "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
, "//yun.duiba.com.cn/polaris/21.20b8b067a25a8217cd4be2934e55a4fcaf090f11.jpg"
]
let getPhoneNum = () => {
let phoneHead = [181, 156, 131, 176, 138, 135]
let head = phoneHead[Math.floor(Math.random() * phoneHead.length)]
let bottomNum = "" + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10)) + (Math.floor(Math.random() * 10))
return head + "****" + bottomNum
}
let getPrize = () => {
let prizes = ["100元立减金", "电影票X4", "爱国者耳机", "5元立减金", "100元立减金"]
return prizes[(Math.floor(Math.random() * prizes.length))]
}
let danmaData = [{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] },
{ danmaText: getPhoneNum() + "获得" + getPrize(), danmaAvatar: danmaAvatars[Math.floor(Math.random() * danmaAvatars.length - 1)] }]
return DanmaCtrl(DanmaItem, danmaData, [1, 3, 2, 2, 4], 200, 26)
`
let Danma
Danma = new Function(text)
console.log("Danma",Danma())
return (
<>
<textarea className="codeText" name="code" >{text}</textarea>
<div className="view">
{console.log(Danma)}
{Danma && <Danma></Danma>}
</div>
</>
)
}
export default DanmaShowView
\ No newline at end of file
src/stories/danma/danmaShowView.less 0 → 100644
View file @ f83895c0
.codeText {
width: 750px;
height: 1624px;
position: absolute;
display: inline-block;
}
.view {
width: 750px;
height: 1624px;
left: 780px;
background-color: aqua;
position: absolute;
display: inline-block;
}
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment