【JS】實用/經常使用函數/Function方法

1.獲取日月 時分秒

  //獲取 月日
  getMonth=(time)=>{ var date = new Date(time) var month = date.getMonth()+1<10?'0'+(date.getMonth()+1):(date.getMonth()+1) var date  = date.getDate()<10?'0'+date.getDate():date.getDate() return month+'-'+date } //獲取時分秒
  getTime=(time)=>{ var date = new Date(time) var hours = date.getHours()<10?'0'+date.getHours():date.getHours() var minutes  = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes() var second  = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds() return hours+':'+minutes+':'+second }

使用： 

const CreatedAt =  '0001-01-01T00:00:00Z'

  <Text style={{fontSize: 11, color: '#999999', marginRight: 6}}> { this.getMonth(item.CreatedAt) } </Text>

 2.短信倒計時

按鈕

<Touchable
    style={{
        position: 'absolute',
        right: 20,
        bottom: 15,
        backgroundColor: theme.bgc0,
        borderRadius: 25,
        justifyContent: 'center',
        alignItems: 'center',
        width: 88,
        marginRight: 20,
        height:28,
    }}
    onPress={() => {
      this.send_sms();
    }}
>
    <View>
        <Text style={{
            color: '#FFFFFF',
            fontSize:11,
      }}>{buttonText}</Text>
    </View>
</Touchable>

發送驗證碼函數

  send_sms() {
    WalletAction.getVerificationCode().then((res) => { 
      if (res.status === 10000) {
        Toast.message('驗證碼發送成功');
        this.setState({ disabled: true });
        this._setTimeout(60);
      } else {
  
        Toast.message(res.message);
        this.setState({ disabled: false });
      }
    });
  }

倒計時函數

_setTimeout(number) {
    if (number) {
      if (this.state.time > 0) {
        return;
      }
      this.setState({
        time: number - 1,
        buttonText: `${number - 1}秒後重發`,
      }, () => {
        this._setTimeout();
      });
      return;
    }
    if (this.state.time < 1) {
      this.setState({
        buttonText: '獲取驗證碼',
        disabled: false,
      });

    } else {
      this.setState({
        time: this.state.time - 1,
        buttonText: `${this.state.time}秒後重發`,
      });
      this.timer = setTimeout(() => {
        this._setTimeout();
      }, 1000);
    }
  }

 

 

3.計時器： 時分秒

  countTime() { // 記錄已用聊天時間
    this._timer = setInterval(() => {
      let {seconds} = this.state; // 獲取秒
      let {minutes} = this.state; // 獲取分鐘
      let {hour} = this.state; // 獲取小時
      if (seconds < 60) { // 秒數若是小於60 就加1
        seconds++;
        if (seconds == 60) { // 秒數若是等於60 就 重置爲0
          seconds = 0,
          minutes = ++minutes;
          if (minutes == 60) {
            minutes = 0;
            hour = ++hour;
          }
        }
        this.setState({
          seconds, // 更改秒的狀態
          minutes, // 更改分鐘的狀態
          hour, // 更改小時的狀態
        });
      }
    }, 1000);
  }


<Text style={{fontSize: 12, color: '#fff'}}>
               {
                 hour.toString().length == 2 ? null : 0
               }
               {hour}
               :
               {
                 minutes.toString().length == 2 ? null : 0
               }
               {minutes}
               :
               {
                 seconds.toString().length == 2 ? null : 0
               }
               {seconds}
</Text>

 

4.評分組件

import React, { Component } from 'react' import { View, StyleSheet, TouchableOpacity, Image, } from 'react-native'; import PropTypes from 'prop-types'; export default class StarRating extends Component { static defaultProps = { maxStars: 5, rating: 1, starSize: -1, interItemSpacing: 0, valueChanged: (index) => { }, editAble: true, }; static propTypes = { maxStars: PropTypes.number, rating: PropTypes.number, unSelectStar: PropTypes.number, valueChanged: PropTypes.func, starSize: PropTypes.number, interItemSpacing: PropTypes.number, editAble: PropTypes.bool, }; constructor(props) { super(props); this.state = { maxStars: this.props.maxStars, rating: this.props.rating, firstImageLayout: null, starSize: this.props.starSize, }; } render() { let starArray = []; let imageSource = null; for (let i = 1; i <= this.state.maxStars; i++) { if (i <= this.props.rating) { imageSource = this.props.selectStar; } else { imageSource = this.props.unSelectStar; } let styleArray = []; if (i !== this.state.maxStars) { styleArray.push({ marginRight: this.props.interItemSpacing }); } if (this.state.starSize > 0) { styleArray.push({ width: this.state.starSize, height: this.state.starSize }); } //push Image
 starArray.push( <TouchableOpacity key={i} onPress={() => { if (this.props.editAble) { this.props.valueChanged(i) } }} >
                    <Image source={imageSource} style={styleArray} />
                </TouchableOpacity> ); } return ( <View style={styles.container} > {starArray} </View> ) } }; const styles = StyleSheet.create({ container: { flexDirection: 'row', justifyContent: 'center', alignItems: 'center', } });

 

使用：

<StarRating maxStars={5} // 最大星星數量
    rating={this.state.sellerScore} // 當前星星數
    starSize={20} // 星星大小
    interItemSpacing={23} // 星星之間的間距
    valueChanged={(star) => {this.setState({sellerScore: star},() => {console.log(this.state.sellerScore)})}} // 星星數量改變
    selectStar={videoVoice} // 選中圖片
    unSelectStar={videoAudio} // 未選中圖片
/>

 

5.點贊

 //點贊
  like(id,isLike) {
    Http.postForm('/api/user/find/timeline/like/count', {
      id: id,
      status:isLike   //1點贊,2取消
    }).then((res) => {
      if (res.status === 10000) {
        if (isLike === 1) {
          this.setState({
            isLike: 2,
        });
        } else {
          this.setState({
            isLike: 1,
        });
        }
        this.getUserInfo() //獲取點贊數量
    }
    })
  }

 getUserInfo() {
      Http.postForm('/api/user/userinfo').then(res => {
        console.log('獲取用戶ID',res)
        if (res.status === 10000) {
          this.Checklike(this.props.item.ID,res.user.ID)
          this.setState({
            Userid:res.user.ID
          })
        }
      })
    }
    //查看動態詳情
  Checklike(id,Userid) {
    Http.postForm('/api/user/find/timeline/detail', {
      id,
      user_id:Userid
    }).then((res) => {
      console.log('查看返回信息',res);
      if (res.status === 10000) {
        this.setState({
          like_number:res.data.like_number,
          comment_number:res.data.comment_number,
          is_like:res.data.is_like,//1 已點贊 2 沒點贊
          isLike:res.data.is_like===1?2:1
        })
    }
    })
  }

// 渲染標籤
<Touchable
            delayPress={300}
            style={{
              flexDirection: 'row',
              alignItems: 'center',
              marginRight: 30,
            }}
            onPress={()=>{this.like(item.ID,isLike)}}
          >
            {is_like === 2? <Image source={unstar}/>: <Image source={star} />}
            <Text style={{fontSize: 11, color: '#C1C1C1', marginLeft: 6,marginTop:3 }}>{like_number}</Text>
          </Touchable>